系列文章
平凡前端之路_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 //=> '为了你好'
不完全解构
可以有选择性的忽略一项或多项进行不完全解构,代码如下(示例):
let [a, , b] = ['来都来了','都不容易','大过年的']
a //=> '来都来了'
b //=> '大过年的'
解构默认值
进行解构时,当模式匹配结果为 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 //=> '还是孩子'
解构剩余项
进行解构时,可以将数组剩余部分赋值给一个变量,代码如下(示例):
let [a, ...b] = ['来都来了','都不容易','大过年的']
a //=> '来都来了'
b //=> ['都不容易','大过年的']
嵌套解构
可以对多层嵌套的数组进行解构,代码如下(示例):
let [a, [[b], c]] = ['朋友一场', [['给个面子'], '为了你好']];
a //=> '朋友一场'
b //=> '给个面子'
c //=> '为了你好'
解构字符串,数据结构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', '来都来了']
入参解构
可以在函数声明中,对函数参数进行解构,代码如下(示例):
function sum([x, y]) {
return x + y;
}
let s = sum([1, 2]);
s //=> 3, 即 x为1,y为2
循环解构
可以在循环结构中,对循环对象进行解构,代码如下(示例):
let map = new Map()
map.set('a', '来都来了')
map.set('b', '都不容易')
for(let [key, value] of map){
console.log(`${key}: ${value}`)
}
// a: '来都来了'
// b: '都不容易'
交换赋值
可以不使用临时变量,交换变量的值,代码如下(示例):
let x = '大过年的';
let y = '还是孩子';
[x, y] = [y, x]
x //=> '还是孩子'
y //=> '大过年的'
对象模型的解构
在解构赋值表达式的左侧使用对象模型模式变量,每个变量名称映射为解构对象的相同属性。
基本赋值
对对象进行基本解构赋值,代码如下(示例):
let { x, y} = { x: '为了你好', y: '吃亏是福' };
x //=> '为了你好'
y //=> '吃亏是福'
let a, b;
({ a, b} = { b: '才刚毕业', a: '还是孩子' });
a //=> '还是孩子'
b //=> '才刚毕业'
解构赋予别名
进行解构时,可以为某些映射了属性的模式变量指定别名,以便更好的描述变量的含义和作用,代码如下(示例):
let { a: b} = { a: '朋友一场' };
a //=> a is not defined
b //=> '朋友一场'
不完全解构
可以有选择性的忽略一项或多项进行不完全解构,代码如下(示例):
let { x} = { x: '为了你好', y: '吃亏是福' };
x //=> '为了你好'
解构默认值
当模式匹配结果是 undefined 时,会将设置的默认值作为结果进行赋值,代码如下(示例):
let {a= '才刚毕业', b= '还是孩子', c= '朋友一场', d= '为了你好'} = {a: '都不容易', c: '', d: null}
a //=> '都不容易'
b //=> '还是孩子'
c //=> ''
d //=> null
// 结合赋予别名
let {a: aa = '才刚毕业', b: bb = '还是孩子'} = {a: '都不容易'};
// aa = '都不容易'; bb = '还是孩子';
解构剩余项
进行解构时,可以将对象剩余部分赋值给一个变量,代码如下(示例):
let {a, b, ...rest} = {a: '来都来了', b: '大过年的', c: '都不容易', d: '为了你好'};
a //=> '来都来了'
b //=> '大过年的'
rest //=> { c: '都不容易', d: '为了你好'}
嵌套解构
可以对多层嵌套的对象进行解构,代码如下(示例):
let excuse= {p: ['才刚毕业', {y: '还是孩子'}] };
let {p: [x, { y }] } = excuse;
// x = '才刚毕业'
// y = '还是孩子'
入参解构
可以在函数声明中,对函数参数进行解构,代码如下(示例):
function sum({x, y}) {
return x + y;
}
let s = sum({ y: 2, x: 1});
s //=> 3 ,即 x为1,y为2
循环解构
可以在循环结构中,对循环对象进行解构,代码如下(示例):
for(let {a, b} of [{a: '朋友一场', b: '给个面子'}, {a: '为了你好', b: '吃亏是福'}]){
console.log(`a: ${a}, b: ${b}`)
}
// a: '朋友一场', b: '给个面子'
// a: '为了你好', b: '吃亏是福'
访问字符串、数组长度
代码如下(示例):
let {length} = '大过年的';
length //=> 4
let {length} = ['都不容易', , '来都来了'];
length //=> 3
'来都来了','都不容易','大过年的','朋友一场','给个面子','为了你好','才刚毕业','还是孩子','吃亏是福'
访问数据结构Set/Map的长度
let {size} = new Set(['都不容易', , '来都来了'])
size //=> 3
let {size} = new Map([['a','都不容易'],['b','来都来了']])
size //=> 2
总结
以上就是今天要讲的内容,本文仅仅简单介绍了解构赋值的使用,而解构赋值提供了快速便捷地处理提取数据的方式,能够大大简化代码编写过程,并提高代码可读性和可维护性。JS 知识题
问题 | 答案 |
---|---|
解构赋值都是有序的模式匹配 | 对象的解构赋值不是有序的模式匹配 |
解构赋值匹配是 null时,会将默认值作为结果返回 | 解构赋值匹配结果是 undefined 时,才会将默认值作为结果返回 |
只能对数组进行数组模型的结构 | 可以对数组进行对象模型的结构,通常要赋予别名:let {0:a, length} = arr |
解构数组第一位 | let [first] = arr; / let {0: first} = arr; |
解构数组最后一位 | let [last] = arr.reverse(); / let {[arr.length-1]: last} = arr; |
数组解构只能两个变量交换赋值 | 可以使用数组解构进行任意数量任意交换赋值: [x,y,z,v,w] = [y,z,w,x,v] |
const 声明的变量不能交换赋值 | const x = 1, y = 2; [x,y] = [y,z]; ERROR: Assignment to constant variable. |
let a, b;({ a, b}) = { b: ‘才刚毕业’, a: ‘还是孩子’ };不能成功解构a,b | 正确解构a,b为 ({ a, b} = { b: ‘才刚毕业’, a: ‘还是孩子’ }); |