ES6的知识点我会都的分享在博客里面,今天总结一下解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
之前的赋值我们都是这样写的
1
2
3
| let a = 1;
let b = 2;
let c = 3;
|
但是当要声明的变量比较多的时候,这样赋值就显的代码很冗余了
数组的解构赋值
let [a, b, d] = [1, 2, 3];
let [a, [b,c], d] = [1, [2,3], 4];
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
如果等号两边形式不一样，很可能获得undefined或者直接报错。
解构的默认值
默认值也是很好理解的,直接上一个比较特殊的
1
2
3
| let [cs = 1] = [undefined]; // 1
let [cs = 1] = [null]; // null
|
解构赋值允许指定默认值。需要注意的地方在于,null不严格等于undefined。
对象的解构赋值
1
2
| let {c,s} = {c:'csing',s:'chensheng'};
console.log(c,s) // 'csing','chensheng'
|
对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
如果变量名与属性名不一致，必须写成下面这样。
1
2
3
4
5
6
7
8
| let { foo: baz } = { foo: 'aaa'};
console.log(baz) // 'aaa'
// 显而易见,我们之前使用对象解构赋值是简写的状态.举下面的这个例子
let { foo } = { foo: 'aaa'}; //简写
let { foo: foo } = { foo: 'aaa'};
|
也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
对象的解构嵌套
和数组一样，解构也可以用于嵌套结构的对象。
举一些由浅入深的例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
这里还是很好理解的,我们可以分开理解
let { p } = { p: ['Hello',{ y: 'World' }] }
所以输出p 为 ["Hello", {y: "World"}]
let { p: [x, { y }] } = { p: ['Hello',{ y: 'World' }] };
就等于 let [x, { y }] = ['Hello',{ y: 'World' }];
所以就很好理解 , x的输出为 "Hello" , y的输出为 "World"
|
再举一个难一点的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
loc // { start: {line: 1, column: 5} }
start // {line: 1, column: 5}
line // 1
// 我们一样可以分开理解
let { loc } = { loc: {start: {line: 1,column: 5}}}
let { loc: { start } } = { loc: {start: {line: 1,column: 5}}}
// 等同于
let { start } = { start: {line: 1,column: 5} }
// line我就不说了,方法都是一样的
|
有一个地方一定需要注意
如果在解构之前就定义了变量，这时候你再解构会出现问题。这时候只要在解构的语句外边加一个圆括号就可以了
1
2
| let x;
({x} ={x:'csing'});
|
因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。
字符串解构
1
2
3
4
5
6
| const [a,b,c,d,e,f]="csing";
console.log(a); //c
console.log(b); //s
console.log(c); //i
console.log(d); //n
console.log(e); //g
|
函数参数的解构赋值
1
2
3
4
5
| function add([x, y]){
return x + y;
}
add([1, 2]); // 3
|
经常用到的功能
交换变量的值
这个是我挺喜欢的一个功能
1
2
3
4
| let x = 1;
let y = 2;
[x, y] = [y, x];
|
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
从函数返回多个值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
|
提取 JSON 数据
1
2
3
4
5
6
7
8
9
10
| let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
|
输入模块的指定方法
这个也是经常用到的
const { SourceMapConsumer, SourceNode } = require("source-map");
以上就是我对ECMAScript 6解构赋值的一些理解，如果文章由于我学识浅薄，导致您发现有严重谬误的地方，请一定在评论中指出，我会在第一时间修正我的博文，以避免误人子弟。