【javascript】变量的解构赋值

数组的解构赋值

基本写法

const [a, b, c] = [1, 2, 3];

本质上这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋值对应的值。

• 如果解构不成功，变量的值会被赋值为undefined
• 数组解构时如果等号右边不是可便利的解构，将会报错
• Set解构的数据也可以使用数组解构赋值

数组解构默认值

解构赋值允许指定默认值

let [foo = true] = [];
foo // true

• es6内部使用（===）判断一个位置是否有值，只有值为undefined默认值才会生效
• 如果值为null默认值不会生效

对象的解构赋值

基本写法

let { foo, bar} = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

• 变量必须与属性同名才能取得正确的值，不然就是undefined

// 变量命与属性名不一致 不许写成这样
let { foo, bar: baz} = { foo: "aaa", bar: "bbb" };
baz // "aaa"
// bar 是匹配模式 baz才是变量
// 这种写法是下面形式的简写
let { foo: foo, bar: bar} = { foo: "aaa", bar: "bbb" };

• 对象的解构赋值也可以使用默认值，同数组的解构赋值

字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // h
b // e
c // l
d // l
e // o

数值和布尔的解构赋值

如果等号右边是数值和布尔，则会先转为对象

let {toString: s} = 123;
s === Number.property.toString // true

函数参数的解构赋值

function add([a,b]){
	return a + b
}
add([1,2]) // 3

function add({a,b}){
	return a+b
}
add({a:1,b:2}) // 3