前言
在 ECMAScript 2015 规范中引入了 Symbol 类型，它可以作为属性名，但是不会与其他属性名冲突。在 ECMAScript 2016 中，Symbol 类型得到了进一步的完善和增加了一些操作符。本文将深入剖析 Symbol 类型及其操作符的基本概念、用法、实现原理和注意事项。
Symbol 类型
基本概念
Symbol 是一种原始数据类型，表示独一无二的值。Symbol 值通过 Symbol 函数生成，Symbol 函数可以接受一个可选的字符串参数，用于标识生成的 Symbol 值。这个字符串参数只是用于调试和说明用途，不会影响到 Symbol 值的唯一性。
const sym1 = Symbol();
const sym2 = Symbol('foo');
console.log(typeof sym1); // "symbol"
console.log(typeof sym2); // "symbol"
console.log(sym1 === sym1); // true
console.log(sym1 === sym2); // false
console.log(sym2.toString()); // "Symbol(foo)"用法
- 作为属性名
Symbol 值可以作为对象属性名，这个属性名不会与其他属性名冲突。使用 Object.getOwnPropertySymbols 方法可以获取对象上所有 Symbol 类型的属性名。
const mySymbol = Symbol('mySymbol');
const obj = {};
obj[mySymbol] = 'hello world';
console.log(obj[mySymbol]); // "hello world"
const symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // [Symbol(mySymbol)]- 枚举 Symbol 属性名
使用 Object.getOwnPropertySymbols 和 Reflect.ownKeys 方法可以枚举对象上所有 Symbol 类型的属性名。
const mySymbol1 = Symbol('mySymbol1');
const mySymbol2 = Symbol('mySymbol2');
const obj = {
[mySymbol1]: 'hello',
[mySymbol2]: 'world',
};
console.log(Reflect.ownKeys(obj)); // [ Symbol(mySymbol1), Symbol(mySymbol2) ]- Symbol.iterator
Symbol.iterator 属性指向一个返回迭代器对象的函数，用于在对象上定义一个默认的迭代器。只有实现了这个函数的对象才能使用 for...of 循环。
const myIterable = {
[Symbol.iterator]: function* () {
yield 1;
yield 2;
yield 3;
}
};
for (let x of myIterable) {
console.log(x);
}
// 1
// 2
// 3- Symbol.toPrimitive
Symbol.toPrimitive 属性指向一个方法，用于指定对象被转换为原始值时的行为。详见 MDN Web Docs。
- 其他 Symbol 属性
Symbol 类型还有一些其他的属性，比如 Symbol.hasInstance、Symbol.isConcatSpreadable、Symbol.match 等，它们都是用来定义对象或函数的行为的。具体用法和实现原理可以参考 MDN Web Docs。
Symbol 操作符
基本概念
Symbol 操作符是一些专门针对 Symbol 值的运算符。在 ECMAScript 2016 中，加入了 4 个新的 Symbol 操作符：Symbol.asyncIterator、Symbol.isRegExp、Symbol.matchAll 和 Symbol.replace。除此之外，还有一些常见的 Symbol 操作符，如 Symbol.iterator、Symbol.hasInstance、Symbol.toPrimitive 等。
Symbol 操作符定义了一些接口，方便开发者进行自定义行为的实现。这些接口是以 Symbol 值为键的属性，只要在对象上定义了这些属性，就可以自定义这些操作符的行为。
用法
- Symbol.iterator
Symbol.iterator 用于定义对象的默认迭代器。一个对象如果有 Symbol.iterator 属性，就被认为是可迭代的。
class MyList {
constructor() {
this.items = [];
}
[Symbol.iterator]() {
let index = 0;
const items = this.items;
return {
next: function() {
if (index < items.length) {
return { value: items[index++], done: false };
} else {
return { value: undefined, done: true };
}
}
};
}
}
const list = new MyList();
list.items.push('foo');
list.items.push('bar');
list.items.push('baz');
for (let item of list) {
console.log(item);
}
// "foo"
// "bar"
// "baz"- Symbol.toPrimitive
Symbol.toPrimitive 用于控制对象被转换为原始值时的行为。
const obj = {
[Symbol.toPrimitive](hint) {
switch (hint) {
case 'number':
return 123;
case 'string':
return 'str';
case 'default':
return 'default';
default:
throw new Error();
}
}
};
console.log(obj + 1); // 124
console.log(obj.toString()); // "str"
console.log(String(obj)); // "str"
console.log(Number(obj)); // 123
console.log(obj.valueOf()); // "default"- Symbol.hasInstance
Symbol.hasInstance 用于确定一个值是否为某个构造函数的实例。
class MyClass {}
const obj = new MyClass();
console.log(MyClass[Symbol.hasInstance](obj)); // true
console.log(Array[Symbol.hasInstance](obj)); // false- Symbol.match
Symbol.match 用于控制字符串的 match 方法。
class MyRegExp {
static [Symbol.match](str) {
const match = /The answer is (\d+)/.exec(str);
return match ? match[1] : null;
}
}
console.log('The answer is 42'.match(MyRegExp)); // "42"- Symbol.replace
Symbol.replace 用于控制字符串的 replace 方法。
class MyReplace {
static [Symbol.replace](str, replacement) {
return str.replace('foo', replacement.toUpperCase());
}
}
console.log('hello foo world'.replace(MyReplace, 'bar')); // "hello BAR world"- 常用的 Symbol 操作符
除了上面介绍的 4 个 Symbol 操作符之外，还有一些常用的 Symbol 操作符，比如 Symbol.for、Symbol.keyFor、Symbol.isConcatSpreadable、Symbol.species 等，可以参考 MDN Web Docs。
总结
Symbol 类型和操作符是 ECMAScript 规范中的重要功能，可以方便开发者进行自定义行为的实现。本文分别介绍了 Symbol 类型和操作符的基本概念、用法、实现原理和注意事项，并给出了详细的示例代码。希望本文对您了解 Symbol 类型和操作符有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a4e656add4f0e0ffd410bf