ES6-变量解构赋值

基本用法

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

凡是右边数据是有迭代器接口的数据,就都可以解构,常见的有迭代器接口的数据就是数组。 如果右边数据不是具有迭代器接口的数据,那就不能解构,会报错。 解构的顺序是从左到右,上面例子就是先解构第一个元素,赋值给第一个变量,然后向右进行。

复杂用法

解构赋值本质是模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值,如果不匹配,则只有匹配的几个变量会被赋值,其他变量默认为undefined。

1
2
3
4
5
6
7
8
9
10
11
12
let [a, [[b], c]] = [1, [[2], 3]];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3


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


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

轮不到赋值的变量,值为undefined:

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

剩余符号的用法: 剩余符号就是...,也就是三个点,表示剩下的我全包了。只允许用在最后一个变量的身前。

1
2
3
4
let [a, ...b] = [1, 2, 3, 4, 5];
console.log(b); // [2, 3, 4, 5]
let [a, ...b, c] = [1, 2, 3, 4, 5];
console.log(b); // Uncaught SyntaxError: Rest element must be last element

如果剩余变量轮不到赋值,默认值不是undefined,而是空数组:

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

模式差别会导致报错

所谓模式,可以简单理解为,数组符号[]和对象符号{}组成的架构,必须是左右匹配的,元素可以多一点少一点没关系,顶多是undefined,但是模式不匹配,会直接报错。 看下面栗子,尽管给a赋值1看起来是天经地义的,但是模式不同,所以js报错。可见,模式匹配是必须的:

1
2
3
4
5
6
7
let [a, [b,c]] = [1,2,3];
a; // Uncaught TypeError: undefined is not a function


let [a, [b,c]] = [1,[]];
a; // 1
b; // undefined 因为匹配不上值没关系,至少模式没错,所以不会报错

给变量指定默认值

  1. 如果轮不到赋值,则默认值生效:

    1
    2
    let [a,b = 3] = [1];
    console.log(b); // 3
  2. 如果轮到赋值,但赋给的是undefined,则默认值生效:

    1
    2
    let [x, y = '3'] = ['1', undefined];
    console.log(y); // 3
  3. 如果默认值是表达式,那么只有它真的会被赋值,js才会去计算这个表达式,如果它没有被赋值,那么js为了系统性能考虑,不会去计算这个表达式。

  4. 如果默认值是其他变量,那么要注意这个变量是否已经存在。比如:

    1
    let [x = y, y = 1] = [];     // ReferenceError: y is not defined

给x赋值的时候,y还不存在,当然报错。

对象的解构赋值

基本用法

属性名匹配成功,就赋值,不成功就不赋值。不赋值默认也是undefined。

1
2
3
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

复杂用法

跟数组解构差不多,但是对象的解构赋值没有剩余符号的这一说。

引用不匹配的属性值

比如我的变量名跟对象的属性名恰好不一致,但确实希望变量得到该属性值,怎么办?就像这样,写成a:c,c是你写的变量名,a:c表示:虽然我变量名不叫a而是叫c,但是我希望c得到a属性的值。

1
2
let { a: c } = { a: 'aaa', b: 'bbb' };
c // "aaa"

深度赋值

1
2
3
4
5
6
let { b: {c} } = { b: {c: 'ccc'} };
console.log(c); // ccc


let { b: {c: d} } = { b: {c: 'ccc'} };
console.log(d); // ccc

看出端倪了么?其实, let { a, b } = { a: "aaa", b: "bbb" } 就可以理解为: let { a: a, b: b } = { a: "aaa", b: "bbb" } 然后对应赋值就可以了,冒号后面才是变量名,冒号前面就是“线索”,按照线索找值就行了。

对象解构赋值跟数组解构赋值的鲜明对比:

1
2
3
let { b, b: {c: d} } = { b: {c: 'ccc'} };
console.log(d); // ccc
console.log(b); // {c: "ccc"}

对象解构赋值,不像数组解构赋值那样排排队,然后挨个赋值,而是每次都根据“线索”找值,能找到就找到,找不到就undefined。

数组和对象混合嵌套赋值

