ES6能够从数组和对象中提取值,然后对变量举行赋值。解构赋值的分类:数组解构赋值、对象解构赋值 、字符串解构赋值、数值解构赋值、布尔值解构赋值、 函数参数解构赋值。
1 数组的解构赋值
1.1 基础用法
let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;
如上所示,只需等号双方的形式雷同,左侧的变量就会被给予右侧对应的值。还能够运用嵌套数组举行构造。
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [x, , y] = [1, 2, 3];
x // 1
y // 2
1.2 解构不胜利
假如构造不胜利,变量的值就即是undefined。
let [x, y, ...z] = ["a"];
x // "a"
y // undefined
z // []
//以下两种状况,foo的值都即是undefined。
let [foo] = [];
let [bar, foo] = [1];
1.3 不完全解构
即等号左侧的形式只婚配一部分等号右侧的数组,依旧能够解构胜利。
let[x, y] = [1, 2, 3];
x // 1
y // 2
//嵌套状况
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
c // 4
1.4 默认值
解构赋值许可设置默认值,当数组成员严厉即是undefined,默认值将见效。
let [x = 1] = [undefined];
x // 1
let [y = 1] = [null];
y // null
2 对象的解构赋值
解构一样适用于对象。
let {foo, bar, barz} = {foo: "aaa", bar: "bbb"};
foo // "aaa"
bar // "bbb"
barz // undefined
对象的解构赋值实际上是先找到同名属性,然后再赋值给对应的变量,前者是婚配形式,后者才是真正的变量。
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
let obj = { first: "hello", last: "world" };
let { first: f, last: g } = obj;
f // "hello"
g // "world"
first // first id not undefined
解构也能够用于嵌套构造的对象
let obj = {
p: [
"hello",
{ y: "world" }
]
};
let { p, p: [x, { y }] } = obj;
x // "hello"
y // "world"
p // ["hello", { y: "world" }]
对象的解构一样能够指定默认值
let { x = 1 } = {};
x // 1
3 字符串的解构赋值
字符串举行解构赋值时,会被转换成一个类数组对象。
const [a, b, c] = "red";
a // "r"
b // "e"
c // "d"
类数组对象的length属性也能够举行解构赋值
let { length: len } = "hello";
len // 5
4 数值和布尔值的解构赋值
解构赋值时,假如等号右侧不是数组和对象,则会先转为对象,假如是undefined和null则没法转为对象,此时会报错。
let { toString: s } = 123;
s === Nunmber.prototype.toString // true;
let { toString: s } = true;
s === Boolean.prototype.toString // true;
let { prop : x } = undefined; // 报错
let { prop : y } = null; // 报错
5 函数参数的解构赋值
函数的参数也能够运用解构赋值和指定默认值
function add([x, y]){
return x + y;
}
add([1,2]); // 3
function move({ x = 0, y = 0 } = {}) {
return [x, y];
};
move({ x: 3, y: 8 }); // [3, 8]