ECMAScript 6 -- 数组的解构赋值

时间:2021-11-12 16:20:25

模式匹配:只要等号两边的模式相同,左边的变量就会被赋予对应的值。

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 // []

不完全解构:等号左边的模式,只匹配一部分的等号右边的数组。

let [x, y] = [1, 2, 3];
x // 1
y // 2 let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script> function* fibs() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
} let [first, second, third, fourth, fifth, sixth] = fibs();
alert(sixth);
</script>
</body>
</html>

对象的解构赋值

解构不仅可以用于数组,还可以用于对象。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let { foo, bar } = {foo: "aaa", bar: "bbb"};
console.log(foo);
console.log(bar);
</script>
</body>
</html>

结果:aaa,bbb

简写:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
console.log(f);
console.log(l);
</script>
</body>
</html>

结果:

hello

world

数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
console.log(first); // 1
console.log(last); // 3
</script>
</body>
</html>

结果为:

1

3

字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e); </script>
</body>
</html>

数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

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

函数参数的解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function move({x = 0, y = 0} = {}) {
return [x, y];
}
console.log(move({x: 3, y: 8}));
console.log(move({x: 3}));
console.log(move({}));
console.log(move());
</script>
</body>
</html>

结果:

ECMAScript 6 -- 数组的解构赋值