前话
- 解构是一种赋值语法,可以从数组中提取元素或从对象中提取属性,将其赋给对应的变量或另一个对象的属性
- 两种解构语法:
解构语法初体验
let arr = [1, 2],
obj = {
a: 3,
b: 4
},
x, y, a, b
x = arr[0]
y = arr[1]
a = obj.a
b = obj.b
let [d, f] = [1, 2]
let {g, h} = {g: 10,h: 20}
数组解构和对象解构的通用特性
带关键字时需要初始化
对象解构时,不带关键字,则必须用圆括号包裹
[x, y] = [1, 2];
console.log(x, y);
({a, b} = {a:10, b:20})
console.log(a,b)
解构时没有一一匹配
- 如果解构时没有一一匹配到,那么就会被赋为undefined
[c, d] = [1];
({e, f} = {e: 3});
console.log(d)
console.log(f)
数组解构详解
利用数组解构交换变量
[x, y] = [1, 2]
console.log(x, y);
[y, x] = [1, 2];
console.log(x, y)
var obj = {};
[obj.a, obj.b] = [1, 2];
console.log(obj.a, obj.b);
[obj.b, obj.a] = [1, 2]
console.log(obj.a, obj.b)
数组解构中有选择性的赋值
- 如下,只对数组中的第三个元素提供变量名,前两个用逗号占位
[, , z] = [1, 2, 3]
console.log(z)
解构赋值表达式的右侧必须是可迭代的对象
[x, y] = NaN;
[x, y] = undefined;
[x, y] = null;
扩展运算符放在表达式的左侧
[x, ...y] = [1, 2, 3]
console.log(x)
console.log(y)
- 在上面的代码中,…y称为剩余元素,右侧数组的第一个元素赋给了x变量,剩下的两个元素被收集起来赋给了y数组
- 注意:剩余元素必须是数组的最后一个元素
对象解构详解
对象解构初体验
({a, b} = {b:1, a:2});
({a:a, b:b} = {b:1,a:2})
对象解构的原理
对象解构时使用别名
({a:e, b:f} = {b:5, a:6});
console.log(e, f)
let obj = {e, f};
({a:obj.e, b:obj.f} = {a:10,b:20});
console.log(obj.e,obj.f)
对象解构出现多个同名属性*
({a:e, a:f} = {b:5, a:6});
console.log(e, f)
对象字面量的属性名用表达式定义(即属性名可计算)
var obj = {
preName: 'strick'
},
attr = 'Name';
({['pre'+attr]:value} = obj)
console.log(value)
数组解构含默认值
- 如果数组解构并且指定位置的元素不存在或其值不存在,那么就会使用默认值
- 判断元素的值是否存在,只要与undefined做全等(===)比较,当结果为真,表示值不存在
[x, y = 2] = [1]
console.log(y)
[x, y = 2] = [1, undefined]
console.log(y)
[x, y] = [1, null]
console.log(y)
对象解构含默认值
- 判断属性或属性值是否存在,也是要与 undefined 进行全等比较
({a, b=2 } = {a:1});
console.log(b)
console.log(a)
({a, b=2} = {a:1, b:undefined})
console.log(a)
console.log(b)
({a, b=2} = {a:1, b:null});
console.log(a)
console.log(2)
对象解构中为别名变量提供默认值
({a, b:digit=2} = {a:1});
console.log(digit);
嵌套解构
[x, [y], z] = [1, [2, 3], 4];
console.log(y);
({a:{b:digit}} = {a:{b:1}});
console.log(digit);
对象和数组的混合解构
({a:[b]} = {a:[1]});
console.log(b)
参数解构
函数的参数是一个对象
function func({name,age}){
console.log(name)
console.log(age)
}
func({name:'zsy', age: 21})
- 注意:如果参数解构的目标是对象,那么调用函数必须传递对象
- 下面的代码会抛出异常
function func({name,age}){
console.log(name)
console.log(age)
}
func()
函数的参数是一个数组
function func(...[name, age]) {
console.log(name)
console.log(age)
}
func('zsy', 21)
解构默认值和参数默认的对比
function func5({name = 'zsy'} = {}){
console.log(name)
}
function func6({name} = {name:'freedom'}){
console.log(name)
}
func5()
func6()
func5(undefined)
func6(undefined)
func5({})
func6({})