美文网首页
ES6标准入门读书笔记9(Symbol)

ES6标准入门读书笔记9(Symbol)

作者: Masami_9e88 | 来源:发表于2018-07-19 18:30 被阅读0次

概述

ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

注意,Symbol函数前不能使用new命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。

let s1 = Symbol('foo');
let s2 = Symbol('bar');
s1 // Symbol(foo)
s2 // Symbol(bar)
s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

上面代码中,s1和s2是两个 Symbol 值。如果不加参数,它们在控制台的输出都是Symbol(),不利于区分。有了参数以后,就等于为它们加上了描述,输出的时候就能够分清,到底是哪一个值。

2.作为属性名的 Symbol

由于每一个 Symbol 值都是不相等的,这意味着 Symbol 值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。

let mySymbol = Symbol();
// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';
// 第二种写法
let a = {
  [mySymbol]: 'Hello!'
};
// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

上面代码通过方括号结构和Object.defineProperty,将对象的属性名指定为一个 Symbol 值。

注意,Symbol 值作为对象属性名时,不能用点运算符。

const mySymbol = Symbol();
const a = {};
a.mySymbol = 'Hello!';
a[mySymbol] // undefined
a['mySymbol'] // "Hello!"

上面代码中,因为点运算符后面总是字符串,所以不会读取mySymbol作为标识名所指代的那个值,导致a的属性名实际上是一个字符串,而不是一个 Symbol 值。

实例:消除魔术字符串 § ⇧

魔术字符串指的是,在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。

相关文章

  • ES6标准入门读书笔记9(Symbol)

    概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添...

  • ES6标准入门 摘要 (Symbol)

    Symbol 原始数据类型Symbol,表示独一无二的值,Symbol 值通过Symbol函数生成。这就是说,对象...

  • javaScript文章目录

    javaScript标准参考教程 ES6入门

  • 《ES6标准入门——阮一峰》总结

    这是笔者读完阮一峰的《ES6标准入门》的总结,可称为《ES6标准入门的入门》,总结的知识点都比较通俗易懂,可为想大...

  • ES6补充以及Node事件轮询

    Symbol es6中新增了symbol类型,symbol类型的值是通过symbol函数生成的,相同symbol函...

  • ES6入门 ___ Symbol

    一、概述 ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。Symbol值通过 Symbol 函...

  • React Native 学习指引

    ES6 ES6 推荐阮一峰的[《ES 6 标准入门》]在线阅读。 React react.js入门教程(gitbo...

  • 深入理解ES6六

    Symbol ES6新增的数据类型Symbol 创建Symbol:通过去全局的Symbol函数创建一个Symbol...

  • 技术资源

    javascript MDN w3c jquery w3c es6 es6标准入门 vue jsliang —— ...

  • ES6入门之Symbol

    ES5对象属性名都是字符串容易造成属性名的冲突。 ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。...

网友评论

      本文标题:ES6标准入门读书笔记9(Symbol)

      本文链接:https://www.haomeiwen.com/subject/mmxxmftx.html