无论怎么混合嵌套,只需要知道,模式匹配就行。模式匹配最重要!!

1
2
3
4
5
6
7
8
9
let [a, { b: c }] = ['aaa', { b: 'bbb' }];
console.log(c); // bbb
console.log(a); // aaa


let { b,b: {c: [d, e]} } = { b: {c: ['ddd', 'eee']} };
console.log(b); // {c: ['ddd', 'eee']}
console.log(d); // ddd
console.log(e); // eee

提醒注意,并没有定义一个叫c的变量,试图输出c肯定会出错。

默认值

也是用赋值号=赋值,跟数组一样道理。

大括号写在行首的陷阱

1
2
3
let x;
{x} = {x: 1};
// SyntaxError: syntax error

上栗,你以为能给x赋值1,但是其实不行,因为大括号写在行首,被js认为是代码块,而不是赋值的语法符号,所以,要么大括号别写在行首,要么,整体包在括号里:

1
2
3
let x;
({x} = {x: 1});
x; // 1

把数组当对象解构

数组也是有下标的,当然可以当做对象结构:

1
2
let {0: x, 2: z} = ['a', 'b', 'c'];
console.log(x,z); // a c

字符串的解构赋值

很简单,字符串可以被拆开当做数组来解构。

1
2
3
4
5
6
let [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

由于类似数组的对象都天然有一个length属性,因此还可以对这个属性解构赋值。

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

数值和布尔值的解构赋值

数值、布尔值不像字符串能拆成数组来解构,没讨论意义。

函数参数的解构赋值

这个用处就很大了,甚至可以说是解决了之前js世界的函数参数的天生缺陷。 什么缺陷呢?js之前只能这么传参,这种传参的缺陷是,你需要传5个参数,往往这5个参数来自于一个数组,于是你必须事先把这个数组拆开成5个变量,然后分别传进去:

1
2
3
4
function f(a,b,c,d,e) {
return a + b + c + d + e;
}
f(19, 19, 19, 19, 19); // 95

如果你强行想要一次性传入一个数组[19,19,19,19,19],那就有点小麻烦,只能这样,这样的缺陷就是用下标表示变量,不够直观:

1
2
3
4
function f(arr) {
return arr[0] + arr[1] + arr[2] + arr[3] + arr[4];
}
f([19, 19, 19, 19, 19]); // 95

现在ES6之后,你就可以传入一个数组作为一套参数,js帮你自动解构:

1
2
3
4
function f([a,b,c,d,e]) {
return a + b + c + d + e;
}
f([19, 19, 19, 19, 19]); // 95

默认值

函数参数也可以有默认值,都是一样的。数组元素可以空着,也可以写undefined,但不能写null,null被认为是有值。

1
2
3
4
function f([a,b,c = 100,d,e]) {
return a + b + c + d + e;
}
f([1, 1, , 1, 1]); // 104

变量解构赋值的优点汇总

变量解构赋值其实在其他语言都早已实现,只是ES实现的太晚了,它的优点有很多,比如:

  1. 赋值语句干净,简短,直观。

  2. 交换变量的值的最佳方法:

    1
    2
    3
    4
    let x = 1;
    let y = 2;

    [x, y] = [y, x];
  3. 对数组和对象快速取值,这是实践中最常用的用途,尤其是从服务器传来的JSON,结构可能相当复杂,从前你要写多行语句来获取其中的每一个属性,现在就简单的一逼了。 比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
var json_from_server = [
{
name: 'zhang',
age: 16
},
{
name: 'wang',
age: 23
},
];

var [{name: a, age:b}, {name:c, age: d}] = json_from_server;
console.log(a,b,c,d); // zhang 16 wang 23

如果不用结构赋值,要怎么写呢?如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var json_from_server = [
{
name: 'zhang',
age: 16
},
{
name: 'wang',
age: 23
},
];

var a = json_from_server[0]['name'];
var b = json_from_server[0]['age'];
var c = json_from_server[1]['name'];
var d = json_from_server[1]['age'];
console.log(a,b,c,d); // zhang 16 wang 23
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~