ES6——Symbol属性与for...of循环迭代器

目录

一.认识Symbol数据类型

二.Symbol特性

三.在对象中添加Symbol属性

四.Symbol内置值

五.迭代器（for..in和for...of的对比）

六.迭代器原理

---

一.认识Symbol数据类型

ES6引入了一种新的原始数据类型Symbol，Symbol表示独一无二的值，也是JS语言的第七种数据类型，分别为：undefined，null，string，boolean，number，Object，Symbol

Symbol()函数会返回symbol类型的值 ,但是作为构造函数的话，它并不完整，因为它不支持实例化对象（new Symbol（））

var sym = new Symbol(); // TypeError

语法：Symbol([description])

description是指对Symbol的描述

我们接下来使用Symbol（）创建一个新的symbol类型，并用一个可选的字符串作为其描述：

let Str = Symbol('primitive data type');

---

二.Symbol特性

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

let a = Symbol('one');
let b = Symbol('one');


Symbol("one") === Symbol("one"); // false

//Symbol不会强制将字符串 “one” 转换成symbol类型
//它每次都会创建一个新的 symbol类型,不会有命名冲突的问题

那有没有可能让视觉上的俩个 Symbol 值相等呢？其实是有的，我们还有另一种创建 Symbol 类型的方法：

const s = Symbol.for('Hello')

const s2 = Symbol.for('Hello')

console.log(s === s2)

// true

2.Symbol值不可以和其他数据进行运算

let a = Symbol('num');

console.log(Symbol + 1);
//Cannot convert a Symbol value to a number
console.log(Symbol + '10');

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

4.Symbol是动态创建的

---

三.在对象中添加Symbol属性

例如现在我们有一个对象，我们想为当前这个对象添加一条Symbol属性：

const Obj = {
    name:'小蜗',
    age:20
}

使用Symbol添加属性：

const Obj = {
    name:'小蜗',
    age:20,
    [Symbol('hobby')]:function(){
        console.log('我喜欢打代码');
}
}
console.log(Obj);

 那么再打一个比方，如果说我们想给一个对象添加属性，但是这个对象的属性很多很多，多到我们肉眼无法查看，我们无法知晓在当前这个对象中有没有我要添加的属性(再次假设当前对象就是有我们想要添加的属性，如果我们添加了，那就会出现命名冲突)，那我们如何避免命名冲突呢？

const Obj = {...}

//const Obj = {
//    a:1,
//    b:2
//}

我们不妨这样：可以再声明一个对象，使用Symbol添加我们需要的属性：

let temObj = {
    a:Symbol(),
    b:Symbol()
};

Symbol创建的值是独一无二的，所以我们选择Symbol来解决命名冲突的问题

接下来我们只需要将刚声明出来的对象中的值给到Obj对象即可：

Obj[temObj.a] = function(){
    console.log('我是A');
}

Obj[temObj.b] = function(){
    console.log('我是B');
}

然后我们打印一下Obj对象

并没有冲突 

---

四.Symbol内置值

除了定义自己的Symbol值，ES6还为我们提供了14个内置的Symbol值，指向语言内部使用的方法这些内置值是Symbol的属性，整体（例如：Symbol.hasInstancehaslnstancehasInstance）作为一个对象的属性存在

具体属性我们可以参考MDN相关文档：

Symbol - JavaScript | MDNsymbol 是一种基本数据类型 （primitive data type）。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#syntax

---

五.迭代器（for..in和for...of的对比）

迭代器（Iterator）也是Symbol的属性之一，同时它也是一种接口，为各种不同的数据结构提供统一的访问机制，任何的数据结构，只要部署了Iterator接口，就可以完成遍历的操作：

Symbol.iterator 为每一个对象定义了默认的迭代器，该迭代器可以被for...of循环使用，for...of也是ES6中新的遍历方法

可以使用for...of遍历的数据有：

Array、Arguments、Set、Map、String、TypedArray、NodeList

我们来使用for...of循环来完成对一个数组的循环遍历（与for...in对比）：

const arr = [1,78,88,66];

//当我们使用for...in循环遍历时：
for(let x in arr){
    console.log(x);
}

//当我们使用for...of循环遍历时：
for(let y of arr){
    console.log(y);
}

 当我们打印出来时，不难发现区别，for...in打印出来的是索引值，而for...of打印出来的是索引值所对应的数值

---

六.迭代器原理

首先，它会创建一个指针对象，指向当前数据结构的起始位置（也就是索引号为0的位置），接下来调用一次对象的next()方法，指针自动指向数据结构的第一个成员（也就是索引号为0的所对应的数据），接下来会不断的调用next()方法，指针一直向后移，直到指向最后一个成员

每次调用next()方法，返回一个包含value（遍历的对应值）和done（记录遍历是否完成）属性的对象，当我们自定义遍历数据时，迭代器就显得很有用，例如我们想要遍历依次输出一个对象中的的属性中的数组中的值，那么我们可以使用以下方法完成工作，但是这并不符合面向对象的思想

对象.当前对象属性名.forEach();

所以我们选择使用Symbol的迭代器遍历下面的对象中的的爱好属性中的数组中的值：

const Obj = {
    name:'小蜗',
    hobby:[
    '玩游戏',
    '发呆',
    '打代码',
    '睡觉',
    '跑步'
]
}

 const Obj = {
    name:'小蜗',
    hobby:[
    '玩游戏',
    '发呆',
    '打代码',
    '睡觉',
    '跑步'
],
[Symbol.iterator](){
    //索引
    let index = 0;
    return{
        //next方法
        next:()=>{
            //索引值小于数组长度
            if(index < this.hobby.length){
                const result = {
                    value:this.hobby[index],
                    done:false
                    //每遍历一次索引自增
                }
                    index++;
                    //返回结果
                    return result;
                //索引值等于大于数组长度，结束遍历
                }else{
                    return {
                        value:undefined,
                        done:true
                    }
                }
            }
        }
    }
}
//遍历
for(let x of Obj) {
    console.log(x);
}

 这样我们就以一个面向对象的形式使用Symbol来完成了遍历数组这么一个操作