你的位置:首页 > Java教程

[Java教程]ES6笔记(3)


系列文章 -- ES6笔记系列

 

解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组、对象、字符串的解构赋值等

一、数组的解构赋值

function ids() {  return [1, 2, 3];} var [id1, id2, id3] = ids();console.log(id1, id2, id3); // 1 2 3

如上,解析返回的数组,取出值并赋给相应的变量,这就是解构赋值

1. 还可以嵌套多层,只要相应的模式匹配了就能解析出来

var [a, [b, [c]]] = [1, [2, [3]]];a // 1b // 2c // 3

2. 如若模式不匹配则报错

var [a, [b, [c]]] = [1, [2, 3]]; // Uncaught TypeError: undefined is not a functiona 

其实,解构赋值内部的实现方式使用到了ES6的Iterator迭代器,通过层层遍历,保证了相应值的获取

3. 解构不成功,但模式匹配了,相应值为undefined

var [a, b] = [1];a // 1b // undefined

4. 不需要匹配的位置可以置空

var [, b] = [1, 2];b // 2

5. 使用...这个扩展运算符,匹配余下的所以值,形成一个数组(匹配不上则为[]),这个符号内部也用到了迭代器Iterator

var [a, ...b] = [1, 2, 3];a // 1b // [2, 3]var [a, ...b] = [1];a // 1b // []

6. 可以设置默认值,当相应的值严格等于undefined时,默认值会生效

var [a, b = [2, 3]] = [1];a // 1b // [2, 3]

var [a, b = [2, 3]] = [1, undefined];a // 1b // [2, 3]

var [a, b = [2, 3]] = [1, null];a // 1b // null

7. 惰性求值,对于默认值中出现函数调用模式的,只有默认值生效,函数才会调用,如下,foo函数将不会被调用

function foo() {  console.log('hit');}var [str = foo()] = [1];str // 1

8. 可以方便的进行变量值的交换

var x = 1,  y = 2;  [x, y] = [y, x];x // 2y // 1

 

二、对象的解构赋值

与数组类似,对象也可以进行解构赋值

var {name, agee} = {  name: 'jack',  age: 22,
};name // jackagee // undefined

如上,对象的解构赋值要求属性名称匹配正确,agee不匹配则变成undefined

1. 不过我们可以自定义属性名称,但要注意的是被赋值的只是我们自定义的属性名称,匹配的模式(项)并未被赋值

var {name, id: ID} = {  name: 'jack',  id: 1};ID // 1id // Uncaught ReferenceError: id is not defined

更复杂的如

var {  a0: {    b0: {      c0    }  }} = {  a0: {    b0: {      c0: 'cc',      d0: 'dd'    }  }};a0 // Uncaught ReferenceError: a0 is not definedb0 // Uncaught ReferenceError: b0 is not definedc0 // cc

2. 类似于数组,也可使用默认值

var {a:b = 2} = {};b // 2var {a:b = 2} = {  a: 1};b // 1

3. 因为数组实际上也是个对象,所以

var {0: one, 1: two} = [1, 2];two // 2

4. 可以方便地将某个对象上的属性方法一次性提取出来

var {map, slice} = Array.prototype;slice //

const {foo, bar} = require('./util');

5. 非声明时的解构赋值

非声明时,这里是指纯粹的解构赋值,如下代码

var a;{a} = {  a: 1}; // Uncaught SyntaxError: Unexpected token =a 

以上代码报错了,但某些情况下我们还是需要直接赋值怎么办?

大括号{位于行首,匹配了}之后JS引擎就会认为{a}是一个代码块,所以等号就出问题了,解决方式是在行首放个括号(,即外包裹一层括号()

var a;({a} = {  a: 1}); a // 1

括号的出现,让整个解构赋值的结构被看做一个代码块,而内部的{a}模式则可以正常匹配到

细心的盆友会注意到,右括号换个位置,报错了

var a;({a}) = {  a: 1}; // Uncaught SyntaxError: Unexpected token (a 

6. 其实,解构赋值中括号的使用还是有讲究的

1) 不能使用括号的情况

 1-1)变量声明语句中,不能带有括号

// 以下代码都会报错var [(a)] = [1];var {x: (c)} = {};var ({x: c}) = {};var {(x: c)} = {};var {(x): c} = {};var { o: ({ p: p }) } = { o: { p: 2 } };

 1-2)函数参数中,模式不能带有括号

// 报错function f([(z)]) {   return z;}f([1])

 1-3)赋值语句中,不能将整个模式,或嵌套模式中的一层,放在括号之中

var a;({a}) = {  a: 1}; // Uncaught SyntaxError: Unexpected token (a 

2)可以使用括号的情况

可以使用括号的情况很好记,只有一种:赋值语句的非模式部分,可以使用括号

// 都正确[(b)] = [3]; ({ p: (d) } = {}); [(b)] = ([3]); 

 

三、字符串的解构赋值

字符串也可进行解构赋值,因为此时的字符串被转换成了类数组的对象,模式能够匹配起来,如

var [a, b] = 'str';a // sb // tvar {0:a, 1:b, length:len} = 'str';a // sb // tlen // 3

四、其他类型的解构赋值

1. 解构赋值的规则是,只要等号右边的值不是对象,就先尝试将其转为对象。如果转换之后的对象或原对象拥有Iterator接口,则可以进行解构赋值,否则会报错。

var {toString: s} = 1;s //var {toString: s} = true;s //

以上的数组和布尔值会转换成对象,toString模式匹配上了对象的toString属性,所以解构成功,而null或undefined却不能转换成此类对象,所以报错

var {toString: s} = null;s // Uncaught TypeError: Cannot match against 'undefined' or 'null'.

ES6引入了Iterator迭代器,集合Set或Generator生成器函数等都部署了这个Iterator接口,所以也可以用来进行解构赋值

2. 比如Set的解构赋值

var [a, b, c] = new Set([1, 2, 3]);a // 1b // 2c // 3

3. 函数参数的解构赋值

function calc([a, b, c = 10]) {  console.log(a + b + c); // 13}calc([1, 2]);