JavaScript-12.解构赋值

数组解构

• 模式结构要匹配，等号运算符两边的结构要一样
• 索引值相同的完成赋值

const [a,b,c]=[1,2,3];
console.log(a,b,c);     //1 2 3

const [a,,b]=[1,2,3];
console.log(a,b);   //1 3

const [a,[,b],c]=[1,[2,3],4];
console.log(a,b,c);     //1,3,4

默认值

生效条件：当数组成员严格等于undefined时，对应的默认值才会生效

const [a=1,b=2]=[3,0];  //3 0
const [a=1,b=2]=[3,null];  //3 null
const [a=1,b=2]=[3];    // 3 2(默认值生效)
const [a=1,b=2]=[undefined,undefined];  //1 2(默认值生效)

如果默认值是表达式，默认值表达式是惰性求值（只有默认值生效时才会执行）

应用

• 函数参数

  const add=arr=>arr[0]+arr[1];
  // 等价于
  const add=[x,y]=>x+y
  add([1,1]);
  

• 交换变量的值

  var x=1;
  var y=2;
  [x,y]=[y,x];
  // 等号左边为变量，右边为值 等价与[x,y]=[2,1];
  

对象解构

• 模式匹配
• 属性名相同的完成赋值

const {name,age}={name:'skc',age:18};   
// 该形式是以下形式的简写
cosnt {name:name,age:age}={name:'skc',age:18};

const {name:a,age:b}={name:'skc',age:18};
console.log(a,b);   //skc 18

默认值

生效条件：对象的属性值严格等于undefined时，对应的默认值才会生效

如果默认值时表达式，默认表达式时惰性求值

注意事项

• 如果将一个已经定义的变量用于解构赋值，整个赋值须在圆括号中进行。否则会被解析为块级运算符，会报错

  let x=2;
  ({x}={x:12});
  

• 对象的解构赋值可以取到继承的属性

  cosnt {toString}={};
  

其他数据类型的解构赋值

解构赋值只有数组形式和对象形式

字符串

字符串可以使用数组形式，也可以使用数组形式进行解构赋值

const [a,b,,,c]='hello';    
const {0:a,1:b,4:c}='hello';

数值和布尔值

会将等号右边转化为对应的对象，当无法取到对应的原始值

undefined和null

进行解构赋值时，会报错