细化ES6之迭代器与生成器

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

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

let symbol3 = Symbol(5);
console.log(symbol3); // Symbol(5)

由于Symbol类型是原始类型，是不能通过new Symbol()来创建对象的。

注意:

• 尝试将一个 symbol值转换为一个 number值时，会抛出一个typeError,错误。

• Object(symbol) == symbol表达式的结果返回true。

• 阻止从一个symbol值隐式地创建一个新的string类型的属性名。

Symbol方法：

• Symbol.for()方法

  • 作用 - 从symbol类型中查找指定的key

    • 如果存在这个key的话,返回

    • 如果不存在这个key的话，创建

• Symbol.keyfor()方法

  • 用于获取symbol注册表中与某个symbol关联的键

Symbol与for…in

Symbols在 for …in迭代中不可枚举。

Object.getOwnPropertyNames()不会返回symbol对象的属性，但是可以使用Obiect.getOwnPropertySymbols()得到它们。

var obj = {};
//使用Symbol作为对象的属性名出现,是不可枚举的
obj[Symbol( "a")]= "a" ;
obj[Symbol.for("b")]="b";
obj["c"] = "c";
obj.d = "d";
for (var i in obj) {
    console.log(i); // logs "c" and "d"
}

迭代器

为各种不同的数据结构提供统一的访问机制。

任何数据结构只要部署lterator接口，就可以完成遍历操作。

作用:

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

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

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

lterator接口

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

• 作用 - 用于返回序列中的下一项

• 返回值 - 是一个对象

  • done属性 - 表示是否迭代完毕

    • false - 表示当前没有迭代完毕

    • true - 表示当前迭代完毕

  • value属性 - 表示当前迭代的值

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 }

迭代器对象一旦被创建，就可以反复调用next()方法用于依次访问对象中的键值。

数据结构:

• Array

• Map

• Set

• String

• TypedAccay.

• 函数的arguments 对象

• NodeList 对象

• …

迭代协议

• 可迭代协议

• 迭代器协议

for…of语句

for…of语句的用法

遍历迭代器

// 遍历数组
let arr = [1, 2, 3, 4, 5];
for (let attr of arr) {
    // attr得到的是数组的元素内容
    console.log(attr);
}

// 遍历Set集合
let set = new Set(arr);
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 = "dg";
for (let attr of string) {
    // attr得到的是字符串的每一个
    console.log(attr);
}

返回选代器对象的方法

返回一个迭代器对象

与forEach()方法的区别

• forEach()方法无法跳出循环。换句话讲，break 语句和 continue语句无效。

• for…of语句不仅可以使用break语句和 continue语句，还可以配合使用return语句。

与for…in语句的区别

用于遍历对象

• for…in不仅遍历自身，还会遍历手动添加的，甚至包括原型链的。

• 如果用于遍历数组的话,遍历得到的键名为字符串类型的数字值。

object.prototype.objcustom = function() {};
Array. prototype.arrcustom = function() {};
let iterable = [3,5,7];

iterable.foo = 'hello' ;
let result = object.getOwnPropertyNames(iterable);
console.log(result);

for (let i in iterable) {
    console.log(i);// logs o，1，2，"foo","arrcustom","objcustom"
}

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

console.log(result);// Object [Generator] {}

// 定义一个生成器函数
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 }

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 }