你知道JavaScript Symbol类型怎么用吗

Symbol 类型

根据规范,对象的属性键只能是字符串类型或者 Symbol 类型。不是 Number,也不是 Boolean,只有字符串或 Symbol 这两种类型。

到目前为止,我们只见过字符串。现在我们来看看 Symbol 能给我们带来什么好处。

Symbol

"Symbol" 值表示唯一的标识符。

可以使用 Symbol() 来创建这种类型的值:

// id 是 symbol 的一个实例化对象
let id = Symbol();

创建时,我们可以给 Symbol 一个描述(也称为 Symbol 名),这在代码调试时非常有用:

// id 是描述为 "id" 的 Symbol
let id = Symbol("id");

Symbol 保证是唯一的。即使我们创建了许多具有相同描述的 Symbol,它们的值也是不同。描述只是一个标签,不影响任何东西。

例如,这里有两个描述相同的 Symbol —— 它们不相等:

let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

如果你熟悉 Ruby 或者其他有 "Symbol" 的语言 —— 别被误导。JavaScript 的 Symbol 是不同的。

注意:Symbol 不会被自动转换为字符串

JavaScript 中的大多数值都支持字符串的隐式转换。例如,我们可以 alert 任何值,都可以生效。Symbol 比较特殊,它不会被自动转换。

例如,这个 alert 将会提示出错:

let id = Symbol("id");
alert(id); // 类型错误:无法将 Symbol 值转换为字符串。

这是一种防止混乱的“语言保护”,因为字符串和 Symbol 有本质上的不同,不应该意外地将它们转换成另一个。

如果我们真的想显示一个 Symbol,我们需要在它上面调用 .toString(),如下所示:

let id = Symbol("id");
alert(id.toString()); // Symbol(id),现在它有效了

或者获取 symbol.description 属性,只显示描述(description):

let id = Symbol("id");
alert(id.description); // id

“隐藏”属性

Symbol 允许我们创建对象的“隐藏”属性,代码的任何其他部分都不能意外访问或重写这些属性。

例如,如果我们使用的是属于第三方代码的 user 对象,我们想要给它们添加一些标识符。

我们可以给它们使用 Symbol 键:

let user = { // 属于另一个代码
 name: "John"
};

let id = Symbol("id");

user[id] = 1;

alert( user[id] ); // 我们可以使用 Symbol 作为键来访问数据

在字符串 "id" 上使用 Symbol("id") 有什么好处?

因为 user 属于另一个代码,另一个代码也使用它执行一些操作,所以我们不应该在它上面加任何字段,这样很不安全。但是 Symbol 不会被意外访问到,所以第三方代码看不到它,所以使用 Symbol 也许不会有什么问题。
另外,假设另一个脚本希望在 user 中有自己的标识符,以实现自己的目的。这可能是另一个 JavaScript 库,因此脚本之间完全不了解彼此。

然后该脚本可以创建自己的 Symbol("id"),像这样:

// ...
let id = Symbol("id");

user[id] = "Their id value";

我们的标识符和他们的标识符之间不会有冲突,因为 Symbol 总是不同的,即使它们有相同的名字。

……但如果我们处于同样的目的,使用字符串 "id" 而不是用 symbol,那么 就会 出现冲突:

let user = { name: "John" };

// 我们的脚本使用了 "id" 属性。
user.id = "Our id value";

// ……另一个脚本也想将 "id" 用于它的目的……  

user.id = "Their id value"
// 砰!无意中被另一个脚本重写了 id!

字面量中的 Symbol

如果我们要在对象字面量 {...} 中使用 Symbol,则需要使用方括号把它括起来。

就像这样:

let id = Symbol("id");

let user = {
 name: "John",
 [id]: 123 // 而不是 "id:123"
};

这是因为我们需要变量 id 的值作为键,而不是字符串 "id"。

Symbol 在 for..in 中会被跳过

Symbolic 属性不参与 for..in 循环。

例如:

let id = Symbol("id");
let user = {
 name: "John",
 age: 30,
 [id]: 123
};

for (let key in user) alert(key); // name, age (no symbols)

// 使用 Symbol 任务直接访问
alert( "Direct: " + user[id] );

