全部 / 前端 / 技术 · 2022年6月29日 0

48 – JavaScript 类型:Symbol

广告位招租 (vx: ghostcode, 备注:网站广告)

原文地址:https://dev.to/bhagatparwinder/javascript-types-symbol-52di

在 JavaScript 中 symbol 是原始数据类型。Symbol() 函数返回 symbol 类型的值且永远是唯一的。symbol 被用来创建唯一标识符(因为它们值的唯一特性),多数时候被用于对象属性。

创建一个 symbol

let symbol1 = Symbol();
let symbol2 = Symbol("text"

Symbol() 没有构造函数所以不支持 new Symbol(),如果使用 new 则会报错:

let symbol1 = new Symbol(); // Symbol is not a constructor

当我们创建 symbol 传入一个字符串时,它并不是把字符串作为 symbol。而是每次都返回一个新的 symbol 。这个字符串仅仅能作为一个标签并不产生任何影响。

console.log(Symbol("text") === Symbol("text")); // false

symbol 作为对象的属性

我们使用中括号来使 symbol 作为对象的属性。

let userId = Symbol("id");

let employee = {
    name: "Parwinder",
    [userId]: 727
}

console.log(employee[userId]); // 727

// above log is not similar to using the string literal "userId"
console.log(employee["userId"]); // undefined

通过 symbol 为对象创建"隐藏"属性

我们可以创建一个任何人都无法修改或重写的“隐藏”属性。

let car = {
    name: "BMW"
};

let hiddenField = Symbol("price");

car[hiddenField] = 70000;

console.log(car); // { name: 'BMW', [Symbol(price)]: 70000 }
console.log(car[hiddenField]); // 70000

通过 symbol 为对象创建一个隐藏属性在一些场景有重要的优势。

  1. 这个隐藏的属性不会影响其他模块、库或用户使用一个看不到 symbol 属性的 car 对象。
  2. 若其他人想在对象上添加一个隐藏属性,因为 symbol 的唯一性不会和你的冲突。

即使 symbol 看上去是对象上隐藏了,但我们可以通过 Object.getOwnPropertySymbols() 获取对象上的 symbols。

let car = {
    name: "BMW"
};

let hiddenField = Symbol("price");
let anotherHiddenField = Symbol("release");

car[hiddenField] = 70000;
car[anotherHiddenField] = "07/18/2020";

console.log(Object.getOwnPropertySymbols(car)); // [ Symbol(price), Symbol(release) ]

记住:symbols 不会出现在 for…in 中

let car = {
    name: "BMW",
    model: "Cooper",
    color: "Pearl White"
};

let hiddenField = Symbol("price");
let anotherHiddenField = Symbol("release");

car[hiddenField] = 70000;
car[anotherHiddenField] = "07/18/2020";

console.log(car[hiddenField]); // 70000
console.log(car[anotherHiddenField]); // 07/18/2020

for (let properties in car) {
    console.log(properties); // name, model, color
}