ES6学习笔记4--解构赋值

  |  

前言

解构:更方便的数据访问

5



对象解构

在ES5及更早的版本,当我们需要从对象中获取信息,并将信息存入到本地变量时需要书写大量的重复代码。

因此ES6给对象添加了解构,使得当把数据结构分解成更小的部分时,从中提取需要的数据变得更加简单

对象结构语法在赋值语句左侧使用对象字面量,例

1
2
3
4
5
let node = {
type: "Identifier",
name: "foo"
}
let { type, name } = node;

注意:

当使用解构来配合var、let或const来声明变量时,必须提供初始化器(及等号右边的值)

解构赋值

之前的结构都是用于变量的声明,不过结构也可以用于赋值

1
2
3
4
5
6
7
let node = {
type: "Identifier",
name: "foo"
},
type = "Literal",
name = 5;
({ type, name} = node);

这里解构赋值语句要用圆括号包围,圆括号标识了里面的花括号并不是块语句而是应该被解释为表达式,从而允许完成赋值操作

解构赋值表达式的值为表达式右侧的值。也就是说任何期望有个值的位置都可以使用解构赋值表达式

1
2
3
4
5
6
7
8
9
10
let node = {
type: "Identifier",
name: "foo"
},
type = "Literal",
name = 5;
function outputInfo(value) {
console.log(value === node);
}
outputInfo({ type, name} = node);

注意:

当解构赋值表达式的右侧的计算结构为Null或undefined时,就会抛出错误

默认值

当使用解构赋值语句时,如果指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为undefined

1
2
3
4
5
6
let node = {
type: "Indefieral",
name: "foo"
};
let { type, name, value } = node;
console.log(value); //"undefined"

当然我们可以选择性的定义一个默认值,以便在指定属性不存在时使用该值

1
2
3
4
5
6
let node = {
type: "Indefieral",
name: "foo"
}
let { type, name, value = true} = node;
console.log(value) // "true"

赋值给不同的本地变量名

之前的解构都是基于本地变量名和对象属性名相同的情况下,那么如果本地变量名和对象属性名不想同时我们要如何进行解构。对此ES6提供了一个扩展语法,类似与使用对象字面量

1
2
3
4
5
6
let node = {
type: "Identifier",
name: "foo"
}
let { type: localType, name: localName } = node;
console.log(value);

这种语法其实与传统的对象字面量相反,传统语法将名称凡在冒号左边,值放右边。但是在本例中,名称在右边, 值在左边

同样的我们可以给变量别名来添加默认值

1
2
3
4
5
6
let node = {
type: "Identifier",
name: "foo"
};
let { type: localType, name: localName, value: localValue = "true" } = node;
console.log(localValue);

嵌套对象的解构

使用类似于嵌套对象字面量的方法,可以深入到嵌套的对象结构中去提取想要的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let node = {
type: "Indentifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
}
let {loc: {start: { line: localLine }}} = node;
console.log(localLine);

这里运用到了嵌套解构,其实只要掌握了解构与对象字面量语法的区别我们就可以轻易的解构嵌套了任意层次的对象,及解构的值在左侧名在右侧,而对象字面量的名在左侧,值在右侧

注意:

由于花括号在结构中是合法的,所以我们需要谨慎的使用花括号来构造解构语法,从而避免创建毫无意义的解构语句

数组解构

数组解构与对象解构大体来说是相同的,只是将对象字面量替换成了数组字面量。数组在解构时,解构直接作用在数组内部的位置上而不是作用在对象的具名属性上

1
2
3
let colors = [ "red", "blue", "green" ];
let [ firstColer, secondColor ] = colors;
console.log(firstColor); //"red"

被解构的值得选择根据值在数组中的位置决定,实际变量名是任意的(与位置无关)。任何没有在解构模式中明确指出的项会被忽略。

注意:

解构并不影响原数组的结构

可以选择性的忽略数组中的一些项,只给感兴趣的项提供变量名,不感兴趣的项可以使用逗号跳过

1
2
3
let colors = ["red", "blue", "green"];
let [ , , thirdColor] = colors;
console.log(thirdColor);

解构赋值

可以在赋值表达式中使用数组解构,但是与对象解构不同,不必将表达式包含在圆括号内

1
2
3
4
let colors = [ "red", "blue", "green"]
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors;

数组解构赋值还有一个独特的用法,就是互换两个变量。在ES5中,我们想要互换两个变量就需要引入第三个变量,但ES6可以用数组解构赋值轻易的互换两个变量

1
2
3
let a = 1,
b = 2;
[ a, b ] = [ b, a];

注意:

与对象解构赋值相同,若等号右侧的计算结果为null或undefined,那么数组解构赋值表达式就会抛出错误

默认值

数组解构同样允许在数组任意位置指定默认值,当指定位置的项不存在、或其值为undefined时,默认值就会被使用

1
2
let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors

嵌套解构

数组解构同样可以用来解构嵌套的数组。

1
2
let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
let [ firstColor, [ secondColor ] ] = colors;

剩余项

数组解构有个类似的、名为剩余项的概念,它使用...语法来将剩余的项目赋值给一个指定的变量

1
2
3
let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(restColors[1]); //"blue"

剩余项还有一个额外的用于,用于进行数组的克隆。

方便的克隆数组在JS中一直是一个被遗漏的功能。在ES5中,我们大多使用concat()方法

1
2
var colors = [ "red", "blue", "green" ];
var cloneColors = colors.concat();

尽管concat()方法的原用途是合并两个数组,但是当它的参数为空时,就会获得一个原数组的克隆。而在ES6中我们可以用剩余项完成同样的功能

1
2
let colors = [ "red", "blue", "green" ];
let [ ...cloneColors ] = colors

注意:

剩余项必须是数组解构模式中最后的部分,之后不能再有逗号,否则就是语法错误

混合解构

对象与数组解构能被一起使用,以创建更复杂的结构表达式。在对象与数组混合而成的结构中,这么做能提取其中准确的信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 3,
column: 4
}
},
range: [0, 3]
};
let {
loc: {start},
range: [startIndex]
} = node;
console.log(start.line); //"1"
console.log(startIndex); //0

参数解构

解构还有一个特别有用的场景,及JS函数接受大量参数时,通常创建一个options对象,其中包含附加参数,这是我们就可以用之前的结构方法来结构这个参数对象。

注意:

被解构的参数必须是必需参数,而不能是可选参数

文章目录
  1. 1. 对象解构
    1. 1.1. 解构赋值
    2. 1.2. 默认值
    3. 1.3. 赋值给不同的本地变量名
    4. 1.4. 嵌套对象的解构
  2. 2. 数组解构
    1. 2.1. 解构赋值
    2. 2.2. 默认值
    3. 2.3. 嵌套解构
    4. 2.4. 剩余项
  3. 3. 混合解构
  4. 4. 参数解构
|