Object.keys(user) 也会忽略它们。这是一般“隐藏符号属性”原则的一部分。如果另一个脚本或库遍历我们的对象,它不会意外地访问到符号属性。

相反,Object.assign会同时复制字符串和 symbol 属性:

let id = Symbol("id");
let user = {
 [id]: 123
};

let clone = Object.assign({}, user);

alert( clone[id] ); // 123

这里并不矛盾,就是这样设计的。这里的想法是当我们克隆或者合并一个 object 时,通常希望 所有 属性被复制(包括像 id 这样的 Symbol)。

其他类型的属性键被强制为字符串:

我们只能在对象中使用字符串或 symbol 作为键,其它类型会被转换为字符串。

例如,在作为属性键使用时,数字 0 变成了字符串 "0":

let obj = {
 0: "test" // 和 "0": "test" 一样
};

// 两个 alert 都访问相同的属性(Number 0 被转换为字符串 "0")
alert( obj["0"] ); // test
alert( obj[0] ); // test(同一个属性)

全局 symbol

正如我们所看到的,通常所有的 Symbol 都是不同的,即使它们有相同的名字。但有时我们想要名字相同的 Symbol 具有相同的实体。例如,应用程序的不同部分想要访问的 Symbol "id" 指的是完全相同的属性。

为了实现这一点,这里有一个 全局 Symbol 注册表。我们可以在其中创建 Symbol 并在稍后访问它们,它可以确保每次访问相同名字的 Symbol 时,返回的都是相同的 Symbol。

要从注册表中读取(不存在则创建)Symbol,请使用 Symbol.for(key)。

该调用会检查全局注册表,如果有一个描述为 key 的 Symbol,则返回该 Symbol,否则将创建一个新 Symbol(Symbol(key)),并通过给定的 key 将其存储在注册表中。

例如:

// 从全局注册表中读取
let id = Symbol.for("id"); // 如果该 Symbol 不存在,则创建它

// 再次读取(可能是在代码中的另一个位置)
let idAgain = Symbol.for("id");

// 相同的 Symbol
alert( id === idAgain ); // true

注册表内的 Symbol 被称为 全局 Symbol。如果我们想要一个应用程序范围内的 Symbol,可以在代码中随处访问 —— 这就是它们的用途。

这听起来像 Ruby:

在一些编程语言中,例如 Ruby,每个名字都有一个 Symbol。

正如我们所看到的,在 JavaScript 中,全局 Symbol 也是这样的。

Symbol.keyFor

对于全局 Symbol,不仅有 Symbol.for(key) 按名字返回一个 Symbol,还有一个反向调用:Symbol.keyFor(sym),它的作用完全反过来:通过全局 Symbol 返回一个名字。

例如:

// 通过 name 获取 Symbol
let sym = Symbol.for("name");
let sym2 = Symbol.for("id");

// 通过 Symbol 获取 name
alert( Symbol.keyFor(sym) ); // name
alert( Symbol.keyFor(sym2) ); // id

Symbol.keyFor 内部使用全局 Symbol 注册表来查找 Symbol 的键。所以它不适用于非全局 Symbol。如果 Symbol 不是全局的,它将无法找到它并返回 undefined。

也就是说,任何 Symbol 都具有 description 属性。

例如:

let globalSymbol = Symbol.for("name");
let localSymbol = Symbol("name");

alert( Symbol.keyFor(globalSymbol) ); // name,全局 Symbol
alert( Symbol.keyFor(localSymbol) ); // undefined,非全局

alert( localSymbol.description ); // name

系统 Symbol

JavaScript 内部有很多“系统” Symbol,我们可以使用它们来微调对象的各个方面。
它们都被列在了众所周知的 Symbol表的规范中:

  • Symbol.hasInstance
  • Symbol.isConcatSpreadable
  • Symbol.iterator
  • Symbol.toPrimitive
  • ……等等。

例如,Symbol.toPrimitive 允许我们将对象描述为原始值转换。我们很快就会看到它的使用。
当我们研究相应的语言特征时,我们对其他的 Symbol 也会慢慢熟悉起来。

总结

Symbol 是唯一标识符的基本类型

Symbol 是使用带有可选描述(name)的 Symbol() 调用创建的。

