概念

 

ES6提供了更简洁的赋值模式，从数组和对象中提取值，这被称为解构

 

示例：

 

[a, b] = [50, 100];

 

console.log（a）;

 

// expected output: 50

 

console.log（b）;

 

// expected output: 100

 

[a, b, …rest] = [10, 20, 30, 40, 50];

 

console.log（rest）;

 

// expected output: [30, 40, 50]

 

数组解构

 

数组解构是非常简单简洁的，在赋值表达式的左侧使用数组字面量，数组字面量中的每个变量名称映射为解构数组的相同索引项

 

这是什么意思呢，就是如下面这个示例一样，左边数组中的项分别得到了右侧解构数组相应索引的值

 

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

 

// a = 1

 

// b = 2

 

// c = 3

 

声明分别赋值

 

你可以通过变量声明分别解构赋值

 

示例：声明变量，分别赋值

 

// 声明变量

 

let a, b;

 

// 然后分别赋值

 

[a, b] = [1, 2];

 

console.log（a）; // 1

 

console.log（b）; // 2

 

解构默认值

 

如果解构取出的值是undefined，可以设置默认值：

 

let a, b;

 

// 设置默认值

 

[a = 5, b = 7] = [1];

 

console.log（a）; // 1

 

console.log（b）; // 7

 

在上面的例子中，我们给a和b均设置了默认值

 

这种情况下，如果a或b的值是undefined，它将把设置的默认值赋给相应变量（5赋给a，7赋给b）

 

交换变量值

 

以往我们进行两个变量的交换，都是使用

 

//交换ab

 

c = a;

 

a = b;

 

b = c;

 

或者异或的方法

 

然而在解构赋值中，我们可以在一个解构表达式中交换两个变量值

 

let a = 1;

 

let b = 3;

 

//交换a和b的值

 

[a, b] = [b, a];

 

console.log（a）; // 3

 

console.log（b）; // 1

 

解构函数返回的数组

 

我们可以直接解构一个返回值为数组的函数

 

function c（） {

 

  return [10, 20];

 

}

 

let a, b;

 

[a, b] = c（）;

 

console.log（a）; // 10

 

console.log（b）; // 20

 

在上面的例子中，**c（）**的返回值[10，20]可以在单独的同一行代码中使用解构

 

忽略返回值（或跳过某一项）

 

你可以有选择性的跳过一些不想得到的返回值

 

function c（） {

 

  return [1, 2, 3];

 

}

 

let [a, , b] = c（）;

 

console.log（a）; // 1

 

console.log（b）; // 3

 

赋值数组剩余值给一个变量

 

当你使用数组解构时，你可以把赋值数组剩余的部分全部赋给一个变量

 

let [a, …b] = [1, 2, 3];

 

console.log（a）; // 1

 

console.log（b）; // [2, 3]

 

这样的话b也会变成一个数组了，数组中的项是剩余的所有项

 

注意：

 

这里要小心结尾是不能再写逗号的，如果多了一个逗号将会报错

 

let [a, …b,] = [1, 2, 3];

 

// SyntaxError: rest element may not have a trailing comma

 

嵌套数组解构

 

像对象一样，数组也可以进行嵌套解构

 

示例：

 

const color = ['#FF00FF', [255, 0, 255], 'rgb（255, 0, 255）'];

 

// Use nested destructuring to assign red, green and blue

 

// 使用嵌套解构赋值 red, green, blue

 

const [hex, [red, green, blue]] = color;

 

console.log（hex, red, green, blue）; // #FF00FF 255 0 255

 

字符串解构

 

在数组解构中，解构的目标若为可遍历对象，皆可进行解构赋值，可遍历对象即实现Iterator接口的数据

 

let [a, b, c, d, e] = 'hello';

 

/*

 

a = 'h'

 

b = 'e'

 

c = 'l'

 

d = 'l'

 

e = 'o'

 

*/

 

对象解构

 

基础对象解构

 

let x = { y: 22, z: true };

 

let { y, z } = x; // let {y:y,z:z} = x;的简写

 

