2024-07-21 深入JavaScript高级语法九——迭代器和生成器

最新推荐文章于 2024-08-29 11:08:48 发布
最新推荐文章于 2024-08-29 11:08:48 发布
阅读量1k 收藏 28
点赞数 11
分类专栏： js学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41068717/article/details/140588083
版权

目录

1、迭代器

1.1、什么是迭代器

  • 迭代器（ iterator )，是确使用户可在容器对象（ container ，例如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节。
  • 其行为像数据库中的光标，迭代器最早出现在1974年设计的 CLU 编程语言中；
  • 在各种编程语言的实现中，迭代器的实现方式各不相同，但是基本都有迭代器，比如 Java 、 Python 等；
  • 从迭代器的定义我们可以看出来，迭代器是帮助我们对某个数据结构进行遍历的对象。
  • 在 JavaScript 中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议( iterator protocol ):
  • 迭代器协议定义了产生一系列值（无论是优先还是无限个）的标准方式；
  • 那么在 js 中这个标准就是一个特定的 next 方法；
  • next 方法有如下的要求：
  • 一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象：
  • done ( boolean )
    √ 如果迭代器可以产生序列中的下一个值，则为 false 。（这等价于没有指定 done 这个属性。)
    √ 如果迭代器已将序列迭代完毕，则为 true 。这种情况下， value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。
  • value
    √ 迭代器返回的任何 JavaScript 值。 done 为 true 时可省略。

1.2、编写一个迭代器

  • 编写一个数组迭代器：
const names = ["a", 'b', 'c']

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()); // { done: false, value: 'a' }
console.log(namesIterator.next()); // { done: false, value: 'b' }
console.log(namesIterator.next()); // { done: false, value: 'c' }
console.log(namesIterator.next()); // { done: true, value: undefined }
  • 创建一个生成迭代器的函数：
function createArrayIterator(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 = ["a", 'b', 'c']
const namesIterator = createArrayIterator(names)

console.log(namesIterator.next()); // { done: false, value: 'a' }
console.log(namesIterator.next()); // { done: false, value: 'b' }
console.log(namesIterator.next()); // { done: false, value: 'c' }
console.log(namesIterator.next()); // { done: true, value: undefined }
  • 创建一个无限的迭代器（done一直为false，仅做了解）：
function createNumberIterator() {
    let index = 0
    return {
        next: function() {
            return { done: false, value: index++ }
        }
    }
}

const numberIterator = createNumberIterator()
console.log(numberIterator.next()); // { done: false, value: 0 }
console.log(numberIterator.next()); // { done: false, value: 1 }
console.log(numberIterator.next()); // { done: false, value: 2 }
console.log(numberIterator.next()); // { done: false, value: 3 }

2、可迭代对象

2.1、什么是可迭代对象

  • 上面的代码整体来说看起来是有点奇怪的：
  • 我们获取一个数组的时候，需要自己创建一个 index 变量，再创建一个所谓的迭代器对象；
  • 事实上我们可以对上面的代码进行进一步的封装，让其变成一个可迭代对象；
  • 什么又是可迭代对象呢？
  • 它和迭代器是不同的概念；
  • 当一个对象实现了 iterable protocol 协议时，它就是一个可迭代对象；
  • 这个对象的要求是必须实现＠@iterator 方法，在代码中我们使用 Symbol.iterator 访问该属性；
  • 但我们要问一个问题，我们转成这样的一个东西有什么好处呢？
  • 当一个对象变成一个可迭代对象的时候，进行某些迭代操作，比如 for…of 操作时，其实就会调用它的@@iterator 方法；

2.2、创建一个可迭代对象

const iterableObj = {
    names: ['a', 'b', 'c'],
    [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 }
                }
            }
        }
    }
}

// 第一次调用iterableObj[Symbol.iterator]函数
const iterator = iterableObj[Symbol.iterator]()
console.log(iterator.next()); // { done: false, value: 'a' }
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

// 第二次调用iterableObj[Symbol.iterator]函数
const iterator1 = iterableObj[Symbol.iterator]()
console.log(iterator1.next()); // { done: false, value: 'a' }
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());

