JS解构赋值

es6新增的解构赋值比传统赋值更灵活

1. 传统赋值

   // 变量赋值
   let a = 1;
   let x = 2, y = 3;
   1
   2
   3

   // 形参赋值
   function print(name, age) {
   	console.log(`姓名:${name}，年龄:${age}`);
   }
   print('小w', 18);  //只能按顺序依次赋值
   1
   2
   3
   4
   5

2. 数组解构
   按顺序依次赋值，多余的变量设为undefined

   let [a, b, c, d] = [1, 2, 3];   // a=1  b=2  c=3  d=undefined
   1

3. 对象解构
   无顺序，只要属性名匹配就行，也可重命名

   let {a, b: newName, c} = {
   	a: 1,
   	c: 3,
   	b: 2
   }
   console.log(a); // 1
   console.log(newName); // 2
   console.log(c); // 3
   console.log(b); // 报错 => b is not defined
   1
   2
   3
   4
   5
   6
   7
   8
   9

4. 字符串解构
   将字符串分割成单个的字符依次为变量赋值

   let [a, b, c, d, e] = 'hello';
   console.log(a, b, c, d, e); // a='h'  b='e'  c='l' d='l' e='o'
   1
   2

5. 应用场景
   ① 交换两个变量的值

   // 传统方式，需要第三方变量
   let x = 'a', y = 'b';
   let temp = x;
   x = y;
   y = temp;
   
   // 数组解构一行代码搞定！！
   let a = 1, b= 2;
   [a, b] = [b, a];
   console.log(a, b); // a=2  b=1 
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

   ② 给函数形参赋值时，可不关心顺序，同时也可设置默认值

   function print ({name, age = 20}) {
   	console.log(`姓名:${name}，年龄:${age}`);
   }
   print({
   	age: 18,
   	name: '小w'
   });   // 不需要关心顺序，结果 => 姓名：小w，年龄：18
   print({
   	name: '小w'
   });  // 只传入name，结果 => 姓名：小w，年龄：20
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10