迭代器

1迭代器----帮助我们对某个数据结构进行遍历的对象---有

简单实现可以对数组进行遍历的对象：

const names = ['abc', 'cba', 'nba']
    //创建一个迭代器对象来访问数组
let index = 0
const namesIterator = {
    next: function() {
        if (index < names.length) {
            return { done: false, value: names[index++] }
        } else {
            return { done: true, value: undefined }
        }
    }
}
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());

 

 2：上面已经实现了一个简单的数组迭代器，但是如果我们想让其他数组生成迭代器呢，我们可以构造一个生成迭代器的函数：

function creatrArrIterator(arr) {
    let index = 0
    return {
        next: function() {
            if (index < arr.length) {
                return { done: false, value: arr[index++] }
            } else {
                return { done: true, value: undefined }
            }
        }
    }
}
const names = ['tyy', 'tsf', 'zjj']
const nums = [13, 14, 520]
const namesIterator = creatrArrIterator(names)
const numsIterator = creatrArrIterator(nums)
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(numsIterator.next());
console.log(numsIterator.next());
console.log(numsIterator.next());
console.log(numsIterator.next());
//创建无限的迭代器 done一直为false
function creatNumberItertor() {
    let index = 0
    return {
        next: function() {
            return { done: false, value: index++ }
        }
    }
}
const NumberItertor = creatNumberItertor()
console.log(NumberItertor.next());
console.log(NumberItertor.next());
console.log(NumberItertor.next());
console.log(NumberItertor.next());
console.log(NumberItertor.next());
console.log(NumberItertor.next());

 

3:可迭代对象---我们获取一个数组时，需要自己创建索引，再创建一个迭代器对象，但是当我们对这些一起进行封装就变成了一个可迭代对象（注意与迭代器区分） 

const iterableObj = {
        names: ['abc', 'cba', 'nba'],
        //返回一个迭代器
        [Symbol.iterator]: function() {
            //迭代器访问的是外层作用域的index所以++操作没有问题
            let index = 0
            console.log(this);
            return {
                //变成箭头函数this就去找上层作用域的this
                next: () => {
                    if (index < this.names.length) {
                        //一个对象不是作用域 nams在外层作用域找不到全局作用域也找不到
                        return { done: false, value: this.names[index++] }
                    } else {
                        return { done: true, value: undefined }
                    }
                }
            }

        }
    }
    //每次都会生成一个新的迭代器
console.log(iterableObj[Symbol.iterator]);
const iterator = iterableObj[Symbol.iterator]()
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
//for...of可以遍历的东西必须是一个可迭代对象 for..in的本质
for (const item of iterableObj) {
    console.log(item);
}

4：原生迭代器对象---本身就是一个课可迭代对象--String,Array,Map/Set等等

const iterableObj = {
        names: ["abc", "cba", "nba"],
        [Symbol.iterator]: function() {
            let index = 0
            return {
                next: () => {
                    if (index < this.names.length) {
                        return { done: false, value: this.names[index++] }
                    } else {
                        return { done: true, value: undefined }
                    }
                }
            }
        }
    }
    //String
const str = "I am happy"
for (const s of str) {
    console.log(s);
}
//Array
const arr = ['tyy', 'zjj']
for (const a of arr) {
    console.log(a);
}
const set1 = Array.from(str)
for (const s1 of set1) {
    console.log(s1);
}
//Map/Set
const map = new Map([
    [{ name: 'obj1' }, "aaa"],
    [{ name: 'obj2' }, "bbb"],
    [1, "ccc"]
])
for (const m of map) {
    console.log(m);
}
const set = new Set(iterableObj)
for (const s of set) {
    console.log(s);
}
//arguments对象
function foo(x, y, z) {
    for (const arg of arguments) {
        console.log(arg);
    }
}
foo(10, 20, 30)

5：可迭代对象的应用

//1：for..of场景
//2:展开语法
const iterableObj = {
    names: ['tyy', 'tsf', 'zjj'],
    [Symbol.iterator]: function() {
        let index = 0
        return {
            next: () => {
                if (index < this.names.length) {
                    return { done: false, value: this.names[index++] }
                } else {
                    return { done: true, value: undefined }
                }
            }
        }
    }


}
const names = ['tyy', 'tsf', 'zjj']
const newnames = [...names, ...iterableObj]
    //3:解构赋值
const obj = { name: 'tsf', age: 22 }
const newobj = {...obj }
console.log(newobj);
const [name1, name2] = iterableObj
//ES9新增的一个特性
const { name, age } = obj
console.log(name1);
console.log(name);
//4:创建一些其他对象
const set1 = new Set(iterableObj)
const set2 = new Set(names)

const arr1 = Array.from(iterableObj)

// 5.Promise.all
Promise.all(iterableObj).then(res => {
    console.log(res)
})