系列文章 -- ES6笔记系列

Symbol是什么?中文意思是标志、记号,顾名思义,它可以用了做记号。

是的,它是一种标记的方法,被ES6引入作为一种新的数据类型,表示独一无二的值。

由此,JS的数据类型多了一位成员:

Number、String、Boolean、undefined、Object、Symbol

一、简单使用

1. 声明

类似字符串String的声明方式 var str = 'str'; Symbol的声明方式类似,它调用构造函数Symbol()

var s = Symbol();
typeof s // symbol

2. 使用

Symbol声明了是为了使用

var s = Symbol();
var s1 = Symbol(); console.log(s, s1);
console.log(s == s1); // false

Chrome的输出中自动对Symbol类型的数据做了标识处理,由输出知道,虽然通过Symbol生成的两个标志不相同,但两个变量混淆了分不清。

实际上,为了区别出不同的symbol,我们可以在参数中指定

var s = Symbol('s');
var s1 = Symbol('s1'); console.log(s, s1);

symbol除了简单的在控制台输出之外,还可以参与到其他代码逻辑运算中去,最常见的是在对象属性名称中(为确保属性名惟一而存在)

var s = Symbol();
var s1 = Symbol('s1'); var obj = {
[s]: function() {
console.log(1);
},
[Symbol()]: () => {
console.log(2);
},
[s1]: 3
}; obj[s]() //
obj[s1] //

注意到symbol要使用[]中括号包裹起来,调用的时候也一样(不能使用obj.s的方式,这样会被识别成字符串)

3. 属性的遍历

如上代码,如果我们想遍历对象的属性值,也许会这样操作

for (var item in obj) {
if (typeof obj[item] === 'function') {
obj[item]();
} else {
console.log(obj[item]);
}
} Object.keys(obj).forEach(function(item) {
if (typeof obj[item] === 'function') {
obj[item]();
} else {
console.log(obj[item]);
}
});

却发现什么也没输出

因为要获取到Symbol这个属性名,ES6引入了新的方法,旧的for...in  Object.keys()、Object.getOwnPropertyNames()等不支持访问

使用新的getOwnPropertySymbols方法

var s = Symbol();
var s1 = Symbol('s1'); var obj = {
[s]: function() {
console.log(1);
},
[Symbol()]: () => {
console.log(2);
},
[s1]: 3,
a: 4
}; Object.getOwnPropertySymbols(obj).forEach(function(item) {
if (typeof obj[item] === 'function') {
obj[item]();
} else {
console.log(obj[item]);
}
}); // 输出 1 2 3

虽然识别了symbol类属性,但常规属性却被忽略了,所以ES6还引入了一个新的内置类Reflect,它的ownKeys方法可以识别出所有属性名

var s = Symbol();
var s1 = Symbol('s1'); var obj = {
[s]: function() {
console.log(1);
},
[Symbol()]: () => {
console.log(2);
},
[s1]: 3,
a: 4
}; Reflect.ownKeys(obj).forEach(function(item) {
if (typeof obj[item] === 'function') {
obj[item]();
} else {
console.log(obj[item]);
}
}); // 输出 4 1 2 3

4. 类型转换

数字转换成字符串我们可以简单的使用 + '' 实现,symbol呢

var s = Symbol();
var s1 = Symbol('s1'); s + '' // Uncaught TypeError: Cannot convert a Symbol value to a string

出错了,提示不能转换。

实际上,我们只是不能直接转换值,还是可以用toString或String方法转换这个标志的

var s = Symbol();
var s1 = Symbol('s1'); s.toString() // Symbol()
String(s1) // Symbol(s1)

类似的,也可以转换为bool值

var s = Symbol();
var s1 = Symbol('s1'); !!s // true
!s // false
Boolean(s1) // true

不过,symbol是不能转换成数值Number类型的

5. Symbol.for()相同值的使用

有时候我们需要使用同一个symbol值,而调用Symbol()的时候会自动创建不同的值

var temp = [];

var scores = [{
name: 'jack',
score: 10
}, {
name: 'pick',
score: 20
}, {
name: 'pick',
score: 30
}]; scores.forEach(function(item) { temp.push({
name: Symbol(item.name),
score: item.score
});
}); temp[1].name == temp[2].name // false

以上代码主要为了登记不同用户的分数,并确保唯一性使用了symbol,但最终用户名都为pick的项不想等,可能会导致后续的计算出错

把Symbol换成Symbol.for,输出才为true

两者类似,都可以生成一个Symbol类型的值,但后者是先判断全局中是否有该symbol值,有就返回该值,没有才创建,并将该值登记在全局中

