平凡前端之路_16.变量的解构赋值

系列文章

平凡前端之路_01.HTML与 HTML5
平凡前端之路_05.CSS与CSS3
平凡前端之路_14.ES与ES6
平凡前端之路_15.let 和 const声明
平凡前端之路_16.变量的解构赋值
平凡前端之路_17.展开操作符(Spread)/剩余参数(Rest)

---

---

解构赋值

解构赋值是对赋值运算符的扩展。

是一种以数组或对象模式进行匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了，方便了复杂数组/对象中数据字段获取。

---

解构模型

在解构中，有下面两部分参与：

解构的源，解构赋值表达式的右边部分。

解构的目标，解构赋值表达式的左边部分。

---

提示：以下是本篇文章正文内容，下面案例可供参考

数组模型的解构

在解构赋值表达式的左侧使用数组模型模式变量，每个变量名称映射为解构数组相应索引项

基本赋值

对数组进行基本解构赋值，代码如下（示例）：

let [a, b, c] = ['来都来了', '都不容易', '大过年的']
 a //=> '来都来了'	
 b //=> '都不容易'	 
 c //=> '大过年的'

let x, y, z;
[ x, y, z] = ['朋友一场', '给个面子', '为了你好']
 x //=> '朋友一场'	
 y //=> '给个面子'	 
 z //=> '为了你好'
1
2
3
4
5
6
7
8
9
10

---

不完全解构

可以有选择性的忽略一项或多项进行不完全解构，代码如下（示例）：

let [a, , b] = ['来都来了','都不容易','大过年的']
a //=> '来都来了'
b //=> '大过年的'
1
2
3

---

解构默认值

进行解构时，当模式匹配结果为 undefined，会将设置的默认值作为结果进行赋值，代码如下（示例）：

let [a = '来都来了'] = [undefined]
a //=> '来都来了'

let [i = '都不容易', j = i] = []
i //=> '都不容易'
j //=> '都不容易'

let [o = '大过年的', p = o] = ['为了你好'] 
o //=> '为了你好'
p //=> '为了你好'

let [x = '给个面子', y = x, z] = ['才刚毕业', , '还是孩子'] 
x //=> '才刚毕业'
y //=> '才刚毕业'
z //=> '还是孩子'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

解构剩余项

进行解构时，可以将数组剩余部分赋值给一个变量，代码如下（示例）：

let [a, ...b] = ['来都来了','都不容易','大过年的']
a //=> '来都来了'
b //=> ['都不容易','大过年的']
1
2
3

---

嵌套解构

可以对多层嵌套的数组进行解构，代码如下（示例）：

let [a, [[b], c]] = ['朋友一场', [['给个面子'], '为了你好']];
a //=> '朋友一场'
b //=> '给个面子'
c //=> '为了你好'
1
2
3
4

---

解构字符串，数据结构Set/Map

在数组模型的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据结构。代码如下（示例）：

let [a, b, c, d] = '还是孩子';
a //=> '还'
b //=> '是'
c //=> '孩'
d //=> '子'

let [a, b, c] = new Set( ['来都来了', '都不容易', '大过年的'])
a //=> '来都来了'	
b //=> '都不容易'	 
c //=> '大过年的'
 
let [x, y] = new Map([['a','都不容易'],['b','来都来了']])
x //=> ['a', '都不容易']
y //=> ['b', '来都来了']
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

入参解构

可以在函数声明中，对函数参数进行解构，代码如下（示例）：

function sum([x, y]) {
	return x + y;
}
let s = sum([1, 2]);	
s //=> 3, 即 x为1，y为2
1
2
3
4
5

---

循环解构

可以在循环结构中，对循环对象进行解构，代码如下（示例）：

let map = new Map()
map.set('a', '来都来了')
map.set('b', '都不容易')
for(let [key, value] of map){
	console.log(`${key}: ${value}`)
}
// a: '来都来了'
// b: '都不容易'
1
2
3
4
5
6
7
8

---

交换赋值

