文章结构

  • 箭头函数
  • module
  • class
  • Set 和 Map
  • Promise
  • 面试题

箭头函数

箭头函数存在的意义，第一写起来更加简洁，第二可以解决 ES6 之前函数执行中 this 是全局变量的问题。

module

  • 如果只是输出一个唯一的对象，使用export default即可。

  • 如果要输出多个对象：

1
2
3
4
5
6
7
// 导出方式1
export function fn1() {
  alert('fn1');
}
export function fn2() {
  alert('fn2');
}
1
2
3
4
5
6
7
8
9
// 导出方式2
function fn1() {
  alert('fn1');
}
function fn2() {
  alert('fn2');
}

export { fn1, fn2 };
1
2
3
4
// 导入
import { fn1, fn2 } from './util2.js';
fn1();
fn2();

class

使用 class，可以让类的定义更加简单与直观。

Set 和 Map

Set

Set 类似于数组，但数组可以允许元素重复，Set 不允许元素重复

1
2
3
4
5
6
7
8
9
10
11
// 例1
const set = new Set([1, 2, 3, 4, 4]);
console.log(set); // Set(4) {1, 2, 3, 4}

// 例2
const set = new Set();
[2, 3, 5, 4, 5, 8, 8].forEach((item) => set.add(item));
for (let item of set) {
  console.log(item);
}
// 2 3 5 4 8

Set 实例的属性和方法有:

  • size：获取元素数量。
  • add(value)：添加元素，返回 Set 实例本身。可以链式调用。
  • delete(value)：删除元素，返回一个布尔值，表示删除是否成功。
  • has(value)：返回一个布尔值，表示该值是否是 Set 实例的元素。
  • clear()：清除所有元素，没有返回值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const s = new Set();
s.add(1)
  .add(2)
  .add(2); // 添加元素

s.size; // 2

s.has(1); // true
s.has(2); // true
s.has(3); // false

s.delete(2);
s.has(2); // false

s.clear();
console.log(s); // Set(0) {}

Set 实例的遍历，可使用如下方法:

  • keys()：返回键名的遍历器。
  • values()：返回键值的遍历器。由于 Set 结构的键名和键值是同一个值，所以 keys()和 values()返回结果一致。
  • entries()：返回键值对的遍历器。
  • forEach()：使用回调函数遍历每个成员。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let set = new Set(['aaa', 'bbb', 'ccc']);

for (let item of set.keys()) {
  console.log(item);
}
// aaa
// bbb
// ccc

for (let item of set.values()) {
  console.log(item);
}
// aaa
// bbb
// ccc

for (let item of set.entries()) {
  console.log(item);
}
// ["aaa", "aaa"]
// ["bbb", "bbb"]
// ["ccc", "ccc"]

set.forEach((value, key) => console.log(key + ' : ' + value));
// aaa : aaa
// bbb : bbb
// ccc : ccc

Map

Map 的用法和普通对象基本一致，但它能用非字符串或者数字作为 key。

1
2
3
4
5
6
7
8
9
const map = new Map();
const obj = { p: 'Hello World' };

map.set(obj, 'OK');
map.get(obj); // "OK"

map.has(obj); // true
map.delete(obj); // true
map.has(obj); // false

Map 实例的属性和方法如下：

  • size：获取成员的数量
  • set：设置成员 key 和 value
  • get：获取成员属性值
  • has：判断成员是否存在
  • delete：删除成员
  • clear：清空所有
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const map = new Map();
map.set('aaa', 100);
map.set('bbb', 200);

map.size; // 2

map.get('aaa'); // 100

map.has('aaa'); // true

map.delete('aaa');
map.has('aaa'); // false

map.clear();

Map 实例的遍历方法有：

  • keys()：返回键名的遍历器。
  • values()：返回键值的遍历器。
  • entries()：返回所有成员的遍历器。
  • forEach()：遍历 Map 的所有成员。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const map = new Map();
map.set('aaa', 100);
map.set('bbb', 200);

for (let key of map.keys()) {
  console.log(key);
}
// "aaa"
// "bbb"

for (let value of map.values()) {
  console.log(value);
}
// 100
// 200

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// aaa 100
// bbb 200

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// aaa 100
// bbb 200

Promise

Promise 是 CommonJS 提出来的这一种规范，有多个版本，在 ES6 当中已经纳入规范，原生支持 Promise 对象。非 ES6 环境可以用类似 Bluebird、Q 这类库来支持。

Promise 可以将回调变成链式调用写法，流程更加清晰，代码更加优雅。

简单归纳下 Promise：三个状态、两个过程、一个方法，快速记忆方法：3-2-1

  • 三个状态：pending、fulfilled、rejected

  • 两个过程：

    • pending → fulfilled（resolve）
    • pending → rejected（reject）

  • 一个方法：then

Promise 的其他概念，如 catch、 Promise.all/race。