二、变量的解构赋值
2021-10-01 本文已影响0人
祥仔90后
总结#
1.按照一定模式,从数组和对象中提取值,对变量进行赋值
2.可以默认值
1、什么是解构赋值
解构赋值就是按照一定模式,从数组和对象中提取值,对变量进行赋值。
如下代码:
let a = 1;
let b = 2;
let c = 3;
用解构赋值写
let [a, b, c] = [1, 2, 3];
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
注:如果解构不成功,变量的值就等于undefined。
let [foo] = [];
let [bar, foo] = [1];
//foo undefined
//bar undefined
2、解构赋值可以默认值
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
注:默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
下面表达式之所以会报错,是因为x用y做默认值时,y还没有声明。
let [x = y, y = 1] = []; // ReferenceError: y is not defined
3、频繁用途
(1)交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
(2)从函数返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
(3)提取 JSON 数据
解构赋值对提取 JSON 对象中的数据,尤其有用。
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]