解构赋值

ES6中推出的解构赋值很好用，来学习一下！

解构：解开目标的整体结构
赋值：将目标中的数据，赋值到我们定义的变量中
解构的源(值)，解构赋值表达式的右边部分。
解构的目标，解构赋值表达式的左边部分。
解构赋值是对赋值运算的扩展

1、对象的解构赋值

   //注意：{}中的名字必须和obj中的保持一致,即变量名必须和属性名必须一致
   let obj = {
     a:1,
     b:2,
     c:3,
   }
   let {a,b,c} = obj;
   console.log(a,b); // 1 2
   console.log(a,b,c); //1 2 3
  
   //当变量名与对象的属性名不一致时
   let {e,f,g} = obj;  
   console.log(e,f,g);  //undefined undefined undefined

2、数组的解构赋值
数组中的注意点： 变量与数组中的元素保持顺序一致
书写格式： let [变量名,…]=[数组元素]；
赋值的时候是一一对应的，第一个变量取到的值是对应数组内第一个元素。

   let arr = [1,2,3,4,5];
   let [q,w,e,r] = arr;
   console.log(q,w); //1 2
   console.log(w,r); /2 4
 
   //（1）基本
   let [x,y,z] = [1,2,3];
   console.log(x,y,z);  //1 2 3
   
   //（2）可嵌套
   let [x, [[y],z]] = [1,[[3],5]];
   console.log(x,y,z); //1 3 5
   // let [x,[[y],z]] = [1,[3,5]];//如果赋值时变量与数组元素没有一一对应，会报错
   // console.log(x,y,z);//报错Uncaught TypeError: undefined is not a function

   //（3）可忽略
   let [x, , z] = [1, 2, 3];
   console.log(x,z);//1 3
   //let [, , z] = [1, 2, 3];
   //console.log(z);//3

   //（4）不完全解构
   let [x = 1 ,y] = [];
   console.log(x,y);//1 undefined
   //let [x = 1 ,y] = [];
   //console.log(x,y);//1 undefined

   //（5）默认解构
   let [x = 10] = [undefined];
   console.log(x);//10
   let [x] = [undefined];
   console.log(x);//undefined

3、字符串的解构赋值
变量名的存储顺序 和 字符串中存储的顺序一致

   let str = "abc";
   let [x,y] = str;
   console.log(x);//a
   console.log(y);//b
   console.log(x,y);//ab

注意：
这里解构只能对数组，对象使用。
任何可以转化为object，array的数据都可以使用解构。
数组中使用解构赋值时，变量与数组中的元素顺序要保持一致
字符串中使用解构赋值时，变量名的存储顺序和字符串中存储的顺序一致