2.3、原生迭代器对象

  • 事实上我们平时创建的很多原生对象已经实现了可迭代协议，会生成一个迭代器对象的：
  • String、Array、Map、Set、arguments 对象、NodeList 集合；
  • 数组：
const names = ['a', 'b', 'c']

console.log(names[Symbol.iterator]);

for (const item of names) {
    console.log(item);
}
  • Map/Set：
const set = new Set()
set.add(10)
set.add(100)
set.add(1000)

console.log(set[Symbol.iterator]);

for (const item of set) {
    console.log(item);
}
  • arguments：
function foo(x, y, z) {
    console.log(arguments[Symbol.iterator]);
    for (const item of arguments) {
        console.log(item);
    }
}

foo(10, 20, 30)

2.4、可迭代对象的应用

  • 那么这些东西可以被用在哪里呢？
  • JavaScript中语法：for…of 、展开语法（ spread syntax )、yield*（后面讲）、解构赋值（ Destructuring_assignment );
  • 创建一些对象时：new Map([Iterable])、new WeakMap([iterable])、new Set([iterable])、new WeakSet([iterable]);
  • 一些方法的调用：Promise.all(iterable)、Promise.race(iterable)、Array.from(iterable);
  • 展开语法：
const iterableObj = {
    names: ['a', 'b', 'c'],
    [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 = ['1','2','3']

const newNames = [...names, ...iterableObj]

console.log(newNames) // [ '1', '2', '3', 'a', 'b', 'c' ]

注意：对象中的展开语法用的不是迭代器，而是ES9（ES2018）中新增的一个特性。

const obj = { name: '张三', age: 18 }
const newObj = { ...obj }
console.log(newObj);
  • 解构语法：
const names = ['1','2','3']
const [name1, name2] = names
console.log(name1, name2) // 1 2

注意：对象中的解构语法用的不是迭代器，而是ES9（ES2018）中新增的一个特性。

const obj = { name: '张三', age: 18 }
const {name, age} = obj
console.log(name, age) // 张三 18
  • 创建一些其他对象时
const iterableObj = {
    names: ['a', 'b', 'c'],
    [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 = ['1','2','3']

const set1 = new Set(iterableObj) // Set(3) { 'a', 'b', 'c' }
const set2 = new Set(names) // Set(3) { '1', '2', '3' }

const arr1 = Array.from(iterableObj) // // [ 'a', 'b', 'c' ]

2.5、自定义类的迭代

  • 在前面我们看到 Array 、Set 、String 、Map 等类创建出来的对象都是可迭代对象：
  • 在面向对象开发中，我们可以通过 class 定义一个自己的类，这个类可以创建很多的对象；
  • 如果我们也希望自己的类创建出来的对象默认是可迭代的，那么在设计类的时候我们就可以添加上@@iterator 方法；
  • 案例：创建一个 classroom 的类
  • 教室中有自己的位置、名称、当前教室的学生；
  • 这个教室可以进来新学生（ push );
  • 创建的教室对象是可迭代对象；
class Classroom {
    constructor(address, name, students) {
        this.address = address
        this.name = name
        this.students = students
    }

    entry(newStudent) {
        this.students.push(newStudent)
    }

    [Symbol.iterator]() {
        let index = 0
        return {
            next: () => {
                if (index < this.students.length) {
                    return { done: false, value: this.students[index++] }
                } else {
                    return { done: true, value: undefined }
                }
            },
            return: () => {
                console.log("迭代器提前终止了")
                return { done: true, value: undefined }
            }
        }
    }

}

const classroom = new Classroom('3栋1楼101', '多媒体教室', ['张三', '李四', '王五'])
classroom.entry('王二')

for (const stu of classroom) {
    console.log(stu)
    if (stu === '王二') break
}

2.6、迭代器的中断

  • 迭代器在某些情况下会在没有完全迭代的情况下中断：
  • 比如遍历的过程中通过 break 、 continue 、 return 、 throw 中断了循环操作；
  • 比如在解构的时候，没有解构所有的值；
  • 那么这个时候我们想要监听中断的话，可以添加 return 方法：
 [Symbol.iterator]() {
    let index = 0
    return {
        next: () => {
            if (index < this.students.length) {
                return { done: false, value: this.students[index++] }
            } else {
                return { done: true, value: undefined }
            }
        },
        return: () => {
            console.log("迭代器提前终止了")
            return { done: true, value: undefined }
        }
    }
}

//...相同代码，不重复书写

for (const stu of classroom) {
    console.log(stu)
    if (stu === '王二') break
}

3、生成器

3.1、什么是生成器

  • 生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。
  • 平时我们会编写很多的函数，这些函数终止的条件通常是返回值或者发生了异常。
  • 生成器函数也是一个函数，但是和普通的函数有一些区别：
  • 首先，生成器函数需要在 function 的后面加一个符号：*
  • 其次，生成器函数可以通过 yield 关键字来控制函数的执行流程；
  • 最后，生成器函数的返回值是一个 Generator （生成器）:
    √ 生成器事实上是一种特殊的迭代器；
    √ MDN：Instead , they return a special type of iterator , called a Generator .

3.2、生成器函数的执行流程

  • 以下面foo函数为例，我们发现生成器函数 foo 的执行体压根没有执行，它只是返回了一个生成器对象。
  • 那么我们如何可让它执行函数中的东西呢？调用 next 即可；
  • 我们之前学习迭代器时，知道迭代器的 next 是会有返回值的；
  • 但是我们很多时候不希望 next 返回的是一个 undefined ，这个时候我们可以通过 yield 来返回结果；
function* foo() {
    console.log('函数开始执行');
    const value1 = 100
    console.log(value1);
    yield value1

    const value2 = 200
    console.log(value2);
    yield value2

    const value3 = 300
    console.log(value3);
    yield value3

    console.log('函数执行结束');
}

// 返回生成器
const generator = foo()

// 执行到第一个yield，并且暂停
console.log(generator.next()); // 函数开始执行 100 { value: 100, done: false }

// 执行到第二个yield，并且暂停
console.log(generator.next()); // 200 { value: 200, done: false }

// 执行到第三个yield，并且暂停
console.log(generator.next()); // 300 { value: 300, done: false }

// 执行剩余的代码
console.log(generator.next()); // 函数执行结束 { value: undefined, done: true }

3.3、生成器传递参数——next函数

  • 函数既然可以暂停来分段执行，那么函数应该是可以传递参数的，我们是否可以给每个分段来传递参数呢？
  • 答案是可以的；
  • 我们在调用 next 函数的时候，可以给它传递参数，那么这个参数会作为上一个 yield 语句的返回值；
  • 注意：也就是说我们是为本次的函数代码块执行提供了一个值；
function* foo(initial) {
    console.log('函数开始执行');
    
    const value1 = yield initial + 'aaa'
    const value2 = yield value1 + 'bbb'
    const value3 = yield value2 + 'ccc'


    console.log('函数执行结束');
}

// 返回生成器
const generator = foo('000')

const result1 = generator.next()
console.log('result1:', result1); // result1: { value: '000aaa', done: false }

const result2 = generator.next(result1.value)
console.log('result2:', result2); // result2: { value: '000aaabbb', done: false }

const result3 = generator.next(result2.value)
console.log('result3:', result3); // result3: { value: '000aaabbbccc', done: false }

3.4、生成器提前结束——return函数

  • 还有一个可以给生成器函数传递参数的方法是通过 return 函数：
  • return 传值后这个生成器函数就会结束，之后调用 next 不会继续生成值了；
function* foo(initial) {
    console.log('函数开始执行');
    
    const value1 = yield initial
    // 不会走到这里
    console.log('value1:', value1);
    const value2 = yield value1
    const value3 = yield value2


    console.log('函数执行结束');
}

// 返回生成器
const generator = foo('000')

const result1 = generator.next()
console.log('result1:', result1); // result1: { value: '000', done: false }

const result2 = generator.return('123')
console.log('result2:', result2); // result2: { value: '123', done: true }

const result3 = generator.next()
console.log('result3:', result3); // result3: { value: undefined, done: true }

3.5、生成器抛出异常——throw函数

  • 除了给生成器函数内部传递参数之外，也可以给生成器函数内部拋出异常：
  • 抛出异常后我们可以在生成器函数中捕获异常；
  • 但是在 catch 语句中不能继续 yield 新的值了，但是可以在 catch 语句外使用 yield 继续中断函数的执行；
function* foo() {
    console.log('函数开始执行');

    try {
        yield 'hhh'
    } catch(err) {
        console.log('内部捕获异常：', err);
        // 实际代码测试时：不会走到这句yield；但是如果不加的话，也不会走到yield 222
        yield 111
    }

    yield 222

    console.log('函数结束执行');
}

const generator = foo()
console.log('value1：',generator.next()); // value1： { value: 'hhh', done: false }
generator.throw('error message') // 内部捕获异常： error message，函数结束执行

console.log('value2：',generator.next()); // value2： { value: 222, done: false } 
console.log('value3：',generator.next()); // 函数结束执行，value3： { value: undefined, done: true }

3.6、生成器替代迭代器使用

  • 我们发现生成器是一种特殊的迭代器，那么在某些情况下我们可以使用生成器来替代迭代器
  • 事实上我们还可以使用 yield*来生产一个可迭代对象：
  • 这个时候相当于是一种 yield 的语法糖，只不过会依次迭代这个可迭代对象，每次迭代其中的一个值；
  • 示例一
function* createArrayIterator(arr) {
    // 1.第一种写法
    // yield 'a'
    // yield 'b'
    // yield 'c'

    // 2.第二种写法
    // for (const item of arr) {
    //     yield item
    // }

    // 3.第三种写法
    yield* arr

}

const names = ['a', 'b', 'c']
const namesIterator = createArrayIterator(names)
console.log(namesIterator.next()); // { value: 'a', done: false }
console.log(namesIterator.next()); // { value: 'b', done: false }
console.log(namesIterator.next()); // { value: 'c', done: false }
  • 示例二
// 迭代器写法
// function createNumberIterator() {
//     let index = 0
//     return {
//         next: function() {
//             return { done: false, value: index++ }
//         }
//     }
// }

// 改成生成器实现
function* createNumberIterator() {
    let index = 0
    while(true) {
        yield index++
    }
}

const numberIterator = createNumberIterator()
console.log(numberIterator.next()); // { done: false, value: 0 }
console.log(numberIterator.next()); // { done: false, value: 1 }
console.log(numberIterator.next()); // { done: false, value: 2 }
console.log(numberIterator.next()); // { done: false, value: 3 }
  • 示例三
class Classroom {
    constructor(address, name, students) {
        this.address = address
        this.name = name
        this.students = students
    }

    entry(newStudent) {
        this.students.push(newStudent)
    }

    foo = () => {
        console.log('foo~');
    }

    // 1.写法一
    // [Symbol.iterator] = function*() {
    //     yield* this.students
    // }

    // 2.写法二
    *[Symbol.iterator]() {
        yield* this.students
    }

}

const classroom = new Classroom('3栋1楼101', '多媒体教室', ['张三', '李四', '王五'])
classroom.entry('王二')

for (const stu of classroom) {
    console.log(stu) // 张三 李四 王五
    if (stu === '王五') break
}

3.7、异步代码的处理方案

// 模拟一个异步请求方法
function requestData(url) {
    return new Promise((resolve) => {
        // 模拟网络请求
        setTimeout(() => {
            // 拿到请求的结果
            resolve(url)
        }, 2000)
    })
}

/**
 * 需求：
 * 1> url: why -> res: why
 * 2> url: res + 'aaa' -> res: whyaaa
 * 3> url: res + 'bbb' -> res: whyaaabbb
 */
  • 方案一：回调
// 回调地狱
requestData('why').then(res => {
    requestData(res + 'aaa').then(res => {
        requestData(res + 'bbb').then(res => {
            console.log('res:', res); // res: whyaaabbb
        })
    })
})
  • 方案二：Promise中then的返回值来解决
requestData('why').then(res => {
    return requestData(res + 'aaa')
}).then(res => {
    return requestData(res + 'bbb')
}).then(res => {
    console.log('res:', res); // res: whyaaabbb
})
  • 方案三：Promise + generator实现
function* getData() {
    const res1 = yield requestData('why')
    const res2 = yield requestData(res1 + 'aaa')
    const res3 = yield requestData(res2 + 'bbb')
    console.log('res:', res3); // res: whyaaabbb
}

const generator = getData()
generator.next().value.then(res => {
    generator.next(res).value.then(res => {
        generator.next(res).value.then(res => {
            generator.next(res)
        })
    })
})

优化上面的generator代码：

function execGenerator(genFn) {
    const generator = genFn()
    function exec(res) {
        const result = generator.next(res)
        if (result.done) {
            return result.value
        }
        result.value.then(res => {
            exec(res)
        })
    }
    exec()
}

execGenerator(getData)

引用第三方包，自动执行generator，功能同上：

const co = require('co')
co(getData)
  • 方案四：async/await
async function getData() {
    const res1 = await requestData('why')
    const res2 = await requestData(res1 + 'aaa')
    const res3 = await requestData(res2 + 'bbb')
    console.log('res:', res3); // res: whyaaabbb
}

getData()

4、async-await-事件循环

4.1、异步函数 async function

  • async关键字用于声明一个异步函数：
  • async是 asynchronous单词的缩写，异步、非同步；
  • sync是 synchronous单词的缩写，同步、同时；
  • async 异步函数可以有很多中写法：
// 1.写法一
async function foo1() {}

// 2.写法二
const foo2 = async function() {}

// 3.写法三
const foo3 = async () => {}

// 4.类里面写异步函数
class Person {
    async foo() {}
}

4.2、async——异步函数的执行流程

  • 异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。
  • 异步函数有返回值时，和普通函数会有区别：
  • 情况一：异步函数也可以有返回值，但是异步函数的返回值会被包裹到 Promise.resolve 中；
  • 情况二：如果我们的异步函数的返回值是 Promise , Promise.resolve 的状态会由 Promise 决定；
  • 情况三：如果我们的异步函数的返回值是一个对象并且实现了 thenable ，那么会由对象的 then 方法来决定；
async function foo() {
    console.log('foo function start');
    console.log('其他逻辑代码');
    console.log('foo function end');

    // 1.直接返回一个值
    // return 'aaa'

    // 2.返回thenable
    // return {
    //     then: function(resolve) {
    //         resolve('aaa')
    //     }
    // }

    // 3.返回promise
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('aaa')
        }, 2000)
    })
}

