ES6中解构赋值深入解读

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

1.数组的解构赋值

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

不完全解构

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

对于 Set 结构，也可以使用数组的解构赋值

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

ES6提供了新的数据结构Set，类似于数组，但是不是数组！而是伪数组！
我们可以通过Array.form将它转换成数组
Setl里面没有重复的元素！
在Set里面相当于做了精确相等运算符===
但是两者有一个细节的地方不同，就是"==="默认NaN不等于自身
而Set进行数据处理的时候，默认NaN等于自身
Set进行判断时，两个对象总是不相等的

2.对象的解构赋值

对象的结构赋值和数组的解构赋值有所不同，数组是按元素顺序来的，而对象必须变量和属性同名，否则没办法解构

let { a, b } = { b: '我是b', a: '我是a' };
b //  '我是b'
a // '我是a'

在控制台打印一下window对象来测试一下对象的解构赋值：

3.字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

4.实际的应用场景

1.交换值

  let a =3 ; 
  let b = 4; 
  [a,b] = [b,a];
  console.info(a,b)//4 3

2.拿到导入模块的指定方法

import { SourceMapConsumer, SourceNode }  from  "source"

3.从函数返回多个值

/ 返回一个数组

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

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();