Symbol的使用

最新推荐文章于 2022-09-03 11:37:34 发布

大坤...

最新推荐文章于 2022-09-03 11:37:34 发布

阅读量745

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/red_HTML/article/details/126656146

版权

Number、String、Boolean、undefined、object、Null

null指示变量未指向任何对象。

undefined为定义了但没赋值

什么是Symbol

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

Symbol的特点：

1.Symbol的只是唯一的，用来解决命名冲突的问题

2.Symbol的值不能与其他数据进行运算

3.Symbol定义的对象属性不能使用for..in循环遍历，但可以使用Reflect.ownKeys来获取对象的所有键名。

typeof 可以显示当前数据的数据类型

Symbol（）函数不可以new

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let s1 = Symbol();
        console.log(s1) //Symbol
        console.log(typeof s1) //数据类型

        // 添加标识的Symbol
        let s2_1 = Symbol("张三")
        let s2_2 = Symbol("张三")
        console.log(s2_1 === s2_2) //false

        let s3_1 = Symbol.for('张三')
        let s3_2 = Symbol.for('张三')
        console.log(s3_1 === s3_2) //true

        const s4_1 = Symbol('a')
        const s4_2 = Symbol.for('b')
        const s4_3 = Symbol.for('b')
        const obj = {
            [s4_1]: 1,
            [s4_2]: 2,
            [s4_3]: 3
        };
        // console.log(s4_2 === s4_3)
        console.log(obj) //Symbol(a): 1;  Symbol(b): 3;
        let c = Symbol.for("Hello")
        console.log(Symbol.keyFor(c)) //Hello
    </script>
</body>

</html>

使用Symbol作为对象属性名不被Object.keys等方式访问

如何获取Symbol方式定义的对象属性

使用JSON.stringify()将对象转化成JSON字符串，Symbol属性会被排除在外

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // // 使用Symbol作为对象属性名不被Object.keys等方式访问
        let obj = {
            [Symbol("name")]: "一斤代码",
            age: 18,
            title: "Engineer"
        }
        console.log(Object.keys(obj)) //无法获取到Symbol

        console.log("-------------------------------")
        for (let p in obj) {
            // console.log(p)
        }
        console.log(Object.getOwnPropertyNames(obj)) //无法获取到Symbol
        console.log("-------------------------------")
        // 如何获取Symbol方式定义的对象属性
        console.log(Object.getOwnPropertySymbols(obj)) //可以获取到Symbol
        console.log(Reflect.ownKeys(obj)) //可以获取到Symbol
        // 使用JSON.stringify()将对象转化成JSON字符串，Symbol属性会被排除在外
        console.log("-------------------------------")

        let obj2 = JSON.stringify(obj)
        console.log(obj)

    </script>
</body>

</html>

迭代器

迭代器的工作原理

<script>
        let arr = [23, 45, 54, 3, 2]
        // for (var i = 0; i < arr.length; i++) {
        //     console.log(arr)
        // }
        for (const i of arr) {
            console.log(i) //23, 45, 54, 3, 2
        }
        let diedai = arr[Symbol.iterator]()
        console.log(diedai)
        console.log(diedai.next())//{value: 23, done: false}
        console.log(diedai.next())//{value: 45, done: false}
        console.log(diedai.next())//{value: 54, done: false}
        console.log(diedai.next())//{value: 3, done: false}
        console.log(diedai.next())//{value: 2, done: false}
        console.log(diedai.next())//{value: undefined, done: true}
    </script>

使用迭代器遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = {
            name: "月份",
            months: ["1月份", "2月份", "3月份", "4月份", "5月份", "6月份", "7月份"],
            [Symbol.iterator]() {
                let index = 0
                return {
                    next: () => {
                        if (index < this.months.length) {
                            let result = {
                                value: this.months[index],
                                done: false
                            }
                            index++
                            return result
                        } else {
                            return {
                                value: undefined,
                                done: true
                            }
                        }
                    }
                }
            }
        }
        for (const i of obj) {
            console.log(i)
        }

    </script>
</body>

</html>

生成器（特殊的迭代器）

<script>
        /**
         * 创建一个生成器，就是一个特殊的函数，用来解决异步编程的问题
         * 生成器就是一个特殊的迭代器
         * 生成器中的语句只会在调用了next()函数才会被执行
        */
        function* fn() {
            yield '张三';
            yield '张四';
            yield '张五';
        }
        var da = fn()
        console.log(da.next())  //{value: '张三', done: false}
        console.log(da.next())  //{value: '张四', done: false}
        console.log(da.next())  //{value: '张五', done: false}
        console.log(da.next())  //{value: undefined, done: true}
    </script>

使用生成器模拟每间隔一秒输出11 22 33 结果如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 循环
        // setTimeout(() => {
        //     console.log("11")
        //     setTimeout(() => {
        //         console.log("22")
        //         setTimeout(() => {
        //             console.log("33")
        //         }, 3000)
        //     }, 2000)
        // }, 1000)
        // 函数
        function one() {
            setTimeout(() => {
                console.log("11")
                t.next()
            }, 1000)
        }
        function two() {
            setTimeout(() => {
                console.log("22")
                t.next()
            }, 2000)
        }
        function three() {
            setTimeout(() => {
                console.log("33")
                t.next()
            }, 3000)
        }
        function* text() {
            yield one()
            yield two()
            yield three()
        }
        let t = text()
        t.next()
    </script>
</body>

</html>