Symbol

ES6新增的一种原始类型，用于唯一的不可修改的，并且也可以用来用作Object的key值。

1
2
3
4
5
6
7
8
let symbol = Symbol();
console.log(typeof symbol); // symbol

let symbol2 = Symbol("xxx");
console.log(typeof symbol2); // symbol

let symbol3 = Symbol(666);
console.log(typeof symbol3); // symbol

该类型的值不可枚举。

Symbol的方法

  1. for(key)

    从Symbol类型中查找指定的key，如果存在则返回，不存在就创建并返回。

    1
    2
    3
    4
    5
    let symbol = Symbol.for("foo"); // 创建
    console.log(symbol); // Symbol(foo)

    let result = Symbol.for("foo"); // 查找
    console.log(symbol); // Symbol(foo)

  2. keyFor(sym)

    方法用来获取symbol注册表中与某个symbol关联的键

迭代器

迭代器的三种作用：

  • 为各种数据结构，提供一个统一的、筒便的访问接口

  • 使得数据结构的成员能够按某种次序排列。

  • ES6新增了for…of循环语句，用于遍历迭代器。

Iterator接口

在JavaScript中迭代器是一个对象，该对象提供next方法用于返回序列中的下一项。该啊方法包含done和value两个属性的对象。

创建一个迭代器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function fn(array) {
  var index = 0;
  return {
    next: function () {
      return index < array.length
        ? {
            // 是否迭代完毕
            done: false,
            value: array[index++],
          }
        : {
            done: true,
          };
    },
  };
}

let arr = ["tom", "king", "luck"];
let iterator = fn(arr);

console.log(iterator.next()); // { done: false, value: 'tom' }
console.log(iterator.next()); // { done: false, value: 'king' }
console.log(iterator.next()); // { done: false, value: 'luck' }
console.log(iterator.next()); // { done: true }

在JavaScript中原生具有iterator接口的数据结构：

  • Array
  • Map
  • Set
  • String
  • TypedArray
  • 函数的arguments对象
  • NodeList对象
  • …

for…of语句

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
29
30
31
32
33
// 遍历数组
let arr = [1, 2, 3, 4, 5];
for (let attr of arr) {
  // attr得到的是数组的元素内容
  console.log(attr);
}

// 遍历Set集合
let set = new Set(ar);
for (let attr of set) {
  // attr得到的是Set的元素内容
  console.log(attr);
}
// 遍历map集合
let num = 100,
  str = "张无忌",
  fun = function () {},
  obj = {};
map.set("num", num);
map.set("str", str);
map.set("fun", fun);
map.set("obj", obj);
for (let attr of map) {
  // attr得到的是Map的[key,value]键值对数组
  console.log(attr);
}

// 遍历字符串
let string = "XiaoKang";
for (let attr of string) {
  // attr得到的是字符串的每一个
  console.log(attr);
}
  • for…of可以使用break、continue、return语句
  • 默认情况下无法遍历对象
  • for…of遍历对象无法遍历出对象原型上的方法，而for…in全部都可以遍历到

生成器

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 定义生成器函数
 * function* functionName(){
 *     yield 关键字
 * }
 * 生成器调用时，返回一个Generator对象
 */

function* fn() {}
let result = fn();

console.log(result);

yield表达式

yield用于暂停或回复一个生成器函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 定义一个生成器函数
function* fn() {
  let arr = ["tom", "king", "lucky"];
  for (let i = 0; i < arr.length; i++) {
    yield arr[i];
  }
}
// 生成器函数调用返回生成器对象
let generator = fn();
// 生成器对象就是ES6提供的迭代器
console.log(generator.next()); // { value: 'tom', done: false }
console.log(generator.next()); // { value: 'king', done: false }
console.log(generator.next()); // { value: 'lucky', done: false }
console.log(generator.next()); // { value: 'undefined', done: true }

yield*表达式

用于委托给另一个Generator或可迭代对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function* g1() {
  yield 2;
  yield 3;
}
function* g2() {
  yield 1;
  yield* g1();
  yield 4;
}
// 生成器函数调用返回生成器对象
let generator = g2();
// 生成器对象就是ES6提供的迭代器
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: 4, done: false }
console.log(generator.next()); // { value: undefined, done: true }

Generator对象的方法

方法名称描述
next()返回一个包含属性done和value的对象。该方法也可以通过接受一个参数用以向生成器传值
return返回给定的值并结束生成器
throw用于向生成器抛出异常，并恢复生成器的执行，返回带有done即value两个属性的对象