ES6篇-变量的解构赋值


ES6中允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。
(1)数组的解构赋值
let [a, b, c] = [1, 2, 3];
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值
而如果解构不成功,变量的值就会等于undefined;对于不完全解构,也就是只匹配部分,这种
情况,解构依然可以成功。而如果等号右边不是数组(严格的说,不是可遍历的结构),则会报错。
下面是一些例子:

解构赋值允许指定默认值,ES6内部使用严格相等运算符(===),判断一个位置是否有值,只有当
一个数组成员严格等于undefined,默认值才会生效

(2)对象的解构赋值
对象的与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定,而对象
的属性没有次序,变量必须与属性同名,才能取到正确的值。如果没有同名的属性,变量的值等于
undefined。
实际上对象的解构赋值是下面的形式的简写,
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋值给对应的变量,真正赋值的是后者
,而不是前者,上面的代码中foo是匹配的模式,bar才是变量。而如果变量名和属性名不一致,不能简写,
这能如下写:
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
与数组一样,对象解构也可以用于嵌套解构的对象
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
注意,此时的p是模式,而不是变量,不能被赋值,如果p也要作为变量赋值,可以写成下面这样:
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

对象的解构也可以指定默认值,默认值的生效条件是,对象的属性值严格等于undefined。
例如:
var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

对象解构赋值的注意点
1.如果要将一个已经声明的变量用于解构赋值,应当注意:
// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
以上代码会报错,JavaScript引擎将{x}理解成一个代码块,引发语法错误,可以如下修改
// 正确的写法
let x;
({x} = {x: 1});

2. 解构赋值允许等号左边的模式之中,不放置任何变量名,因此以下表达式虽然毫无意义,
但却合法:
({} = [true, false]);
({} = 'abc');
({} = []);

3.数组的本质是特殊的对象,因此可以对数组进行对象属性的解构,如:
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
(3)字符串的结构赋值
字符串可以解构赋值,字符串被转换成一个类似数组的对象
const [a, b, c, d, e] = 'hello';
let {length : len} = 'hello';
len // 5
类似数组的对象都有一个length属性,因此可以对这个属性进行解构赋值。
(4)数值和布尔值的结构赋值
解构赋值的规则是,只要等号右边的值不是对象或数组,就将其转为对象,例如:
let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true
上面的代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值,
由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

(5)函数参数的结构赋值
函数的参数也可以使用解构赋值,函数参数的结构也可以使用默认值,undefined就会触发
函数参数的默认值。
(6)圆括号问题
ES6的规则是,只要有可能导致解构的歧义,就不得使用圆括号,建议只要有可能,就不要在模式中
放置圆括号。
不使用圆括号的情况:
1.变量的声明语句,模式不能使用圆括号
2.函数参数(函数参数属于变量声明,因此不能带有圆括号)
3.赋值语句的模式
可以使用圆括号的情况
只有一种情况:赋值语句的非模式部分
[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确
上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;
其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,
跟圆括号无关;
第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。


(7)用途
变量的解构赋值用途很多
1.交换变量的值
let x = 1;
let y = 2;

[x, y] = [y, x];

2.从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

3.函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。

4.提取Json数据
解构赋值对提取 JSON 对象中的数据,尤其有用。

5.函数参数的默认值

6.遍历Map解构
// 获取键名
for (let [key] of map) {
  // ...
}

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

7.输入模块的指定方法
 

阮一峰 解构赋值

猜你喜欢

转载自blog.csdn.net/u012149906/article/details/91366974