变量的解构赋值_let [x, y, ...z] = ['a'];解释-CSDN博客

解构：按照一定模式，从数组和对象中提取值，对变量进行赋值。

1.数组的解构赋值

基本用法

之前的赋值形式为直接指定值，例如let a = 1。ES6允许写成let [a,b,c] = [1,2,3]，从数组中提取值，按照对应的位置，对变量赋值，只要等号两边的模式相同，左边的变量就会被赋予相应的值。

如果解构不成功，变量的值就会等于undefined
等号左边的模式只匹配等号右边的一部分数组，这是不完全解构，但解构依然成功
如果等号右边不是数组（不是可遍历的结构，比如数值、布尔值、NaN、undefined、null、{}等），则会报错

   
   //嵌套数组解构
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
//解构不成功
let [foo] = [];
let [bar, foo] = [1];//foo都等于undefined
//不完全解构
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

对于Set结构，也可以使用数组的解构赋值（set数据结构类似于数组，但是成员值是唯一的且没有重复值）。

   
   let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

默认值

解构赋值允许指定默认值，但ES6内部使用严格相等运算符（===）来判断一个位置是否有值，即如果变量是严格等于undefined，默认值才生效（理解为变量没有被赋值才需要用到默认值）。

   
   //指定默认值
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
//默认值不生效
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null，因为null不严格等于undefined

如果默认值是一个表达式，那么这个表达式是惰性求值的，只有在用到的时候才会求值。

   
   function f() {
  console.log('aaa');
}
let [x = f()] = [1];//x为1，因为x能够取到值，函数f不会执行，即变量赋值严格等于undefined时，默认值才会生效

默认值可以引用解构赋值的其他变量，但是该变量必须已经声明。

   
   let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError，x赋值为undefined，默认值为y，但y没有声明，报错

2.对象的解构赋值

基本用法

与数组解构赋值不同的是，数组的元素是按次序排列的，对象的属性没有次序，变量必须与属性同名，才能取到正确的值，对象解构赋值的内部机制是，先找到同名属性，然后再赋值给对应的变量。

   
   let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
foo是匹配的模式，baz才是变量，被赋值的是变量

变量名和属性名一致时，可以简写：

   
   let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

对象的解构赋值的变量声明和赋值是一体的，let和const变量不允许重新声明。

   
   let foo;
let {foo} = {foo: 1}; // SyntaxError: Duplicate declaration "foo"
let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"
let foo;
({foo} = {foo: 1}); // 成功
let baz;
({bar: baz} = {bar: 1}); // 成功，圆括号必须有，解析器会将圆括号为首理解成代码块，而不是赋值语句

解构也可以用于嵌套解构的对象。

   
   let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true]

默认值

对象的解构也可以指定默认值，生效的条件是对象的属性值严格等于undefined
如果解构失败，变量的值等于undefined
如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，会报错

   
   var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
var {x:y = 3} = {};
y // 3
var {x:y = 3} = {x: 5};
y // 5
var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

// 报错，foo对应子对象，bar是子对象的属性，foo此时为undefined，取子属性就会报错
let {foo: {bar}} = {baz: 'baz'};
相当于let {foo: {bar: bar}} = {baz: 'baz'};

对象的解构赋值，可以将现有的方法，赋值到某个变量。

   
   let { log, sin, cos } = Math;

数组的本质是对象，可以对数组进行对象属性的解构。

   
   对数组进行对象解构，arr.length-1对应索引为2，所以值为3
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

3.字符串的解构赋值

字符串解构赋值时转换成了类数组的对象，类数组的对象都有length属性，还可以对length属性解构赋值。

   
   const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5

4.数值和布尔值的解构赋值

如果等号右边不是对象或数组，则会先转换成对象，

   
   let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true，
数值和布尔值的包装对象都有toString属性
包装对象是js中只要引用了字符串、数组、布尔值，就会将它们通过调用new String()的方法转换成对象，这个对象继承了字符串的方法，并被用来处理属性的引用，所以字符串能够使用length属性
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
undefined和null无法转为对象

5.函数参数的解构赋值

   
   //为x、y参数指定默认值
function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
//为函数move的参数指定默认值
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]