可以不使用临时变量，交换变量的值，代码如下（示例）：

let x = '大过年的';
let y = '还是孩子';
[x, y] = [y, x]
 x //=> '还是孩子' 
 y //=> '大过年的'
1
2
3
4
5

---

对象模型的解构

在解构赋值表达式的左侧使用对象模型模式变量，每个变量名称映射为解构对象的相同属性。

---

基本赋值

对对象进行基本解构赋值，代码如下（示例）：

let { x, y} = { x: '为了你好', y: '吃亏是福' };
x //=> '为了你好'
y //=> '吃亏是福'

let a, b;
({ a, b} = { b: '才刚毕业', a: '还是孩子' });
a //=> '还是孩子'
b //=> '才刚毕业'
1
2
3
4
5
6
7
8

---

解构赋予别名

进行解构时，可以为某些映射了属性的模式变量指定别名，以便更好的描述变量的含义和作用，代码如下（示例）：

let { a: b} = { a: '朋友一场' };
a //=> a is not defined
b //=> '朋友一场'
1
2
3

---

不完全解构

可以有选择性的忽略一项或多项进行不完全解构，代码如下（示例）：

let { x} = { x: '为了你好', y: '吃亏是福' };
x //=> '为了你好'
1
2

---

解构默认值

当模式匹配结果是 undefined 时，会将设置的默认值作为结果进行赋值，代码如下（示例）：

let {a= '才刚毕业', b= '还是孩子', c= '朋友一场', d= '为了你好'} = {a: '都不容易', c: '', d: null}
a //=> '都不容易'
b //=> '还是孩子'
c //=> ''
d //=> null

// 结合赋予别名
let {a: aa = '才刚毕业', b: bb = '还是孩子'} = {a: '都不容易'};
// aa = '都不容易'; bb = '还是孩子';
1
2
3
4
5
6
7
8
9

---

解构剩余项

进行解构时，可以将对象剩余部分赋值给一个变量，代码如下（示例）：

let {a, b, ...rest} = {a: '来都来了', b: '大过年的', c: '都不容易', d: '为了你好'};
a //=> '来都来了'
b //=> '大过年的'
rest //=> { c: '都不容易', d: '为了你好'}
1
2
3
4

---

嵌套解构

可以对多层嵌套的对象进行解构，代码如下（示例）：

let excuse= {p: ['才刚毕业', {y: '还是孩子'}] };
let {p: [x, { y }] } = excuse;
// x = '才刚毕业'
// y = '还是孩子'
1
2
3
4

---

入参解构

可以在函数声明中，对函数参数进行解构，代码如下（示例）：

function sum({x, y}) {
	return x + y;
}
let s = sum({ y: 2, x: 1}); 
s //=> 3 ，即 x为1，y为2
1
2
3
4
5

---

循环解构

可以在循环结构中，对循环对象进行解构，代码如下（示例）：

for(let {a, b} of [{a: '朋友一场', b: '给个面子'}, {a: '为了你好', b: '吃亏是福'}]){
	console.log(`a: ${a}, b: ${b}`)
}
// a: '朋友一场', b: '给个面子'
// a: '为了你好', b: '吃亏是福'
1
2
3
4
5

---

访问字符串、数组长度

代码如下（示例）：

let {length} = '大过年的';
length //=> 4

let {length} = ['都不容易',  , '来都来了'];
length //=> 3
'来都来了','都不容易','大过年的','朋友一场','给个面子','为了你好','才刚毕业','还是孩子','吃亏是福'
1
2
3
4
5
6

---

访问数据结构Set/Map的长度

let {size} = new Set(['都不容易',  , '来都来了'])
size //=> 3

let {size} = new Map([['a','都不容易'],['b','来都来了']])
size //=> 2
1
2
3
4
5

总结

以上就是今天要讲的内容，本文仅仅简单介绍了解构赋值的使用，而解构赋值提供了快速便捷地处理提取数据的方式，能够大大简化代码编写过程，并提高代码可读性和可维护性。

---

JS 知识题