变量的解构赋值
一起了解一下ES6的中的 变量的解构赋值 内容。
# 变量的解构赋值
允许按照一定模式,从数组和对象中提取值,并对变量进行赋值,这被称为解构赋值
# 1. 数组的结构赋值
在es6之前。对变量赋值只能直接一个个的赋值
let a = 1;
let b = 2;
let c = 3;
2
3
es6中,我们可以使用更简洁的方法来赋值
let [a, b, c] = [1, 2, 3];
效果等同与上面的三行,是不是很爽,哈哈哈。
数组解构赋值遵循顺序对应
结构不成功的话,变量的值就等于 undefined
let [foo] = [];
let [bar, foo] = [1];
// foo --》 undefined
2
3
如果等号右边不是数组格式的数据,就会报错
# 2. 默认值
解构赋值允许指定默认值。
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
2
3
4
5
注意,ES6 内部使用严格相等运算符(===
),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined
,默认值才会生效。
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
2
3
4
5
上面代码中,如果一个数组成员是null
,默认值就不会生效,因为null
不严格等于undefined
。
# 3. 对象的解构赋值
对象的解构赋值遵循key 值对应的规则
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
2
3
对象的结构赋值可以改为自己想要的属性名
let { foo: f, bar: b } = { foo:"aaa", bar: "bbb" }
- foo: 原始名称
- f : 别名
对象的多重解构/嵌套赋值
let { foo: [a, b] } = { foo: [10,20], bar:"bbb" }
// a:10
// b:20
2
3
对象解构赋值小案例
let {left: L, top: T} = getComputedStyle('#box')
# 4. 字符串的解构赋值
当我们解构字符串的时候,字符串被当成了一个类数组对象,我们就可以对字符串进行解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
2
3
4
5
6
类似数组的对象都有一个length
属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
2
# 5. 数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
2
3
4
5
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined
和null
无法转为对象,所以对它们进行解构赋值,都会报错。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
2
# 6. 函数参数的解构赋值
函数的参数也可以使用解构赋值。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
2
3
4
5
# 7. 用途
(1)交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
2
3
4
上面代码交换变量x
和y
的值,这样的写法不仅简洁,而且易读,语义非常清晰。
(2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
2
3
4
5
6
7
(4)提取 JSON 数据
解构赋值对提取 JSON 对象中的数据,尤其有用。
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
2
3
4
5
6
7
8
9
10
上面代码可以快速提取 JSON 数据的值。
(5)输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");