美文网首页
ES6---迭代器与生成器

ES6---迭代器与生成器

作者: 学的会的前端 | 来源:发表于2019-10-08 17:07 被阅读0次

字面量增强

原有字面量加强

  • 字面量的含义
    字面量就是构造出来的量,不要用new函数构造的量 ,写出来的内容就是他的值,就是字面量。
   1
    'asd'
    {}
    [1,2,3]
  • 非字面量
    new Object()
    不是字面量,是定义一个空对象
    new Array[1,2,3]
    不是字面量
  • 更安全的二进制字面量(0b1111101)

  • 更安全的八进制(0o767)

 ES5
     0777 // 八进制
     0888 //十进制
ES6
     0o777  //八进制
     0o888 //报错
  • 字符串支持Unicode,但是之前的错误形式也保留下来了。
    以前只支持两个字节,4个16进制,现在支持四个字节的unicode。
    Unicode与JavaScript详解
//ES5不支持4个字节,所以长度为2
//JavaScript只能处理UCS-2编码,造成所有字符在这门语言中都是2个字节,如果是4个字节的字
//符,会当作两个双字节的字符处理。
"𝌆" === '\uD834\uDF06'
"𝌆".length === 2

ES6新增了几个专门处理4字节码点的函数

 String.fromCodePoint() //从Unicode码点返回对应字符
 String.prototype.codePointAt() //从字符返回对应的码点

代码示例

String.fromCodePoint(0x2F804)
 // "你"
"你".length
 // 2
"你".codePointAt(0).toString(16)
// "2f804"
  • 码点表示法
JavaScript允许直接用码点表示Unicode字符,写法是"反斜杠+u+码点"。
'好' === '\u597D' // true

但是,这种表示法对4字节的码点无效。ES6修正了这个问题,只要将码点放在大括号内,就能正确识别。


bg2014121123.png
  • 正则表达式也支持Unicode(u标记)。(很少用)


    bg2014121124.png
  • 正则表达式添加y标记,支持粘滞匹配。(很少用)

Symbol和迭代器

  1. Symbol
  • ES5的基本数据类型
string | number | bool | undefined | null | onject
  • ES6增加了一种数据类型
增加的数据类型:Symbol()
  • 相关参考资料:
  1. JS 中的 Symbol 是什么?
  2. MDN: Symbol - JavaScript
  3. 阮一峰:ECMAScript 6入门

Symbol生成一个全局唯一的值。

  1. 迭代
  • 引入迭代
  var version = 0;
    function 发布(){
        version += 1;
        return version
    }

每次调用发布(),就会返回下一个版本就是迭代。(迭代的间距不确定,可以使1.1,1.2...)

代码截图.PNG
  • 迭代含义
    一个迭代对象,知道如何访问集合中的一项,并跟踪该序列中的当前位置,在JavaScript中,迭代器是一个对象,它提供一个next()方法,用来返回序列中的下一项。这个方法包括两个属性,donevalue。迭代对象一旦被创建,就可以反复调用next()
 //迭代
function 发布器(){
        var _value = 0
        var max = 10
        return {
            next: function(){
                _value += 1
               if(_value > max){
                   throw new Error('已经没有下一个了')
               }else if(_value === max){
                   return {
                       value: _value,
                       done:true
                   }
               }else {
                   return {
                       value: _value,
                       done: false
                   }
               }
            }
        }
    }

//理论上一旦done变成true,就不可以在继续next()
运行截图.PNG

生成器&for...of

  • 生成器就是迭代器生成的语法糖。
//上面迭代器代码的语法糖
function *发布器(){
        var version = 0
        while(true){
            version += 1
            yield version  // 每次迭代的结果yield出来
        }
    }

运行结果如下图,理论上不会结束


运行结果.PNG
  • for...of是迭代器访问的访问的语法糖

一个定义了迭代行为(迭代行为就是可以一直.next)的对象,比如在for...of中循环了哪些值。一些内置类型,如Array或Map具有默认的 迭代行为,而其他行为(如object)没有。

为了实现可迭代,一个对象必须实现@iterator方法,这意味着这个对象(或其原型链中的一个对象)必须带有Symbol.iterator键的属性。

如果一个东西能够被for..of使用,就是可以迭代的。

代码示例

array = [1,2,3]
//以前的语法(遍历)
 for(let key in array){
        console.log(key) //下标0,1,2
    }

for(let key in object){
        console.log(key) //遍历不报错
    }


//数组和对象都可以遍历,但是数组可以迭代,对象不可以迭代


//新的for...of语法(迭代)
 for(let key of array){
        console.log(key) //内容 1,2,3
    }
for(let key of object){
        console.log(key) //报错,对象是不可迭代的。
    }
代码运行结果截图.PNG
  • 要想使对象可以迭代,只需要为其定义一个方法
    object = {a: 'a',b: 'b',c: 'c'}
    object[Symbol.iterator] = function *(){
        let keys = Object.keys(object)
        for(let i = 0; i < keys.length; i++){
            yield object[keys[i]]
        }
    }
    for(let value of object){
        console.log(value)
    }
捕获.PNG
  • 数组和对象的区别

遍历的时候,其实数组是没有顺序的,只是自己为其添加了一个顺序。按照i=0,i++的顺序遍历的。

  1. 数组的__proto__指向Array.prototype
  2. 对象的__proto__指向Object.prototype

相关文章

网友评论

      本文标题:ES6---迭代器与生成器

      本文链接:https://www.haomeiwen.com/subject/zlobpctx.html