JavaScript Symbol 符号终极指南教程
在本教程中,您将了解 JavaScript Symbol 符号原始类型以及如何有效地使用符号
在本教程中,您将了解 JavaScript Symbol 符号原始类型以及如何有效地使用符号。
创建符号
ES6 添加 Symbol
作为新的原始类型。与 number、boolean、null、undefined 和 string 等其他基本类型不同,符号类型没有字面量形式。
要创建新的符号,您可以使用全局 Symbol()
函数,如本例所示:
let s = Symbol('foo');
每次调用 Symbol()
函数时都会创建一个新的唯一值:
console.log(Symbol() === Symbol()); // false
Symbol()
函数接受一个 description
作为可选参数。 description
参数将使您的符号更具描述性。
以下示例创建两个符号:firstName
和 lastName
。
let firstName = Symbol('first name');
let lastName = Symbol('last name');
您可以使用 toString()
方法访问符号的描述属性 description
。 console.log()
方法隐式调用符号的 toString()
方法,如下例所示:
console.log(firstName); // Symbol(first name)
console.log(lastName); // Symbol(last name)
由于符号是原始值,您可以使用 typeof
运算符来检查变量是否是符号。当你传入一个符号变量时,ES6 扩展了 typeof
返回 symbol
字符串:
console.log(typeof firstName); // symbol
由于符号是原始值,如果您尝试使用 new
运算符创建符号,则会抛出错误:
let s = new Symbol(); // error
共享符号
ES6 为您提供一个全局符号注册表,允许您在全球范围内共享符号。如果你想创建一个将被共享的符号,你可以使用 Symbol.for()
方法而不是调用 Symbol()
函数。
Symbol.for()
方法接受可用于描述符号的单个参数,如以下示例所示:
let ssn = Symbol.for('ssn');
Symbol.for()
方法首先使用 ssn
键在全局符号注册表中的搜索符号。如果有一个,它返回现有的符号。否则,Symbol.for()
方法创建一个新的符号,使用指定的键将其注册到全局符号注册表,然后返回该符号。
稍后,如果您使用相同的键调用 Symbol.for()
方法,Symbol.for()
方法将返回现有符号。
let citizenID = Symbol.for('ssn');
console.log(ssn === citizenID); // true
在这个例子中,我们使用 Symbol.for()
方法来查找带有 ssn
键的符号 。由于全局符号注册表已包含它,因此 Symbol.for()
方法返回现有符号。
要获取与符号关联的键,您可以使用 Symbol.keyFor()
方法,如下所示:
console.log(Symbol.keyFor(citizenID)); // 'ssn'
如果全局符号注册表中不存在符号,则 System.keyFor()
方法返回 undefined
。
let systemID = Symbol('sys');
console.log(Symbol.keyFor(systemID)); // undefined
符号用法
符号作为唯一值
每当您在代码中使用字符串或数字作为标识时,都应该改用符号。例如,您必须在任务管理应用程序中管理状态。
在 ES6 之前,您会使用诸如 open
, in progress
, completed
, canceled
, 和 on hold
之类的字符串来表示任务的不同状态。在 ES6 ,你可以像下面这样使用符号:
let statuses = {
OPEN: Symbol('Open'),
IN_PROGRESS: Symbol('In progress'),
COMPLETED: Symbol('Completed'),
HOLD: Symbol('On hold'),
CANCELED: Symbol('Canceled')
};
// complete a task
task.setStatus(statuses.COMPLETED);
符号作为对象的计算属性名称
您可以使用符号作为计算属性名称。请阅读以下示例:
let status = Symbol('status');
let task = {
[status]: statuses.OPEN,
description: 'Learn ES6 Symbol'
};
console.log(task);
要获取对象的所有可枚举属性,可以使用 Object.keys()
方法。
console.log(Object.keys(task)); // ["description"]
要获取对象的所有属性,无论这些属性是否可枚举,都可以使用 Object.getOwnPropertyNames()
方法。
console.log(Object.getOwnPropertyNames(task)); // ["description"]
要获取对象的所有符号属性,可以使用 ES6 添加的 Object.getOwnPropertySymbols()
方法。
console.log(Object.getOwnPropertySymbols(task)); //[Symbol(status)]
Object.getOwnPropertySymbols()
方法返回对象自身属性符号的数组。
内置通用(well-known)symbol
ES6 提供预定义的符号,称为well-known 符号。well-known 符号代表 JavaScript 中的常见行为。每个 well-known 符号都是 Symbol
对象的静态属性。
symbol.hasInstance
Symbol.hasInstance
是改变 instanceof
运算符行为的符号。通常,当您在使用instanceof
运算符时:
obj instanceof type;
JavaScript 将按如下方式调用 Symbol.hasIntance
方法:
type[Symbol.hasInstance](obj);
然后它依赖此方法来确定 obj
是否是 type
对象的实例。请参见以下示例。
class Stack {
}
console.log([] instanceof Stack); // false
[]
数组不是 Stack
类的实例,因此,instanceof
运算符在此示例中返回 false
。
假设你想让 []
数组是 Stack
类的一个实例,你可以添加 Symbol.hasInstance
方法如下:
class Stack {
static [Symbol.hasInstance](obj) {
return Array.isArray(obj);
}
}
console.log([] instanceof Stack); // true
Symbol.iterator
Symbol.iterator
函数是否将返回指定对象的迭代器。具有 Symbol.iterator
属性的对象称为可迭代对象。
在 ES6 ,所有集合对象 Array、Set和Map 和字符串都是可迭代对象。ES6 提供用于可迭代对象的 for...of 循环,如下例所示。
var numbers = [1, 2, 3];
for (let num of numbers) {
console.log(num);
}
// 1
// 2
// 3
在内部,JavaScript 引擎首先调用 numbers
数组的 Symbol.iterator
方法来获取迭代器对象。
然后,它调用 iterator.next()
方法并将迭代器对象的值属性复制到 num
变量中。迭代三次后,done
结果对象的属性为 true
,退出循环。
您可以通过 System.iterator
访问默认迭代器对象如下所示:
var iterator = numbers[Symbol.iterator]();
console.log(iterator.next()); // Object {value: 1, done: false}
console.log(iterator.next()); // Object {value: 2, done: false}
console.log(iterator.next()); // Object {value: 3, done: false}
console.log(iterator.next()); // Object {value: undefined, done: true}
默认情况下,集合是不可迭代的。但是,您可以使 用Symbol.iterator
以下示例中所示的方法使其可迭代:
class List {
constructor() {
this.elements = [];
}
add(element) {
this.elements.push(element);
return this;
}
*[Symbol.iterator]() {
for (let element of this.elements) {
yield element;
}
}
}
let chars = new List();
chars.add('A')
.add('B')
.add('C');
// because of the Symbol.iterator
for (let c of chars) {
console.log(c);
}
// A
// B
// C
Symbol.isConcatSpreadable
要连接两个数组,请使用以下示例中所示的 concat()
方法:
let odd = [1, 3],
even = [2, 4];
let all = odd.concat(even);
console.log(all); // [1, 3, 2, 4]
在此示例中,生成的数组包含两个数组的单个元素。此外,concat()
方法还接受非数组参数,如下所示。
let extras = all.concat(5);
console.log(extras); // [1, 3, 2, 4, 5]
数字 5 成为数组的第五个元素。
正如您在上面的示例中看到的,当我们将数组传递给方法时 concat()
, concat()
方法将数组展开为单个元素。
但是,它以不同的方式对待单个原始参数。在 ES6 之前,您无法更改此行为。这就是 Symbol.isConcatSpreadable
符号发挥作用的原因。
Symbol.isConcatSpreadable
属性是一个布尔值,用于确定是否将对象单独添加到 concat()
函数的结果中。
考虑以下示例:
let list = {
0: 'JavaScript',
1: 'Symbol',
length: 2
};
let message = ['Learning'].concat(list);
console.log(message); // ["Learning", Object]
列表对象连接到数组['Learning']
。但是,它的各个元素并没有传播。
要使 list
对象的元素在传递给 concat()
方法时单独添加到数组中,需要将Symbol.isConcatSpreadable
属性添加到 list
对象中,如下所示:
let list = {
0: 'JavaScript',
1: 'Symbol',
length: 2,
[Symbol.isConcatSpreadable]: true
};
let message = ['Learning'].concat(list);
console.log(message); // ["Learning", "JavaScript", "Symbol"]
请注意,如果您设置 Symbol.isConcatSpreadable
的值为 false
并将 list
对象传递给 concat()
方法,它将作为整个对象连接到数组。
Symbol.toPrimitive
Symbol.toPrimitive
方法确定将对象转换为原始值时应该做什么。JavaScript 引擎在每个标准类型的原型上定义 Symbol.toPrimitive
方法。
Symbol.toPrimitive
方法接受一个 hint
参数, hint
参数的值可以是:number 、 string 和 default 。
hint
参数指定返回值的类型。hint
参数由 JavaScript 引擎根据使用对象的上下文填充。
下面是使用 Symbol.toPrimitive
方法的示例。
function Money(amount, currency) {
this.amount = amount;
this.currency = currency;
}
Money.prototype[Symbol.toPrimitive] = function(hint) {
var result;
switch (hint) {
case 'string':
result = this.amount + this.currency;
break;
case 'number':
result = this.amount;
break;
case 'default':
result = this.amount + this.currency;
break;
}
return result;
}
var price = new Money(799, 'USD');
console.log('Price is ' + price); // Price is 799USD
console.log(+price + 1); // 800
console.log(String(price)); // 799USD
结论
在本教程中,您了解了 JavaScript 符号以及如何将符号用于唯一值和对象属性。此外,您还学习了如何使用well-known的符号来修改对象行为。