es6 symbol, iterator (es6 study notes 03)

Preface: This article mainly records the introduction and use of symbols. There is also an introduction and use of iterators.

1. Introduction and creation of symbol

1.1 introduction of symbol

ES6 introduced a new primitive data type symbol, which represents a unique value. It is the seventh data type of js, a data type similar to a string.

Features :

The value of symbol is unique and is used to resolve naming conflicts
Symbol value 不能is calculated with other data
Object properties defined by symbol cannot use for...in to traverse the loop, but you can use Reflect.ownKeys to get all the keys of the object.

1.2 Creation of symbol

//创建symbol
let s = Symbol();
//这样是两种不一样的东西
let s2 = Symbol('大海');   //这样创建是个函数
let s3 = Symbol('大海');
console.log(s2===s3);     //结果输出是false

//Symbol.for 创建 （这样创建相当于对象）
let s4 = Symbol.for('大海');
let s5 = Symbol,for('大海');
console.log(s4===s5);     //结果输出是true

Two, the object adds the attribute of the Symbol type

//向对象中添加方法 aaa  bbb
let name = {
    
    
    
}
//声明一个对象
let methods = {
    
    
    aaa:Symbol();
    bbb:Symbol();
};
name[methods.aaa] = function(){
    
    
    console.log("我是最美的aaa");
}
name[methods.bbb] = function(){
    
    
    console.log("我是最美的bbb");
}
console.log(name);

//第二种方法
let age = {
    
    
    name:'小花',
    [Symbol('girl')]:function(){
    
    
        console.log("我是女生");
    },
    [Symbol('boy')]:function(){
    
    
        console.log("我是男生");
    }
}

Three, the built-in attributes of Symbol

Used to point to methods used inside the language

Refer to official documents

Or refer to this blog

https://blog.csdn.net/ixygj197875/article/details/79165218

Four, iterator

Iterator is an interface that provides a unified access mechanism for various data structures. Any data structure can be traversed as long as the iterator interface is deployed.

ES6 created a new traversal command for...of loop, the Iterator interface mainly provides for...of consumption
Native data with iterator interface (available for of traversal)
- Array、Argument、Set、Map、String、TypedArray、NodeList
working principle:
- (1) Create a pointer object that points to the starting position of the current data structure
- (2) The first time the next method of the object is called, the pointer automatically points to the first member of the data structure
- Then continue to call the next method, the pointer has been moved backwards, until it points to the last member
- Each call to the next method returns an object containing value and done attributes

Note: When you need to customize traversal data, think of iterators

(1) Traverse an array with an iterator

//声明一个数组
const book = ['西游记','红楼梦','水浒传','三国演义'];
//使用for...of遍历数组
for(let a of book){
    
    
      console.log(a);  //输出的是键值
}
//使用for...in遍历数组
for(let a in book){
    
    
      console.log(a);  //输出的是键名，也就是数字下标
}
console.log(book);

(2) Manually define an iterator to traverse an object

//自定义手动实现迭代器
        //声明一个对像
        const people = {
    
    
            name:'红红',
            friends:[
                '红果果',
                '小熊维尼',
                '跳跳虎',
                '绿泡泡'
            ],
            [Symbol.iterator](){
    
    
                //索引变量
                let index = 0;
                let _this = this;  //找到this的作用域为people
                return{
    
    
                    next:function(){
    
    
                        if(index<_this.friends.length){
    
    
                            const result = {
    
    value:_this.friends[index],done:false};
                            index++;
                            return result;  //返回结果
                        }
                        else{
    
    
                            return {
    
    value:undefined,done:true}  //done为true遍历结束
                        }
                    }
                };
            }
        }