// 异步函数的返回值一定是一个Promise
const promise = foo()
promise.then(res => {
    console.log('res:', res); // res: aaa
})
  • 如果我们在 async 中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为 Promise 的 reject 来传递；
async function foo() {
    console.log('foo function start');
    console.log('其他逻辑代码');


    // 异步函数中的异常，会被作为异步函数返回的Promise的reject的值
    throw new Error('error message')

    // 不会走到
    console.log('foo function end');
}

// 异步函数的返回值一定是一个Promise
const promise = foo()
promise.catch(err => {
    console.log('err:', err); // err: Error: error message2
})

console.log('后续还有代码');

4.3、await关键字

  • async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。
  • await 关键字有什么特点呢？
  • 通常使用 await 是后面会跟上一个表达式，这个表达式会返回一个 Promise ;
  • 那么 await 会等到 Promise 的状态变成 fulfilled 状态，之后继续执行异步函数；
  • 如果 await 后面是一个普通的值，那么会直接返回这个值；
  • 如果 await 后面是一个 thenable 的对象，那么会根据对象的 then 方法调用来决定后续的值；
// 模拟一个异步请求方法
function requestData(url) {
    return new Promise((resolve) => {
        // 模拟网络请求
        setTimeout(() => {
            // 拿到请求的结果
            resolve(url)
        }, 2000)
    })
}

