一、前言
什么是“解构赋值”呢?就是从数组或者对象中取值,对变量进行赋值,这就是变量的解构赋值。
二、数组的解构赋值
规则:
1.左右两边顺序是一一对应的
2.左右两边结构必须是一样的(模式匹配)
3.可以缺省,缺省时赋值为undefined
4.可以指定默认值
1. 一般的解构赋值
let [a,b,c] = [1,2,3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
// 等价于:
// let a = 1;
// let b = 2;
// let c = 3;
// console.log(a);
// console.log(b);
// console.log(c);
数组的解构赋值顺序是一一对应的:
let [c,b,a] = [1,2,3];
console.log(a); // 3
console.log(b); // 2
console.log(c); // 1
不仅是Number类型,其它几种数据类型也可以进行解构赋值:
let [m, n, x, y, z, zz] = [1,'string',true,null,undefined,{}];
console.log(m,n,x,y,z,zz); // 1 "string" true null undefined {}
2. 模式匹配
let [a,[b],[c,d]] = [0,[1],[2,3]];
console.log(a); // 0
console.log(b); // 1
console.log(c); // 2
console.log(d); // 3
3. 如果缺省,变量默认赋值为undefined
// 这里 b 和 d 是缺省的:
let [a,b,c,d] = [0,,2];
console.log(a); // 0
console.log(b); // undefined
console.log(c); // 2
console.log(d); // undefined
4. 指定变量的默认值
如果缺省,那么就可以把指定的默认值赋值给变量。
let [a='default',b,c,d='default'] = [,1,2,3];
console.log(a); // 'default'
console.log(b); // 1
console.log(c); // 2
console.log(d); // 3
5. 已经被声明或者赋值的变量的解构赋值
针对已经被赋值的变量,我们用一个小括号把它们包裹起来方可解构赋值:
let a = 0;
console.log(a); // 0
([a,b,c] = [1,2,3]);
// [a,b,c] = [1,2,3]; // 这种写法不合法
console.log(a); // 1 成功赋值
三、对象的解构赋值
规则:
1.左右两边的顺序可以不对应,但是右边的匹配名称很重要
2.左右两边结构必须是一样的(模式匹配)
3.可以缺省,缺省时赋值为undefined
4.可以指定默认值
5.变量的可以简写
1. 一般的解构赋值
let {a, b, c} = {a:1, b:2, c:3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
左边变量的顺序发生变化,但是只要保证右边的匹配名称正确,那么就没问题:
let {c,b,a} = {a:1, b:2, c:3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
以上一般的解构赋值还可以这么写:
var obj = {
a: 1,
b: 2,
c: 3
}
let {a, b, c} = obj;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
2. 模式匹配
var obj = {
string: 'abc',
arr: [
'def',
{
oItem: 1
}
]
}
let {string, arr:[aItem,{oItem}]} = obj;
console.log(string); // 'abc'
console.log(aItem); // 'def'
console.log(oItem); // 1
3. 如果缺省,变量默认赋值为undefined
这里匹配的c是缺省的:
let {a,b,c} = {a:1,b:2}
console.log(a); // 1
console.log(b); // 2
console.log(c); // undefined
4. 指定变量的默认值
let {a='default',b,c} = {b:2,c:3};
console.log(a); // 'default'
console.log(b); // 2
console.log(c); // 3
5. 变量的完整写法
以上的例子均为变量的简写:
let {a,b,c} = {a:0,b:1,c:2};
完整的写法是:
let {a:a,b:b,c:c} = {a:0,b:1,c:2};
console.log(a); // 0
console.log(b); // 1
console.log(c); // 2
解析:
先看赋值运算符(=)左侧的键值对中,冒号左边实际上用于匹配而不是真正的变量名称,冒号右边才是真正的变量名称。
同理,赋值运算符(=)右侧也是冒号左边用于匹配,右边则用于赋值。
举个例子:
let {a:A,b:B,c:C} = {a:0,b:'1',c:[2]};
console.log(A); // 0
console.log(B); // '1'
console.log(C); // [2]
console.log(a); // error a is not defined
console.log(b); // error
console.log(c); // error
6. 已经被声明或者赋值的变量的解构赋值
针对已经被赋值的变量,我们用一个小括号把它们包裹起来方可解构赋值:
let a = 0;
console.log(a); // 0
({a}={a:1});
console.log(a); // 1