ES6 数组的解构赋值

目录

一、定义

二、详情讲解

1、数组解构：数组解构时数组的元素是按次序排列的，变量的取值由它的位置决定

2、对象解构:对象解构时对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

三、用途

1、交换变量的值

2、从函数返回多个值

3、函数参数的定义

4、提取 JSON 数据

5、遍历 Map 结构

一、定义

ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，被称为解构

二、详情讲解

1、数组解构：数组解构时数组的元素是按次序排列的，变量的取值由它的位置决定

模式匹配：只要等号两边的模式相同，左边的变量就会被赋予对应的值

（1）正常解构

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

let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo, bar, baz) // 1 2 3

let [ , , third] = ["foo", "bar", "baz"];
console.log(third) // baz

let [x, , y] = [1, 2, 3];
console.log(x, y) // 1 3

let [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail) // 1 [2,3,4]

（2）解构不成功(如果解构不成功，变量的值就等于undefined)

let [x, y, ...z] = ['a'];
console.log(x,y,z) // a undefined []

let [foo1] = [];
console.log(foo1) // undefined

（3）不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [x11, y11] = [1, 2, 3];
console.log(x11,y11) // 1 2

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

2、对象解构:对象解构时对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

（1）左边变量只有key的形式，其实是key和value是一样的，而简写的

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
console.log(foo, bar) // aaa bbb

这里需要再强调一点，数组是有次序的，数组中变量次序位置决定这它的值，但是对象是没有次序的，上面的标题中也说了，对象的属性没有次序，就比如上面的那个例子，换一下位置，输出的结果也是一样的，因为对象的值是左边的变量必须与右边对象中的属性同名才得到的

let { bar , foo} = { foo: 'aaa', bar: 'bbb' };
console.log(foo, bar) // aaa bbb

和数组一样，对象的解构失败也是输出undefined

let {foo} = {bar: 'baz'};
foo // undefined

（2）左边变量key:value的形式

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz) // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
console.log(f) // 'hello'
console.log(l) // world

(3)其实上面两种情况，一种是简写，一种不是，真实的情况就是

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz) //aaa
console.log(foo) //foo is not defined

(4)对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

// 例一
let { log, sin, cos } = Math;
console.log(log(10)) // 2.302585092994046

// 例二
const { log } = console;
log('hello') // hello

三、用途

1、交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y) // 1 2

2、从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
console.log(a,b,c) // 1 2 3

function example1() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example1();
console.log(foo, bar) // 1 2

3、函数参数的定义

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

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

4、提取 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]

5、遍历 Map 结构

任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

6、输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。其实就和上面的那个math函数和console是一样的

const { SourceMapConsumer, SourceNode } = require("source-map");

借鉴出处：阮一峰老师的ES6 入门教程

这篇博客我只是写出来我觉得比较重要的部分，想看全部的内容，建议还是去阮一峰老师的文档