es6-变量的解构赋值

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");
es6学习笔记
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。