var s = Symbol.for('s');
var s1 = Symbol.for('s'); s == s1 // true
s === s1 // true var s = Symbol('s');
var s1 = Symbol('s'); s == s1 // false
s === s1 // false

此外,我们可以用Symbol.keyFor()访问全局中的symbol相关项,没有则返回undefined

var s = Symbol.for('s');
var s1 = Symbol.for('s'); Symbol.keyFor(s) // s
Symbol.keyFor(s1) // s
Symbol.keyFor(s2) // Uncaught ReferenceError: s2 is not defined var s3 = Symbol('s3');
Symbol.keyFor(s3) // undefined

6. Symbol的更多使用

Symbol的更多使用方法,可参考MDN - Symbol

ES6笔记(4)-- Symbol类型的更多相关文章

  1. ES6中的Symbol类型

    前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型——Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个 ...

  2. ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set

    这篇es6的学习笔记来自于表哥 表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 ES6就是JS6,JS的第 ...

  3. 用vue.js学习es6(四):Symbol类型

    一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...

  4. ES6中关于数据类型的拓展:Symbol类型

    ES5中包含5种原始类型:字符串.数值.布尔值.null.undefined.ES6引入了第6种原始类型——Symbol. ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个他人提供 ...

  5. ES6学习笔记(9)----Symbol

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Symbol1.symbol:Symbol是javascript的第七种原始数据类型,代表独一无 ...

  6. ES6笔记系列

    ES6,即ECMAScript 6.0,ES6的第一个版本是在2015年发布的,所以又称作ECMAScript 2015 如今距ES6发布已经一年多的时间,这时候才去学,作为一个JSer,羞愧羞愧,还 ...

  7. ES6笔记(6)-- Set、Map结构和Iterator迭代器

    系列文章 -- ES6笔记系列 搞ES6的人也是够无聊,把JS弄得越来越像Java.C++,连Iterator迭代器.Set集合.Map结构都出来了,不知道说什么好... 一.简单使用 1. iter ...

  8. ES6笔记一

    遍历数组: 1:传统的 for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);} ...

  9. ES6笔记(3)-- 解构赋值

    系列文章 -- ES6笔记系列 解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组.对象.字符串的解构赋值等 一.数组的解构赋值 function ids() { ret ...

随机推荐

  1. CoinPunk项目介绍

           CoinPunk是一个bitcoin比特币钱夹服务web应用程序,你可以自己构建钱夹服务.开源,免费. 轻量级,高效 响应式设计 轻易创建新账户 详细的交易记录 构建于Node.js与H ...

  2. objective-c(代码块)

    objective-c代码块(block)对写惯C语言的人非常熟悉,就类似一个函数指针,指向一个代码段的首地址: 给出简单例子如下: int main(int argc, const char * a ...

  3. 每周一书-《Bootstrap基础教程》

    首先说明,本周活动有效时间为8月15日到21日.本周为大家送出的书是有电子工业出版,贺臣/陈鹏编著的<Bootsrap基础教程>,为前端入门必读书籍. 下面是从书中摘录的内容. “ Boo ...

  4. Hadoop日记Day12---MapReduce学习

    一.MapReduce简介 1.1MapReduce概述 MapReduce是一种分布式计算模型,由Google提出,主要用于搜索领域,解决海量数据的计算问题.MR由两个阶段组成:Map和Reduce ...

  5. JavaScript很牛

    几年前,我从来没有想过现在的JavaScript竟然会变得几乎无处不在.下面是几个要关注JavaScript的原因. 首先,我认为JavaScript能够得到普及的主要原因之一是,JavaScript ...

  6. [.net 面向对象编程基础] (10) 类的成员(字段、属性、方法)

    [.net 面向对象编程基础] (10) 类的成员(字段.属性.方法) 前面定义的Person的类,里面的成员包括:字段.属性.方法.事件等,此外,前面说的嵌套类也是类的成员. a.类的成员为分:静态 ...

  7. [蓝牙] 5、Battery Service module

    Detailed Description This module implements the Battery Service with the Battery Level characteristi ...

  8. HTTP学习笔记(五)

    目前,市场上流行有很多web服务器软件,每种服务器都有自己的特点.我们在开发的过程中,经常要和它们打交道,所以了解它们的工作原理也是很重要的. 几款比较流行的服务器 它们会做些什么? 第三篇中有这样的 ...

  9. Yii CModel中rules验证 获取错误信息

    在model中定义 public function rules(){ return array( array('Name,Email','required'), array('Email','uniq ...

  10. 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...