console.log（y）; // 22

 

console.log（z）; // true

 

赋值给新变量名

 

当使用对象解构时可以改变变量的名称

 

let o = { p: 22, q: true };

 

let { p: foo, q: bar } = o;

 

console.log（foo）; // 22

 

console.log（bar）; // true

 

如上代码var {p: foo} = o 获取对象 o 的属性名 p，然后赋值给一个名称为 foo 的变量

 

解构默认值

 

如果解构取出的对象值是undefined，我们可以设置默认值

 

let { a = 10, b = 5 } = { a: 3 };

 

console.log（a）; // 3

 

console.log（b）; // 5

 

赋值给新对象名的同时提供默认值

 

前面提到过我们赋值给新的对象名，这里我们可以给这个新的对象名提供一个默认值，如果没有解构它，就会自动使用默认值

 

let { a: aa = 10, b: bb = 5 } = { a: 3 };

 

console.log（aa）; // 3

 

console.log（bb）; // 5

 

同时使用数组和对象解构

 

在结构中数组和对象可以一起使用

 

const props = [

 

  { id: 1, name: 'Fizz' },

 

  { id: 2, name: 'Buzz' },

 

  { id: 3, name: 'FizzBuzz' },

 

];

 

const [, , { name }] = props;

 

console.log（name）; // "FizzBuzz"

 

不完全解构

 

let obj = {p: [{y: 'world'}] };

 

let {p: [{ y }, x ] } = obj;//不解构x

 

// x = undefined

 

// y = 'world'

 

赋值剩余值给一个对象

 

let {a, b, …rest} = {a: 10, b: 20, c: 30, d: 40};

 

// a = 10

 

// b = 20

 

// rest = {c: 30, d: 40}

 

嵌套对象解构（可忽略解构）

 

let obj = {p: ['hello', {y: 'world'}] };

 

let {p: [x, { y }] } = obj;

 

// x = 'hello'

 

// y = 'world'

 

let obj = {p: ['hello', {y: 'world'}] };

 

let {p: [x, {  }] } = obj;//忽略y

 

// x = 'hello'

 

注意事项

 

小心使用已声明变量进行解构

 

错误示范：

 

let x;

 

{x} = {x: 1};

 

JavaScript引擎会将{x}理解为一个代码块，从而产生语法错误，我们要避免将大括号写在行首，避免JavaScript将其解释为代码块

 

正确写法：

 

let x;

 

（{x} = {x: 1}）;

 

1

 

2

 

正确写法将整个解构赋值语句放在一个圆括号里，就可以正确执行了

 

函数参数的解构赋值

 

函数的参数也可以使用解构赋值

 

function add（[x, y]） {

 

return x + y;

 

}

 

add（[1, 2]）;

 

上面代码中，函数add的参数表面上是一个数组，但在传参的时候，数组参数就被解构为变量x和y了，对于函数内部来说，就和直接传入x和y是一样的

 

解构的用途

 

解构赋值的用法很多

 

交换变量的值

 

let x = 1;

 

let y = 2;

 

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

 

上面的代码交换x和y的值，这样的写法不仅简洁而且易读，语义清晰

 

从函数返回多个值

 

函数只能返回一个值，如果要返回多个值，我们只能将这些值放置数组或对象里返回，当我们有了解构赋值后，从对象或数组里取出这些值犹如探囊取物

 

// 返回一个数组

 

function example（） {

 

  return [1, 2, 3];

 

}

 

let [a, b, c] = example（）;

 

// 返回一个对象

 

function example（） {

 

  return {

 

    foo: 1,

 

    bar: 2

 

  };

 

}

 

let { foo, bar } = example（）;

 

提取JSON数据

 

解构赋值对于提取JSON对象中的数据，尤其有用

 

示例：

 

let jsonData = {

 

  id: 42,

 

  status: "OK",

 

  data: [867, 5309]

 

};

 

let { id, status, data: number } = jsonData;

 

console.log（id, status, number）;

 

// 42, "OK", [867, 5309]

 

使用上面的代码，我们就可以快速取出JSON数据中的值