解构赋值

 

数组的解构赋值

按照一定模式从数组和对象中提取值，然后对变量进行赋值，该操作即为解构（Destructuring）

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

举例：

 

如果解构不成功，变量的值就等于undefined

若赋值不是数组则会报错

默认值

如果默认值是一个表达式，会采用惰性求值，只有在用到时才会求值

默认值可以引用解构赋值的其他变量，但该变量必须已经声明，否则会报错

对象的解构赋值

与数组不同数组的元素是按次序排列的，变量的取值是由它的位置决定

对象的属性没有次序，变量必须与属性同名才能取到正确的值

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

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

•如果变量名与属性名不一致，必须明确对应关系

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

let {foo: baz} = {foo:'aaa', bar:'bbb'};

对象解构赋值内部机制是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者。

对象解构赋值也指定默认值，且默认值生效条件是对象的属性严格等于undefined

var { x = 3 } = {};

var { x, y = 5 } = { x: 1 };

var { x: y = 5 } = {};

var { x: y = 3 } = { x: 5 };

如果解构失败，变量的值等于undefined

let { foo } = { bar: 'bbb' };

如果解构模式是嵌套的对象，且子对象所在父属性存在，将会报错

let { foo: { bar } } = { baz: 'bbb' };

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构

let arr = [1, 2, 3];

let { 0: first, [arr.length - 1]: last } = arr;

其他类型的解构赋值

字符串

字符串的解构赋值，将字符串看作一个类似于数组的对象

const [a, b, c, d] = 'hello';

类似数组的对象都有一个length属性，因此还可以对这个属性进行解构

let { length: len } = 'hello';

数值和布尔值

解构赋值的原则是，如果等号右边不是对象，则先转换为对象

let { toString: s } = 123;

console.log(s.call(100));

//s===Number.prototype.toString为true

如果等号右边无法转换为对象，则会报错，如null和undefined

函数参数

函数调用时，会将实参传递给形参，其过程就是实参赋值给形参。因此，也可以使用解构赋值

其规则与数组、对象的解构赋值一致，关键看参数是采用哪种解构赋值方式

 

function add([x, y = 10]) {

  return x + y;

}

let r = add([1]);

 

function add({ x, y = 10 }) {

  return x + y;

}

let r = add({ x: 20 });

解构赋值的用途

交换变量的值

let x = 1, y = 3;

[x, y] = [y, x];

从函数返回多个值

function func() {

  return [1, 2, 3];

}

let [a, b, c] = func();

function func() {

return {

foo: 1,

bar: 2

};

}

let { foo, bar } = func();

函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来

function f([x, y, z]) {

  //一组有序参数

}

f([1, 2, 3]);

function f({ x, y, z }) {

  //一组无序参数

}

f({ z: 3, x: 1, y: 2 });

提取JSON数据

const json = '{"id": 42,"status": "OK","d": [867, 5309]}';

let data = JSON.parse(json);

let { id, status, d: numbers } = data;

console.log(id, status, numbers);