ES6 | Symbol以及迭代器

最新推荐文章于 2023-01-11 22:02:51 发布

胖者是谁

最新推荐文章于 2023-01-11 22:02:51 发布

阅读量289

点赞数 3

分类专栏： JS 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/m0_72383454/article/details/126818424

版权

JS 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

本文介绍了JavaScript中的Symbol数据类型，强调其唯一性和在对象属性中的应用。Symbol的特点包括值的唯一性，不能与其他数据类型运算，并且可以避免命名冲突。文章还探讨了迭代器的工作原理，如何通过Symbol.for创建全局唯一的Symbol，以及如何利用迭代器自定义遍历对象。此外，通过示例展示了如何使用for...of循环和迭代器接口遍历数组和对象。

摘要由CSDN通过智能技术生成

一、Symbol

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。

1.Symbol特点：

Symbol的值是唯一的，用来解决命名冲突的问题
Symbol值不能与其他数据进行运算
Symbol定义的对象属性不能使用for...in循环遍历，但是保以使用Reflect.ownKeys来获取对象的所有键名

2.创建Symbol

创建Symbol()

let s = Symbol();
let s2 = Symbol('尚硅谷');
let s3 = Symbol('尚硅谷'）；
console.log(s2 === s3)//返回值：flase

Symbol.for创建

let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4 === s5)//返回值：true

注意：不能与其他数据进行运算！！！

3.Symbol创建对象属性

    <script>
       let game = {
           name:'游戏'
       }
       let methods = {
        up:Symbol(),
        down:Symbol()
       }
       game[methods.up] = function(){
        console.log('我可以改变形状')
       }
       game[methods.down] = function(){
        console.log('我可以快速下降！！')
       }
        
       console.log(game)
    </script>

    let youxi = {
        name:'狼人杀',
        [Symbol('say')]:function(){
            console.log('我可以发言')
        },
        [Symbol('zibao')]:function(){
            console.log('我可以自爆')
        }
    }
    console.log(youxi)

二、迭代器

迭代器（Iterator）是一种接口，为各种不同数据结构提供统一的访问机制。任何数据结构只要部署Iterato接口，就可以完成遍历操作。

工作原理：

创建一个指针对象，指向当前数据结构的起始位置
第一次调用对象的next方法，指针自动指向数据结构的第一个成员
接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
每调用next方法返回一个包含value和done属性的对象

注：需要自定义遍历数据的时候，要想到迭代器。

//声明一个数组
const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];
let iterator = xiyou[Symbol.iterator]();
//调用对象的next方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next())

三、迭代器自定义遍历对象

一般有iterator接口我们才可以用for...of来进行遍历，那么如果有一个对象，我们想要用for...of来遍历，我们应该怎么办呢？我们之前搞清楚了，数组可以通过for...of来遍历，是因为有iterator接口；所以我们来自定义一个iterator接口。

    <script>
        //声明一个对象
        const banji = {
            name:'终级一班',
            stus:[
                '张三',
                '李四',
                '王二',
                '麻子'
            ],
            [Symbol.iterator](){
                //索引变量
                let index = 0
                let _this = this
                return{
                    next:function(){
                        if(index < _this.stus.length){
                            const result = {value:_this.stus[index],done:false};
                            index ++;
                            return result
                        }else{
                            return{value:undefined,done:true}
                        }
                    }
                }
            }
        }


        //遍历这个对象（for...of）【没有iterator接口，所以无法用for...of遍历】
        for(let v of banji){
            console.log(v)
        }
    </script>