Symbol 总是不同的值,即使它们有相同的名字。如果我们希望同名的 Symbol 相等,那么我们应该使用全局注册表:Symbol.for(key) 返回(如果需要的话则创建)一个以 key 作为名字的全局 Symbol。使用 Symbol.for 多次调用 key 相同的 Symbol 时,返回的就是同一个 Symbol。

Symbol 有两个主要的使用场景:

  • “隐藏” 对象属性。如果我们想要向“属于”另一个脚本或者库的对象添加一个属性,我们可以创建一个 Symbol 并使用它作为属性的键。Symbol 属性不会出现在 for..in 中,因此它不会意外地被与其他属性一起处理。并且,它不会被直接访问,因为另一个脚本没有我们的 symbol。因此,该属性将受到保护,防止被意外使用或重写。

因此我们可以使用 Symbol 属性“秘密地”将一些东西隐藏到我们需要的对象中,但其他地方看不到它。

  • JavaScript 使用了许多系统 Symbol,这些 Symbol 可以作为 Symbol.* 访问。我们可以使用它们来改变一些内置行为。例如,在本教程的后面部分,我们将使用 Symbol.iterator 来进行 迭代操作,使用 Symbol.toPrimitive 来设置 对象原始值的转换等等。

从技术上说,Symbol 不是 100% 隐藏的。有一个内置方法Object.getOwnPropertySymbols(obj)允许我们获取所有的 Symbol。还有一个名为 Reflect.ownKeys(obj)的方法可以返回一个对象的 所有 键,包括 Symbol。所以它们并不是真正的隐藏。但是大多数库、内置方法和语法结构都没有使用这些方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 深入了解JavaScript中的Symbol的使用方法

    Symbol 是什么? Symbols 不是图标,也不是指在代码中可以使用小图片: 也不是指代其他一些东西的语法.那么,Symbol 到究竟是什么呢? 七种数据类型 JavaScript 在 1997 年被标准化时,就有 6 种数据类型,直到 ES6 出现之前,程序中的变量一定是以下 6 种数据类型之一: Undefined     Null     Boolean     Number     String     Object 每种数据类型都是一系列值的组合,前面 5 种数据类型值的数量都是

  • 详解JavaScript 为什么要有 Symbol 类型?

    Symbols 是 ES6 引入了一个新的数据类型 ,它为 JS 带来了一些好处,尤其是对象属性时. 但是,它们能为我们做些字符串不能做的事情呢? 在深入探讨 Symbol 之前,让我们先看看一些 JavaScript 特性,许多开发人员可能不知道这些特性. 背景 js 中的数据类型总体来说分为两种,他们分别是:值类型 和 引用类型 值类型(基本类型):数值型(Number),字符类型(String),布尔值型(Boolean),null 和 underfined 引用类型(类):函数,对象,数

  • Javascript ES6中数据类型Symbol的使用详解

    介绍 Symbol 是一种特殊的.不可变的数据类型,可以作为对象属性的标识符使用,表示独一无二的值.Symbol 对象是一个 symbol primitive data type 的隐式对象包装器. 它是JavaScript语言的第七种数据类型,前6种分别是:Undefined.Null.Boolean.String.Number.Object. 语法 Symbol([description]) Parameters description : 可选的字符串.可用于调试但不访问符号本身的符号的说

  • 你知道JavaScript Symbol类型怎么用吗

    Symbol 类型 根据规范,对象的属性键只能是字符串类型或者 Symbol 类型.不是 Number,也不是 Boolean,只有字符串或 Symbol 这两种类型. 到目前为止,我们只见过字符串.现在我们来看看 Symbol 能给我们带来什么好处. Symbol "Symbol" 值表示唯一的标识符. 可以使用 Symbol() 来创建这种类型的值: // id 是 symbol 的一个实例化对象 let id = Symbol(); 创建时,我们可以给 Symbol 一个描述(也

  • 详解JavaScript的Symbol类型、隐藏属性、全局注册表

    目录 Symbol类型的使用 Symbol简介 Symbol类型的描述 Symbol不会隐式转字符串 Symbol类似作为对象的属性键 创建Symbol键 for…in中被跳过 隐藏自定义属性 Symbol全局注册表 系统Symbol 总结 Symbol类型的使用 在前文<JavaScript的8种数据类型>中,我们已经简单的介绍过了JavaScript的Symbol类型,下面对其使用方法和使用场景做一个简单的介绍. Symbol简介 Symbol类型是JavaScript中的一种特殊的类型,

  • ES6中Symbol类型用法实例详解

    本文实例讲述了ES6中的Symbol类型.分享给大家供大家参考,具体如下: Symbol是在ES6中新加入的类型. 正如我们所知,JavaScript中有以下几种类型: Undefined ,Null ,Boolean ,Number ,String, Object. 但是上述类型在处理某些情况的时候是远远不够的.下面我们来举一个例子: 假设我们要移动div,也需要在某些情况下判断该div是否处于移动状态,所以我们会想到给div这类的对象设置一个属性. if (element.isMoving)

  • Javascript Symbol原理及使用方法解析

    Symbol是ES6中新引入的一种基本数据类型,在此之前JavaScript中已有几种基本数据类型: Numberg String Boolean Null Undefined Object 不同于其他基本类型的通俗易懂,Symbol 是什么和有什么用一直有些让人困惑. 什么是Symbol JavaScript标准中规定对象的key只能是 String 或 Symbol 类型,区别在于 String 类型的key可以重复而 Symbol 类型的key是唯一的.Symbol 的本质是表示一个唯一标

  • JavaScript:Array类型全面解析

    JavaScript中的数组类型与其他语言中的数组有着很大的区别.JavaScript中的每一项可以保存任何类型的数据.而且,JavaScript数组的大小是可以动态调整的,可以随着数据的添加自动增长以容纳新增数据. 创建数组的基本形式有两种. 1.Array构造函数 var cities = new Array(); 如果预先知道要保存的项目数量,也可以给构造函数传递该数量,该数量会自动变成length属性的值. var cities = new Array(3); 也可以向Array构造函数

  • JavaScript:Date类型全面解析

    创建一个日期对象,使用new操作符后跟Date的构造函数. var date = new Date(); 调用默认构造函数情况下,新创建的日期自动获得当前时间和日期.如果需要指定日期和时间,需要传入表示该日期的毫秒数. JavaScript中提供了两个方法来计算日期,Date.parse()方法接收一个表示日期的字符串参数,然后根据这个日期返回相应的日期毫秒数.但是日期的格式往往因实现以及地区而异.Date.UTC()也返回表示日期的毫秒数,它的参数分别是年份.基于0的月份(一月是0).月中的那

  • 浅析JavaScript基本类型与引用类型

    对于 JavaScript 类型,可以简单地概括为:相对于强类型语言来说,它是弱(松散)类型的语言:有基本类型和引用类型,他们是区别是一个有固定空间存在于栈内存中,一个没有固定空间保存在堆内存中并且在栈内存中保存了一个指向实现位置的指针. 市面上很多书都有不小的篇幅在讲.这篇文章会讲几个方面,这些方面可能会需要你对 JavaScript 已经有了一些简单的了解,特别是 JavaScript 的类型.如果还不一解,可以随手拿起一本关于 JavaScript 的书翻翻,再来看本文. 一.基本类型与引

  • 深入剖析JavaScript:Object类型

    在JavaScript中,引用类型是一种数据结构,用于将数据和功能组织在一起. 对象是某个特定引用类型的实例.对象的创建方式: var person = new Object(); 上面的例子创建了Object引用类型的一个新实例,然后把该实例保存在变量person中. 创建对象有构造函数和对象字面量两种方式. 1.构造函数方式 使用new操作符后跟Object构造函数. var p = new Obejct(); p.name = "萧萧弈寒"; p.age = 18: 2.对象字面

  • Flow之一个新的Javascript静态类型检查器

    今天我们兴奋的发布了 Flow 的尝鲜版,一个新的Javascript静态类型检查器.Flow为Javascript添加了静态类型检查,以提高开发效率和代码质量.更明确的说,静态类型检查提供的好处像早期错误检查,帮助你发现一些只有在运行时才能发现的错误,以及代码智能感知,它会帮助代码维护,查找,重构和优化. 我们设计Flow的所有功能构建在现有Javascript规范之上.因为Flow主动地在后台工作,所以额外的编译开销很小.Flow并不要求开发者如何编写代码 -- 她用一套复杂的算法分析你熟悉

随机推荐