跳至正文

ES6入门教程笔记(3)-变量的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

1 数组的解构赋值

基本用法

以前,为变量赋值,只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

现在,ES6可以这样写:

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

上面代码表示,可以从数组中提取值,按照对应位置,给变量赋值。

还支持嵌套数组。

let [x, [[y], z]] = [1, [[2], 3]];
x // 1
y // 2
z // 3

let [x, , y] = [1, 2, 3];
x // 1
y // 3

如果解析不成功,变量的值就等于undefined。

let [x] = []; // undefined
let [y, x] = [1]; // undefined

上面两种情况都属于解析不成功,x的值都会等于undefined。

还有一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。

let [x, y] = [1, 2, 3];
x // 1
y // 2

上面情况属于不完全解构,但依然可以成功。

默认值

解构赋值允许指定默认值。

let [ret = true] = [];
ret // true

let [x, y = 'b'] = ['a'];
x // 'a'
y // 'b'

2 对象的解构赋值

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

let {x, y} = { x:10, y:20 };
x // 10
y // 20

与数组相比,对象解构有一个很重要的不同是,数组元素是按次序排列的,变量的取值由位置决定;而对象的属性没有次序,只要变量与属性同名,就能取到正确的值,否则为undefined

let { z, y, x } = { x:10, y:20 };
x // 10
y // 20
z // undefined

实际上,对象解构的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者。

let { pos1:x } = { pos1:10, pos2:20 };
x // 10
pos1 // error: pos1 is not defined

上面代码中,pos1是匹配的模式,x才是真正的变量。所以被赋值的是变量x,而不是模式pos1。

利用对象的解构赋值,可以很方便地将现有对象的属性,赋值到某个变量。

let node = { width:100, height:200, zIndex:5 };
let { zIndex:z, width:w, height:h, tag} = node;
z // 5
w // 100
h // 200
tag // undefined

3 字符串的解构赋值

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

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

类似数组的对象都有一个length属性,因此也可以对这个属性做解构赋值。

let [length:len] = 'hello';
len // 5

4 实际用途

4.1 交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

上面代码交换x和y的值,这种写法简洁易读,语义非常清晰。

4.2 提取JSON数据

let jsonData = {
    id: 5,
    status: "OK",
    data: [100, 200]
};
let { id, status, data:number } = jsonData;
console.log(id, status, number);
// 42, "OK", [100, 200]

注:本文原始内容来自 ES6标准入门,有修改。

标签:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注