脚本宝典收集整理的这篇文章主要介绍了

【JS基础】ES6语法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

iterator迭代器

在ES6之前遍历数组的方法有以下四种:

// 第一种
for(var i = 0; i < array.length; i++){
    console.log(array[i])
}
// 第二种
array.forEach(function(item,index){
    console.log(item)
})
// 第三种
for(var index in array){
    console.log(array[index])
}
// 第四种
for(var value of array){
    console.log(value)
}

在上面的遍历方式中,第二种方式有一种小缺陷,就是不能使用break语句中断执行,也不能使用return语句返回到外层函数。它会一直遍历完数组的所有元素。第三种方式是一个更糟糕的方式,在遍历过程中,赋值给index的不是number类型,而是字符串类型,for-in循环除了遍历数组外,还会遍历自定义属性,甚至是遍历出原型链上的属性。并且for-in的遍历顺序不能得到保障。

第四种方法是ES6中新增的遍历数组的方法,它可以正确响应breakcontinuereturn语句,for-in语句除了能遍历数组外,还能遍历类数组对象,如DOM的NodeList对象,arguments对象,也能遍历字符串、Set对象、Map对象。

for-of循环语句能够遍历各种集合的。是因为这些对象都有一个迭代器的方法,迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署了iterator接口,就可以完成遍历操作。比如下面这种情况:

let obj = {
    data:['hello','world'],
    [Symbol.iterator](){
        const _self = this
        let index = 0
        return {
            next(){
                if(index < _self.data.length){
                    return {value:_self.data[index++],done:false}
                }else{
                    return {value:undefined,done:true}
                }
            }
        }
    }
}
for(var value of obj){
    console.log(value)    // 输出   hello  world
}

迭代器也可以直接使用Array默认的iterator。

// 也可以直接使用Array的迭代器
let newObj = {
    0:'a',
    1:'b',
    2:'c',
    [Symbol.iterator]:Array.prototype[Symbol.iterator]
}
for(var value of newObj){
    console.log(value)   // 输出 a b c
}

for-of循环语句其实是调用遍历对象的[Symbol.iterator]方法,该方法返回一个iterator,里面有一个next方法,for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的done属性为ture时结束循环。除了添加iterator外还可以使用yield实现循环:

let obj = {
    [Symbol.iterator]: function* (){
        for(var i = 0; i < 100; i++){
            yield i
        }
    }
}
for(var value of obj){
    console.log(value)
}

iterator的遍历过程

  1. 创建一个指针对象,指向当前数据结构的起始位置,也就是说,遍历器对象的本质就是一个指针对象。
  2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。
  3. 不断调用指针对象的next方法,直到它指向数据结构的结束位置。

当使用for-of循环遍历某个数据结构时,该循环会自动去寻找iterator接口。只要一个对象含有iterator接口,那么该对象就可以被遍历。

使用iterator的场景

let arr = [1,2,3,5]
let [first,...second] = arr
  • 扩展运算符
var str = 'hello'
[...str]    //  ['h','e','l','l','o']

yield*后面跟的是一个可遍历的结构,它就会调用该结构的遍历器接口。

let generator = function* (){
    yield* [2,3,4]
}
  • 其他场合

由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口。比如for-of、Promise.all()、Promise.race()

生成器Generators

生成器函数与普通函数不同的点:普通函数使用function关键字声明,生成器函数使用function*声明,在生成器函数内部,有类似return语法的yeild关键字,与return不同的是,生成器函数可以yeild多次,在函数执行过程中,遇到yield表达式立即暂停,后续可恢复执行状态。

function* question(name){
    yield "你好" + name + '!'
    yield "希望你能喜欢"
    yield "下次再见"
    return '拜拜'
}
var iter = question('小明')
iter.next()    // {value: "你好小明!", done: false}
iter.next()   // {value: "希望你能喜欢", done: false}
iter.next()    // {value: "下次再见", done: false}
iter.next()    // {value: '拜拜', done: true}

generator函数在调用后,并不会立即执行,而是返回一个iterator对象,每次生成器执行到yield语句后,生成器函数的堆栈结构(本地变量、参数、临时值、生成器内部当前的执行位置)被移除堆栈。然而,生成器对象保留了对这个堆栈结构的引用,所以稍后调用.next()方法可以重新激活堆栈结构并且继续执行。不过生成器不是线程,它仍然处于JS单线程里。

如果运行到后面没有yield表达式,就会一直运行到函数结束,直到return语句为止,并将return表达式的值赋值给最后返回对象的value值,如果没有return语句,则返回对象的value值为undefined
generator生成器是iterator的生成函数,执行generator函数,返回的就是iterator迭代器。

next方法的参数

function* gen(){
    for(let i = 0; true; i++){
        let reset = yield i
        if(reset){
            i = -1
        }
    }
}
let g = gen()
g.next()     // {value:0,done:false}
g.next(true)    // {value:0;done:false}

yield表达式本身没有返回值,或者说总是返回undefined,next方法可以带一个参数,该参数就会被作为上一个yeild表达式的值。generator从暂停状态到恢复运行,它的上下文状态是不变的,通过next方法传入参数,可以在generator函数开始运行之后,继续向函数内部注入值。

throw方法

function* gen(){
    try {
        yield '123'
    }catch(e){
        console.log('内部捕获',e)
    }
}
let g = gen()
g.next()
try {
    g.throw('a')
    g.throw('b')
}catch(e){
    console.log('外部捕获','b')
}
// 内部捕获 a
// 外部捕获 b

上述代码中,遍历器对象g连续抛出错误,第一个错误被generator函数体内的catch语句捕获,第二次抛出错误时,由于catch语句已经执行过了,不会捕获该错误,所以这个错误由函数体外的catch捕获。如果函数内部没有try-catch语句,那么throw方法抛出的错误将被外部的try-catch捕获。遍历器对象g调用throw方法后,抛出的异常被generator函数体捕获以后,会附带执行下一条yield语句。一旦generator执行过程抛出错误,且没有被内部捕获,generator函数就不会执行下去了。如果此后再调用next方法,将返回对象{value:undefined,done:true}

return方法

function* gen(){
    yield 1;
    yield 2;
    yiled 3;
}
var g = gen()
g.next()      // {value:1,done:false}
g.return('end')  // {value:'end',done:true}
g.next()     // {value:undefined,done:true}

如果generator函数内部有try-finally代码块,那么return方法会推迟到finally代码块执行完毕再执行。

function* numbers () {
  yield 1;
  try {
    yield 2;
    yield 3;
  } finally {
    yield 4;
    yield 5;
  }
  yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }

next()、throw()、return()这三个方法都是让generator函数恢复执行,并且使用不同的语句替换yield表达式,next()是将yeild表达式替换成一个值,throw()是将yeild替换成一个throw语句,return()是将yield语句替换成一个return语句。

yield*

在generator函数内部再调用另一个generator函数,默认情况下是没有效果的,这个时候就需要用到yield*表达式,用来在一个generator函数内执行另一个generator函数。

总结

以上是脚本宝典为你收集整理的

【JS基础】ES6语法

全部内容,希望文章能够帮你解决

【JS基础】ES6语法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过