es6-变量的解构赋值 - 前端笔记 JSRUN

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

head // 1 tail // [2, 3, 4]

2、let [x, y, ...z] = ['a'];

x // "a" y // undefined z // []

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

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

4、如果等号的右边不是数组，那么将会报错。

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

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

6、 yield function ge() { //声明时需要添加，普通函数内部不能使用yield关键字，否则会出错 yield '1'; yield '2'; yield '3'; return '4'; }

var a = ge(); //调用函数后不会运行，而是返回指向函数内部状态的指针

a.next(); // { value: '1', done: false } 遇到yield暂停

a.next(); // { value: '2', done: false }

a.next(); // { value: '3', done: false }

a.next(); // { value: '4', done: true} 函数执行完毕，返回done

a.next(); // { value: undefined, done: true} 已经执行完毕，返回undefined

7、for..of

function* ge() { 
  yield '1';
  yield '2';
  yield '3';
  return '4';
}
for(let v of ge()){
  alert(V);    // 1 2 3 4
}

8、解构赋值允许指定默认值。

9、注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

let [x = 1] = [undefined]; x // 1

let [x = 1] = [null]; x // null

上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。 let [x = 1, y = x] = [2]; // x=2; y=2

10、解构不仅可以用于数组，还可以用于对象。

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world

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

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

let foo;
({foo} = {foo: 1}); // 成功

let baz;
({bar: baz} = {bar: 1}); // 成功

上面代码中，let命令下面一行的圆括号是必须的，否则会报错。因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句。

12、如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

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

上面代码中，等号左边对象的foo属性，对应一个子对象。该子对象的bar属性，解构时会报错。原因很简单，因为foo这时等于undefined，再取子属性就会报错，请看下面的代码。

13、代码的写法会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

14、代码对数组进行对象解构。数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3。方括号这种写法，属于“属性名表达式”

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

15、类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

16、解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

17、下面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值。

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]

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

18、用途（1）、交换变量值（2）、从函数返回多个值（3）、函数参数的定义（4）、提取json数据（5）、函数参数的默认值（6）、遍历Map结构

var 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

（7）、加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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