ES6(6)Symbol

192 阅读4分钟

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

起因:

ES5 的对象属性名都是字符串容易造成属性名的冲突:使用已有的对象,在为这个对象添加新的方法(mixin 模式)时,新方法的名字有可能与现有方法产生冲突。

ES6 引入Symbol,保证每个属性的名字都是独一无二的,这样就从根本上防止属性名的冲突。

Symbol 值通过Symbol函数生成(不能new)

Symbol函数前不能使用new命令:Symbol 是一个原始类型的值不是对象,所以不能添加属性是一种类似于字符串的数据类型。

对象的属性名现在可以有两种类型,一种是原有的字符串,另一种是Symbol 类型。

let s = Symbol();

typeof s
// "symbol"

接受一个字符串作为参数,表示对 Symbol 实例的描述

Symbol函数可以接受一个字符串作为参数表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

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

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

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

上面代码中,如果不加参数,它们在控制台的输出都是Symbol()

相同字符串参数的Symbol函数的返回值是不相等的

Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的

// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

Symbol 的参数是一个对象,就会调用该对象的toString方法

自身有toString方法就调用自身的,没有的话通过原型链查找到Object.toString

//自身有
const obj = {
  toString() {
    return 'abc';
  }
};
const sym = Symbol(obj);
console.log(sym) // Symbol(abc)


//自身没有
const obj = {
    name:'aaa'
};
const sym = Symbol(obj);
console.log(sym)     //Symbol([object Object])

Symbol 值不能与其他类型的值进行运算

let sym = Symbol('My symbol');

"your symbol is " + sym
// TypeError: can't convert symbol to string
`your symbol is ${sym}`
// TypeError: can't convert symbol to string

Symbol 值可以显式转为字符串、布尔值(不能转换为其他类型)

//转字符串
let sym = Symbol('My symbol');
String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

//转 boolean
let sym = Symbol();
Boolean(sym) // true
!sym  // false

if (sym) {
  // ...
}

Number(sym) // TypeError
sym + 2 // TypeError

Symbol作为属性名

let mySymbol = Symbol();

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

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

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

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

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

因为点运算符后面总是字符串,导致a的属性名实际上是一个字符串,而不是一个 Symbol 值

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

在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中

let s = Symbol();

let obj = {
  [s]: function (arg) { ... }
};

obj[s](123);

//简写
let obj = {
  [s](arg) { ... }
};

Symbol属性名的遍历Object.getOwnPropertySymbols

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)]

Object.getOwnPropertySymbols方法与for...in循环Object.getOwnPropertyNames方法进行对比

const obj = {};

let foo = Symbol("foo");

Object.defineProperty(obj, foo, {
  value: "foobar",
});

for (let i in obj) {
  console.log(i); // 无输出
}

Object.getOwnPropertyNames(obj)
// []

Object.getOwnPropertySymbols(obj)
// [Symbol(foo)]

Reflect.ownKeys方法可以返回所有类型的键名

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

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

Symbol.for(),(让两个Symbol值相等)

重新使用同一个 Symbol 值(让两个Symbol值相等)

它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值否则新建并返回一个以该字符串为名称的 Symbol 值。

let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');

s1 === s2 // true



s1和s2都是 Symbol 值,但是它们都是同样参数的Symbol.for方法生成的,所以实际上是同一个值

Symbol.keyFor(),返回一个已登记的 Symbol 类型值的key

返回一个已登记的 Symbol 类型值的key

let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined