Es6学习笔记2

Posted by JayZhao on 2018-04-16

Es6学习笔记2

链接

变量的解构赋值

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

1.数组的解构赋值

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

效果等同

数组解构存在完全解构和不完全解构,解构的原则是右边为可遍历数据解构且包含昨天的结构模式。

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

上面可以解构成功,下面不可以。
解构赋值允许指定默认值。

1
2
let [foo = true] = [];
foo // true

2.对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

1
2
3
4
5
6
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

若变量名和属性名字不一致,则必须写成
let {属性名 : 变量名}
因此对象解构的实质是先寻找同名属性,在赋值给相应的变量

对象解构也允许设定默认值,但是对象必须严格是 undefined,null 不会设置默认值。
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

注意
如果要将一个已经声明的变量用于解构赋值,必须非常小心。

1
2
3
4
// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。

1
2
3
// 正确的写法
let x;
({x} = {x: 1});

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

1
2
3
4
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

3. 字符串的解构赋值

将字符串转换成了类似字符数组的对象

4.数值和布尔值的解构解析

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefinednull无法转为对象,所以对它们进行解构赋值,都会报错。

5. 函数的参数赋值

函数的参数也可以使用解构赋值,要注意的是指定的默认值是对函数的参数指定的默认值,而不是函数表达式中的变量

1
2
[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

6.圆括号问题

解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。

由此带来的问题是,如果模式中出现圆括号怎么处理。ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。因此,建议只要有可能,就不要在模式中放置圆括号

不能使用圆括号的情况

  • 1)变量声明语句
  • 2)函数参数
  • 3)赋值语句的模式 (模式相当于键值对中的键)

可以使用圆括号的情况

  • 只有一种:赋值语句的非模式部分
1
2
([a]) = [5]; // 报错
[(b)] = [3]; // 正确

7.用途

1)交换变量的值:
最常见的变量交换方式应该是:

1
2
3
4
5
// 变量 x,y

temp = x;
x = y;
y = temp;

利用解构赋值可以这么写:

1
2
3
4
let x = 1;
let y = 2;

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

2)从函数中返回多个值(即函数返回值的接收取出)

3)函数参数的定义(方便参数和变量名一一对应)

4)提取 JSON 数据

1
2
3
4
5
6
7
8
9
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);

5)函数参数的默认值

6)遍历 Map 结构(更加方便快捷的提取键名和键值)
单独获取可:

1
2
3
4
5
6
7
8
9
// 获取键名
for (let [key] of map) {
// ...
}

// 获取键值
for (let [,value] of map) {
// ...
}

7)输入模块的指定方法