JavaScript高级特性（Symbol-Iterator-Generator)）-阿里云开发者社区

JavaScript高级特性（Symbol-Iterator-Generator)）

2023-06-12 102

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript高级特性（Symbol-Iterator-Generator)）

Symbol

1.什么Symbol?

Symbol是ES6中新增的一种数据类型, 被划分到了基本数据类型中

基本数据类型: 字符串、数值、布尔、undefined、null、Symbol

引用数据类型: Object,Array,Date等

2.Symbol的作用

Symbol用来表示一个独一无二的值

3.如果生成一个独一无二的值?

let xxx = Symbol();

4.为什么需要Symbol?

在企业开发中如果需要对一些第三方的插件、框架进行自定义的时候可能会因为添加了同名的属性或者方法, 将框架中原有的属性或者方法覆盖掉,为了避免这种情况的发生, 框架的作者或者我们就可以使用Symbol作为属性或者方法的名称

let person = {
        name: "shanjialan",
        [name]: 'sjl',
        [say]: function() {
            alert("say");
        }
    }
    person.name = "it666";
    person[Symbol("name")] = "shanjialan";
    console.log(person);

打印结果.png

5.如何区分Symbol?

在通过Symbol生成独一无二的值时可以设置一个标记

这个标记仅仅用于区分, 没有其它任何含义

let a = Symbol();
    let b = Symbol();
    console.log(a === b);//false

6.Symbol使用注意点

1.通过Symbol生成独一无二值时需要在后面加上(), 但是前面不能加new, 因为它不是引用类型

let xxx = Symbol(); // 正确
 let xxx = new Symbol(); // 错误

2.通过Symbol生成独一无二值时传入的字符串仅仅是一个标记, 方便我们阅读代码, 没有其它任何意义

let xxx = Symbol("name");

3.做类型转换的时候不能转换成数值

let test1 = Symbol("age");
    console.log(String(test1));
    console.log(Boolean(test1));
    // console.log(Number(test1));
    // Error:Cannot convert a Symbol value to a number at Number (<anonymous>)

4.不能做任何运算

// 不能做任何运算
    // console.log(test1 + "111");
    // Symbol.html:43 Uncaught TypeError: Cannot convert a Symbol value to a string

5.Symbol生成的值作为属性或方法名称时, 一定更要保存下来, 否则后续无法使用

let name = Symbol("name");
let obj = {
   [name]: "shanjialan"
   [Symbol("StudentID")]: "华中师范大学2019214268"
 }
console.log(obj[name]);
console.log(obj[Symbol("StudentID")]);

6.for循环无法遍历出Symbol的属性和方法

let obj2 = {
        [test1]: 'test',
        age: 19
    };
    for (let key in obj2) {
        console.log(key);
    }

【注意】：通过Object.getOwnPropertySymbols(obj))来获取Symbol设置的属性;

console.log(Object.getOwnPropertySymbols(obj));

Iterator

1.什么是Iterator?

Iterator又叫做迭代器, 是一种接口

这里的接口和现实中接口一样, 是一种标准一种规范,例如: 电脑的USB接口有电脑USB接口的标准和规范, 正式因为有了标准和规范

所以A厂商生成的USB线可以插到B厂商电脑的USB接口上,它规定了不同数据类型统一访问的机制, 这里的访问机制主要指数据的遍历

在ES6中Iterator接口主要供for...of消费

2.默认情况下以下数据类型都实现的Iterator接口

Array/Map/Set/String/TypedArray/函数的 arguments 对象/NodeList 对象

3.Iterator对象的特性

1.只要一个数据已经实现了Iterator接口, 那么这个数据就有一个叫做[Symbol.iterator]的属性
2.[Symbol.iterator]的属性会返回一个函数
3.[Symbol.iterator]返回的函数执行之后会返回一个对象
4.[Symbol.iterator]函数返回的对象中又一个名称叫做next的方法
5.next方法每次执行都会返回一个对象{value: 1, done: false}
6.这个对象中存储了当前取出的数据和是否取完了的标记

let arr = [1, 2, 3];
        for (let value of arr) {
            console.log(value);
        }
 console.log(arr[Symbol.iterator]);
        let it = arr[Symbol.iterator]();
        console.log(it);
        it.next();
        console.log(it.next());
        console.log(it.next());
        console.log(it.next());
        console.log(obj[Symbol.iterator]);

image.png

手动实现Iterator接口重写

class ArrayTest {
            constructor() {
                    this.length = arguments.length;
                    for (let i = 0; i < arguments.length; i++) {
                        this[i] = arguments[i];
                    }
                }
                [Symbol.iterator]() {
                    let index = 0;
                    let that = this;
                    return {
                        next() {
                            if (index < that.length) {
                                return {
                                    value: that[index++],
                                    done: false
                                }
                            } else {
                                return {
                                    value: undefined,
                                    done: true
                                }
                            }
                        }
                    }
                }
        }
        let arr1 = new ArrayTest(1, 3, 5);
        console.log(arr1);
        for (let value of arr1) {
            console.log(value);
        }