一.认识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来完成了遍历数组这么一个操作

ES6——Symbol属性与for...of循环迭代器相关推荐

ES6 Symbol类型的应用、symbol属性名的遍历、Symbol.for()Symbol.keyFor()
目录 Symbol类型介绍 Symbol.prototype.description Symbol的应用 1 给对象内追加属性 2 消除魔术字符串 symbol属性名的遍历 Symbol.for() ...
es6 遍历 Symbol 属性名
遍历 Symbol 属性名 Symbol 作为属性名,该属性不会出现在for...in.for...of循环中,也不会被Object.keys().Object.getOwnPropertyNames ...
前端技巧-JS元编程ES6 symbol公开符号
元编程就是指以操作目标为程序本身的行为特性的编程,而在ES6中增加了类型symbol,除了自定义的符号之外,还预定义了其他的一些内置符号,可以被称为内置符号.下面就来给大家介绍一下这些内置符号. 1. ...
es6对象属性的遍历
ES6一共有5种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性). (2)Object.keys(obj) Object. ...
ReactNative进阶（二十八）：ES6 Symbol 用法
文章目录一.什么是Symbol? 二.应用场景三.注意事项四.拓展阅读一.什么是Symbol? Symbol是es6中一种新增的数据类型,它表示独一无二的值.es5把数据类型分为基本数据类型( ...
es6 Symbol iterator接口
Symbol定义:一种新的原始数据类型,表示独一无二的值,是一种类似字符串的数据类型特点: 值是唯一的,用来解决命名冲突的问题值不能与其他数据进行运算注意点 Symbol 值作为属性名时,该属性 ...
ES6 Symbol 数据类型
ES6-Symbol 类型 ES5 除类数组对象(类数组对象名可以为数字,对象必须有 length 属性,可以用数组下标的方式访问对象属性,但不能通过点的方式访问)外,对象属性名都是字符串,这很容易造 ...
es6对象属性的可枚举性
对象属性的可枚举性对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为. Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象. let ...
es6 javascript属性的可枚举性
对象的每个属性都有一个描述对象( Descriptor ),用来控制该属性的行为.Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象. let obj = { ...

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

一.认识Symbol数据类型

二.Symbol特性

三.在对象中添加Symbol属性

四.Symbol内置值

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

六.迭代器原理

ES6——Symbol属性与for...of循环迭代器相关推荐

最新文章

热门文章