ES6---迭代器与生成器

2019-10-08 本文已影响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和迭代器

Symbol

ES5的基本数据类型

string | number | bool | undefined | null | onject

ES6增加了一种数据类型

增加的数据类型：Symbol()

相关参考资料：

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

迭代

引入迭代

  var version = 0;
    function 发布(){
        version += 1;
        return version
    }

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

代码截图.PNG

迭代含义
一个迭代对象，知道如何访问集合中的一项，并跟踪该序列中的当前位置，在JavaScript中，迭代器是一个对象，它提供一个next()方法，用来返回序列中的下一项。这个方法包括两个属性，done和value。迭代对象一旦被创建，就可以反复调用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++的顺序遍历的。

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

ES6---迭代器与生成器

字面量增强

原有字面量加强

Symbol和迭代器

生成器&for...of

猜你喜欢

热点阅读