ES6 总结 第二章

ES6总结 第二章

  // 以前我们给变量赋值，只能直接指定值
  var a = 1;
  var b = 2;
  var c = 3;
  console.log(a,b,c); // 1 2 3
        
  // 现在用解构赋值的写法就变得简单了，只要模式匹配上了就行了，如下
  // 注意数组是有顺序的
  var [a,b,c] = [11,22,33];
  console.log(a,b,c); // 11 22 33

  var [b,a,c] = [11,22,33];
  console.log(a,b,c); // 22 11 33

  // 当然解构赋值还有嵌套比较复杂的写法，如下
  let [foo,[[bar],[baz]]] = [111,[[222],[333]]];
  console.log(foo,bar,baz); // 111 222 333

  let [head,...foot] = [1,2,3,4];
  console.log(head,foot); // 1 [2,3,4]

  // 如果解构不成功，变量的值就等于undefined，如下
  var [bar3,foo3] = [1000];
  console.log(bar3,foo3); // 1000 undefined

  // 另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号    右边的数组。这种情况下，解构依然可以成功
   let [x,y] = [10000,20000,30000];
  console.log(x,y); // 10000 20000

  // 默认值可以引用解构赋值的其他变量，但该变量必须已经声明
  let [a=1,b=a] = [2,3];
  console.log(a,b); // 2 3

  // 对象的解构也可以指定默认值
  var {x,y=5} = {x:1};
  console.log(x,y); // 1 5

  //对象的解构赋值解构不仅可以用于数组，还可以用于对象(json)
  //对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，    变量的取值由它的位置决定；
  //而对象的属性没有次序，变量必须与属性同名，才能取到正确的值
  var {a,b} = {a:'apple',b:'banana'};
  console.log(a,b); // apple banana
  var {b,a} = {a:'apple',b:'banana'};
  console.log(a,b); // apple banana

  // 如果变量名与属性名不一致，必须写成下面这样
 let obj = {first:'hello',last:'world'};
  // first ---> f，那么此时f就是first，而不是undefined了,有点类似别名的概念
  let {first:f,last} = obj;
  console.log(f,last); // hello world

  //1.也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。 真正被赋值的是后者，而不是前者
  //2.v是匹配的模式，n才是变量。真正被赋值的是变量n，而不是模式v。  
  //注意，采用这种写法时，变量的声明和赋值是一体的
  // v ---> n，那么此时n就是vue，而不是undefined了
  var {v:n} = {v:'vue',r:'react'};
   console.log(n); // vue
  console.log(v); // Uncaught ReferenceError: v is not defined
  console.log(r); // Uncaught ReferenceError: r is not defined