async function foo() {
    // 1.跟上一个Promise
    // const res1 = await requestData('aaa')

    // 2.跟上一个普通值
    // const res1 = await 'aaa'

    // 3.跟上一个thenable
    const res1 = await {
        then: function(resolve) {
            resolve('aaa')
        }
    }

    console.log('后面的代码', res1); // 后面的代码 aaa
}

foo()
  • 如果 await 后面的表达式，返回的 Promise 是 reject 的状态，那么会将这个 reject 结果直接作为函数的 Promise 的 reject 值；
// 模拟一个异步请求方法
function requestData(url) {
    return new Promise((resolve, reject) => {
        // 模拟网络请求
        setTimeout(() => {
            // 拿到请求的结果
            reject(url)
        }, 2000)
    })
}

async function foo() {
    // 跟上的Promise返回的是reject
    const res1 = await requestData('aaa')
    // 不会走到
    console.log('后续代码', res1);
}

foo().catch(err => {
    console.log('err:', err); // err: aaa
})
长乐呀
关注
专栏目录
JavaScript迭代器
yuwuTaTa的博客
03-05 229
在软件开发领域，iterator得意思就是按照顺序反复多次执行一段程序，通常会有明确的终止条件。 ES新增两个高级特性：迭代器和生成器。 循环是迭代机制的基础，这是因为它可以指定迭代的次数，以及每次迭代要执行的操作。每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的。 迭代会在一个有序集合上进行。（有序可以理解为集合所有项都按照既定的顺序被遍历到，特别是开始和结束项有明确的定义。）数组是js中有序集合的最典型例子。 数组有已知的长度，且数组每一项都可以通过索引获取，所..
JavaScript的迭代器与生成器
小罗的博客
07-05 995
迭代器（iterator），是确使用户可在容器对象(container，例如链表或数组)上遍访的对象，使用该接口无需关系对象的内部实现细节。其行为像数据库中的光标，迭代器最早出现在1974年设计的CLU编程语言中；在各种编程语言的实现中，迭代器的实现方式各不相同，但是基本都有迭代器，比如Java，Python等； 在迭代器......
js 深入理解迭代器
最新发布
weiweiliude2的专栏
08-29 1019
迭代器的底层原理，自定义迭代器
JS的迭代器
一步一个脚印，踏实努力，向着目标前进
06-27 3343
在JavaScript中，迭代器（Iterator）是一种遍历任何可迭代对象（Iterable）的通用接口。迭代器是ES6规范中引入的一种新的数据类型，用于遍历各种数据结构，包括数组、对象、Map、Set等。在语言层面上，迭代器可以被看做一个有next方法的对象，每次调用next方法都可以返回一个值对象（Value）和一个布尔值（Done），表示是否遍历结束。其中，Value代表当前迭代项的取值，Done代表迭代是否结束。
JavaScript之迭代器
赤蓝紫の博客
05-22 6262
JavaScript之迭代器 看红宝书+查资料，重新梳理JavaScript的知识。 迭代就是指可以从一个数据集中按照一定的顺序，不断取出数据的过程。 那么迭代和遍历有啥子区别呢？ 迭代强调依次取数据的过程，不保证把所有的数据都取完 遍历强调的是要把所有的数据依次全部取出 在JavaScript中，迭代器是能调用 next方法实现迭代的一个对象，该方法返回一个具有两个属性的对象。 value：可迭代对象的下一个值 done：表示是否已经取出所有的数据了。 false表示还有数据， true表示
JS迭代器与生成器
前端小白
04-01 1291
1.生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。平时我们会编写很多的函数，这些函数终止的条件通常是返回值或者发生了异常。2.生成器是一个函数，单数和普通函数有一些区别：生成器函数需要在function后面加一个符号生成器函数可以通过yield关键字来控制函数的执行流程生成器函数的返回值是一个Generator生成器，且生成器是一种特殊的迭代器3.代码举例console.log('函数开始执行');yield 123。
JavaScript中的迭代器和生成器详解
01-19
在JavaScript 1.7中，迭代器和生成器在JavaScript核心语法中带来了新的迭代机制，而且还提供了定制 for…in 和 for each 循环行为的机制。 迭代器 迭代器是一个每次访问集合序列中一个元素的对象，并跟踪该序列中...
详解ES6语法之可迭代协议和迭代器协议
08-28
ECMAScript 2015 中的可迭代协议和迭代器协议 ECMAScript 2015 中引入了两个重要的协议：可迭代协议和迭代器协议。这些协议允许 JavaScript 对象定义或定制它们的迭代行为，并提供了一种统一的访问机制来处理不同的...
掌握JavaScript中的迭代器和生成器，顺便了解一下async、await的原理.doc
07-10
JavaScript 中的迭代器和生成器，async/await 原理详解 迭代器（Iterator）是确使用户在容器对象（链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节。迭代器是一个对象，可用于帮助我们对某个数据...
js代码-异步生成器和异步迭代器的简单示例。
07-16
总结起来，异步生成器和异步迭代器是现代JavaScript异步编程的重要组成部分，它们提供了更优雅、更易读的解决方案来处理复杂的异步任务。通过理解和熟练运用这些特性，开发者可以编写出更加高效、可维护的代码。
Modern-JavaScript-Syntaxes:现代JavaScript语法
05-08
本指南将深入探讨现代JavaScript语法中的关键概念，帮助你更好地理解和利用这些新特性。 1. **箭头函数**： 箭头函数提供了一种简洁的函数定义方式，比如 `(params) => { return expression; }` 可以简化为 `...
js迭代器与生成器
风天语的博客
08-11 690
迭代器，生成器，async和await，js异步的最终解决方案
JavaScript的迭代器
weixin_45012866的博客
11-26 187
let arr=["we","are","foo"]; //迭代器工厂函数 console.log(arr[Symbol.iterator]); //迭代器，调用迭代器工厂函数生成一个迭代器 let iter=arr[Symbol.iterator](); console.log(iter); //执行迭代 console.log(iter.next()); console.log(iter.next()); console.log(iter.next()); console.log(iter.next()
javascript迭代器
相信明天的博客
12-08 3365
迭代器（Iterator）是一种机制（接口）:为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作[for of 循环] 1.拥有next方法用于依次遍历数据结构的成员 2.每次遍历返回的结果是一个对象{done:false,value:xxx} done:记录遍历是否完成 value:当前遍历的结果 必须暴露一个属性作为“默认迭代器”，而且这个属性必须使用特殊的 Symbol.iterator 作为键。这个默认迭代器属性必须引用一个迭代器工厂函数，调用这个工
js中的迭代器与生成器(详解)
m0_63831957的博客
07-17 1947
自定义遍历数据，要想起迭代器name'yiban',friend['duan','zhou','zhang','wei'],//索引变量//创建一个指针对象return{//创建next方法(必须)next()=>{//这里箭头函数解决this指向问题valuedonefalse};index++;}else{return{valuedonetrue}}}}}}}...
JavaScript高级程序设计第四版学习记录-第七章迭代器与生成器
qiao_qiao_happy的博客
02-10 628
在软件开发领域，“迭代”的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。 ECMAScript 6 规范新增了两个高级特性：迭代器和生成器。使用这两个特性，能够更清晰、高效、方便地实现迭代。 7.1 理解迭代 在 JavaScript 中，计数循环就是一种最简单的迭代： for (let i = 1; i <= 10; ++i) { console.log(i); } 循环是迭代机制的基础，这是因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之
JavaScript 迭代器（Iterator）和生成器（Generator）
梅花寺
05-29 1213
说起迭代，或许大多数人想到的就是循环，但是迭代和循环并不是等价的，循环是迭代机制的基础。那么什么是迭代呢？个人理解的是按照顺序重复多次执行同一段程序，通常会有明确的中止条件。 在ECMAScript 6规范中新增了两个高级特性：迭代器和生成器，将迭代的概念直接带入核心语言，并提供了一种机制来自定义for...of循环的行为。 本文就来探寻一下这两个新特性。 一、迭代协议 迭代协议具体分为可迭代协议和迭代器协议。 1.1 可迭代协议 （1）什么是可迭代协议 可迭代协议允许 JavaScript 对象定义或定
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值