ES6篇(11)--Symbol

26 篇文章 0 订阅


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

ES6引入它的目的是解决对象属性名冲突的问题,ES5的对象属性名都是字符串,容易造成属性名
的冲突。对象的属性名现在可以有两种类型(原有的字符串和新增的Symbol类型)

用法:Symbol值通过Symbol函数生成,注意Symbol函数前不能使用new命令,否则会报错
(这是因为Symbol是原始类型的值,不是对象,因此Symbol值不能添加对象,它是一种类似于字符串的其他类型)

例子:
let s = Symbol();

typeof s
// "symbol"

let s1 = Symbol('foo');
let s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"
Sym函数可以接受一个字符串作为参数,表示Symbol实例的表示,为了输出是区分它们。
注意:1.如果Symbol的参数是一个对象,则会先调用该对象的toString方法,将其转为字符串
,然后才生成一个Symbol值。
2.Symbol函数的参数只表示对当前Symbol值的描述,因此相同参数的Symbol函数返回值是不相等的。
3.Symbol值不能与其他类型的值进行计算,会报错。
4.Symbol值可以显式的转为字符串、布尔值,但是不能转为数值。

(2)Symbol.prototype.description 返回Symbol的描述(ES2019引入)

const sym = Symbol('foo');
之前获取描述,需要显式转为字符串
String(sym) // "Symbol(foo)"
sym.toString() // "Symbol(foo)"

现在可以这样获取
sym.description // "foo"

(3)作为属性名的Symbol
Symbol值作为属性名,能保证不会出现同名的属性,我们可以同方括号结果和Object.defineProperty
将属性名指定为Symbol值。
例子:
let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

注意:
1.Symbol值作为属性名时,不能使用点运算符,使用点运算符会被当做字符串(用字符串当做的属性名)

例子:
const mySymbol = Symbol();
const a = {};

a.mySymbol = 'Hello!';
a[mySymbol] // undefined
a['mySymbol'] // "Hello!"

又如:
let s = Symbol();

let obj = {
  [s]: function (arg) { ... }
//s放在方括号中
};
obj[s](123);

2.Symbol类型可以用于定义一组常量,保证这组常量的值不相等
3.Symbol值作为属性名,该属性是公开属性,不是私有属性

(4)实例:消除魔术字符串
魔术字符串是指:在代码中多次出现,与代码形成强耦合的某个具体的字符串或数值。
例如:
function getArea(shape, options) {
  let area = 0;

  switch (shape) {
    case 'Triangle': // 魔术字符串
      area = .5 * options.width * options.height;
      break;
    /* ... more code ... */
  }

  return area;
}

getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串

利用Symbol消除魔术字符串
const shapeType = {
  triangle:Symbol()
};

function getArea(shape, options) {
  let area = 0;
  switch (shape) {
    case shapeType.triangle:
      area = .5 * options.width * options.height;
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });


(5)属性名的遍历
Object.getOwnPropertySymbols方法,可以获取指定对象的所有 Symbol 属性名。
【注意:该属性不会出现在for...in、for...of循环中,也不会Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回】

Object.getOwnPropertySymbols方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。
const obj = {};
let a = Symbol('a');
let b = Symbol('b');

obj[a] = 'Hello';
obj[b] = 'World';

const objectSymbols = Object.getOwnPropertySymbols(obj);

objectSymbols
// [Symbol(a), Symbol(b)]

另一个新的 API,Reflect.ownKeys方法可以返回所有类型的键名,包括常规键名和 Symbol 键名。

let obj = {
  [Symbol('my_key')]: 1,
  enum: 2,
  nonEnum: 3
};

Reflect.ownKeys(obj)
//  ["enum", "nonEnum", Symbol(my_key)]

(6)Symbol.for(),Symbol.keyFor() 

Symbol.for():有时,我们希望重新使用同一个 Symbol 值,Symbol.for方法可以做到这一点。它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,
否则就新建并返回一个以该字符串为名称的 Symbol 值。

Symbol.keyFor方法返回一个已登记的 Symbol 类型值的key。
注意:1. Symbol.for()与Symbol()这两种写法,都会生成新的 Symbol。它们的区别是,前者会被登记在全局环境中供搜索,后者不会
例子:let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined
上面代码中,变量s2属于未登记的 Symbol 值,所以返回undefined

2.Symbol.for为 Symbol 值登记的名字,是全局环境的,可以在不同的 iframe 或 service worker 中取到同一个值。

(7)实例:模块的singleton 模式
Singleton 模式:调用一个类,任何时候返回的都是同一个实例。
// mod.js
const FOO_KEY = Symbol.for('foo');

function A() {
  this.foo = 'hello';
}

if (!global[FOO_KEY]) {
  global[FOO_KEY] = new A();
}

module.exports = global[FOO_KEY];
键名使用Symbol方法生成,外部无法引用这个值,无法改写也不会覆盖
但是也有问题
就是如果多次执行这个脚本,每次得到的FOO_KEY都是不一样的。虽然 Node 会将脚本的执行结果缓存,一般情况下,不会多次执行同一个脚本,
但是用户可以手动清除缓存,所以也不是绝对可靠。

(8)内置的Symbol值
ES6提供了11个内置的Symbol值,指向语言内部使用的方法
a.Symbol.hasInstance
对象的Symbol.hasInstance属性,指向一个内部方法。当其他对象使用instanceof运算符,判断是否为该对象的实例时,会调用这个方法。

b.Symbol.isConcatSpreadable
对象的Symbol.isConcatSpreadable属性等于一个布尔值,表示该对象用于Array.prototype.concat()时,是否可以展开。

c.Symbol.species
对象的Symbol.species属性,指向一个构造函数。创建衍生对象时,会使用该属性。
它主要的用途是,有些类库是在基类的基础上修改的,那么子类使用继承的方法时,作者可能希望返回基类的实例,而不是子类的实例。

d.Symbol.match
对象的Symbol.match属性,指向一个函数。当执行str.match(myObject)时,如果该属性存在,会调用它,返回该方法的返回值。

e.Symbol.replace 
对象的Symbol.replace属性,指向一个方法,当该对象被String.prototype.replace方法调用时,会返回该方法的返回值。

f.Symbol.search
对象的Symbol.search属性,指向一个方法,当该对象被String.prototype.search方法调用时,会返回该方法的返回值。

g.Symbol.split
对象的Symbol.split属性,指向一个方法,当该对象被String.prototype.split方法调用时,会返回该方法的返回值。

h.Symbol.iterator 
对象的Symbol.iterator属性,指向该对象的默认遍历器方法。

i.Symbol.toPrimitive
对象的Symbol.toPrimitive属性,指向一个方法。该对象被转为原始类型的值时,会调用这个方法,返回该对象对应的原始类型值。

j.Symbol.toStringTag 
对象的Symbol.toStringTag属性,指向一个方法。在该对象上面调用Object.prototype.toString方法时,如果这个属性存在,它的返回值会出现在toString方法返回的字符串之中,表示对象的类型。也就是说,这个属性可以用来定制[object Object]或[object Array]中object后面的那个字符串。

k.Symbol.unscopables
对象的Symbol.unscopables属性,指向一个对象。该对象指定了使用with关键字时,哪些属性会被with环境排除。
阮一峰 ES6 Symbol对象

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值