JavaScript Symbol对象
JavaScript Symbol对象
Symbol
Symbol
对象是es6
中新引进的一种数据类型,它的作用非常简单,就是用于防止属性名冲突而产生。
Symbol
的最大特点就是值是具有唯一性,这代表使用Symbol
类型的值能做独一无二的一些事情。
此外,Symbol
没有构造函数,这使得我们不能new
它,直接使用即可。
基础知识
声明Symbol
使用Symbol()
声明一个独一无二的值。
<script>
"use strict";
let Sym1 = Symbol(); // 独一无二的值
let Sym2 = Symbol();
console.log(typeof Sym1); // symbol
console.log(Sym1 == Sym2); // false
</script>
描述信息
为Symbol
的值在声明时添加一段描述信息。
使用description
属性可查看描述信息。
注意:即使两个
Symbol
的描述信息是一样的也不会有什么问题,因为它仅仅是描述信息而已。
<script>
"use strict";
let Sym1 = Symbol("这是Sym1的描述信息"); // 独一无二的值
let Sym2 = Symbol("这是Sym2的描述信息");
console.log(Sym1.description); // 这是Sym1的描述信息
console.log(Sym2.description); // 这是Sym2的描述信息 </script>
Symbol.for
使用Symbol()
来创建值不会进行记录,所以无论值看起来是否一样都不会引用同一份内存地址。
而使用Symbol.for()
来创建值则会进行记录,下次再创建相同的值时会直接引用记录的内存地址。
<script>
"use strict";
let Sym1 = Symbol("测试"); // 独一无二的值
let Sym2 = Symbol("测试");
console.log(Sym1 == Sym2); // false
</script>
<script>
"use strict";
let Sym1 = Symbol.for("测试"); // 将这个值的内存地址记录,下次再创建时直接引用内存地址
let Sym2 = Symbol.for("测试");
console.log(Sym1 == Sym2); // true
</script>
Symbol.keyFor
用于返回由Symbol.for()
创建的值的描述信息。
如果值没有描述信息则返回undefined
。
当然,我们也可以使用description
属性来获取描述信息,二者皆可。
<script>
"use strict";
let Sym1 = Symbol.for("测试"); // 将这个值的内存地址记录,下次再创建时直接引用内存地址
let Sym2 = Symbol.for();
console.log(Symbol.keyFor(Sym1)); // 测试
console.log(Symbol.keyFor(Sym2)); // undefined
console.log(Sym1.description); // 测试
console.log(Sym2.description); // undefined
</script>
实际应用
对象属性
Js
中的对象(键)如果直接声明就会变成String
类型,这在某些程度上可能会引起对象属性冲突问题。
对象的键最好是唯一的,Symbol
类型的值无疑是最好的选择。
当我们给想对象的键设置为Symbol
类型的值的时候需要注意2点问题。
Symbol
声明和访问使用[]
(变量)形式操作不能使用
.
语法因为.
语法是操作字符串属性的
<script>
"use strict";
let username = Symbol(); // 将这个值的内存地址记录,下次再创建时直接引用内存地址
let age = Symbol();
let dic = { // 声明时加上 [] 否则会变成String类型 --> "username"
[username]:"云崖",
[age]:18,
};
// 不能使用 . 语法获取值(属性)
console.log(dic[username]); // 云崖
console.log(dic[age]); //
</script>
对象遍历
Symbol
类型值不能被 for/in
、for/of
遍历操作找到。
以下示例可以看出,找不到两个Symbol
类型的键。
<script>
"use strict";
let username = Symbol(); // 将这个值的内存地址记录,下次再创建时直接引用内存地址
let age = Symbol();
let dic = { // 声明时加上 [] 否则会变成String类型 --> "username"
[username]: "云崖",
[age]: 18,
"gender": "男",
};
for (let i in dic) {
console.log(i); // gender
}
// for/of 只能遍历一个迭代对象,不能直接遍历对象。所以我们使用Object.keys(dic)将dic转换为一个迭代对象。
for (let i of Object.keys(dic)) {
console.log(i); // gender
}
</script>
可以使用 Object.getOwnPropertySymbols
获取所有Symbol
属性(键)。
注意,这是仅仅获取Symbol
的属性(键)。
<script>
"use strict";
let username = Symbol(); // 将这个值的内存地址记录,下次再创建时直接引用内存地址
let age = Symbol();
let dic = { // 声明时加上 [] 否则会变成String类型 --> "username"
[username]: "云崖",
[age]: 18,
"gender": "男",
};
for (let i in Object.getOwnPropertySymbols(dic)) {
console.log(i); // 0 1
}
// for/of 只能遍历一个迭代对象,不能直接遍历对象。所以我们使用Object.keys(dic)将dic转换为一个迭代对象。
for (let i of Object.getOwnPropertySymbols(dic)) {
console.log(i); // (2) Symbol()
}
</script>
也可以使用 Reflect.ownKeys(obj)
获取所有属性(键)包括Symbol
类型的属性。
<script>
"use strict";
let username = Symbol(); // 将这个值的内存地址记录,下次再创建时直接引用内存地址
let age = Symbol();
let dic = { // 声明时加上 [] 否则会变成String类型 --> "username"
[username]: "云崖",
[age]: 18,
"gender": "男",
};
for (let i in Reflect.ownKeys(dic)) {
console.log(i); // 0 1 2
}
console.log("*".repeat(20));
// for/of 只能遍历一个迭代对象,不能直接遍历对象。所以我们使用Object.keys(dic)将dic转换为一个迭代对象。
for (let i of Reflect.ownKeys(dic)) {
console.log(i); // gender (2) Symbol()
}
</script>
私有属性
我们可以使用Symbol
不能被for/in
以及for/of
访问的特性,为类制作私有属性以及提供访问接口。
<script>
"use strict";
const sex = Symbol("性别");
class User {
constructor(name, age, gender) {
this[sex] = gender; // 存入类对象中
this.name = name;
this.age = age;
}
getMsg() {
// 我们希望通过提供的API接口来让用户调出gender属性
return `姓名:${this.name},年龄:${this.age},性别:${this[sex]}`
}
}
let u1 = new User("云崖", 18, "男");
console.log(u1.getMsg()); // 只能通过接口来拿到性别 姓名:云崖,年龄:18,性别:男
// 如果循环不管是for/in还是for/of都是拿不到性别的
for (const i in u1) {
console.log(i);
// name
// age
}
</script>
JavaScript Symbol对象的更多相关文章
- JavaScript 复制对象
在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...
- javaScript遍历对象、数组总结(转载)
javaScript遍历对象.数组总结 转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...
- JavaScript原生对象及扩展
来源于 https://segmentfault.com/a/1190000002634958 内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始 ...
- JavaScript 复制对象【Object.assign方法无法实现深复制】
在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...
- JavaScript Set对象
JavaScript Set对象 Set 用于存储任何类型的唯一值,无论是基本类型还是引用类型. 只有值没有键 严格类型检测存储,字符串数字不等同于数值型数字 存储的值具有唯一性 遍历顺序是添加的顺序 ...
- JavaScript 遍历对象、数组总结
在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用! javaScript遍历对象总结 1.使用Objec ...
- javascript 全局对象--w3school
JavaScript全局对象 1. decodeURI()解析某个编码的URI. 2.decodeURInComponent()解析一个编码的URI组件. 3.encodeURI()把字符串编码为U ...
- JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString
JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...
- 从零构建JavaScript的对象系统
一.正统的类与继承 类是对象的定义,而对象是类的实例(Instance).类不可直接使用,要想使用就必须在内存上生成该类的副本,这个副本就是对象. 以Java为例: public class Grou ...
随机推荐
- autocomplete 之 ASP.NET
<link href="CSS/jquery.autocomplete.css" rel="stylesheet" type="text/css ...
- Nacos配置中心原理
动态配置管理是 Nacos 的三大功能之一,通过动态配置服务,我们可以在所有环境中以集中和动态的方式管理所有应用程序或服务的配置信息. 动态配置中心可以实现配置更新时无需重新部署应用程序和服务即可使相 ...
- TCP/IP通信网络基础
TCP/IP是互联网相关的各类协议族的总称. TCP/IP的分层管理 分层的优点:如果只有一个协议在互联网上统筹,某个地方修改就要把所有的部分整体换掉,采用分层则只需要改变相应的层.把各个接口部分规划 ...
- (私人收藏)红色项目工作计划总结汇报PPT模板
红色项目工作计划总结汇报PPT模板 https://pan.baidu.com/s/1fr-PB7ieveSIqSXrB0YXsgbgdc
- css modules是什么?
什么是CSS Modules? 官方的介绍是: 所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件.所以 CSS Modules 不是一个官方的规范,也不是浏览器的一种机制,它是 ...
- (二)LVS介绍
LVS分3种模式 (a)NAT(网络地址映射):通过网络地址转换的方法来实现调度 优点:支持所有操作系统及私有网络,且只需一个公网 IP 地址 缺点:用户请求和响应报文都必须 ...
- 51Nod 1534 棋子游戏 题解
题目 波雷卡普和瓦西里喜欢简单的逻辑游戏.今天他们玩了一个游戏,这个游戏在一个很大的棋盘上进行,他们每个人有一个棋子.他们轮流移动自己的棋子,波雷卡普先开始.每一步移动中,波雷卡普可以将他的棋子从(x ...
- C#foreach原理
本文主要记录我在学习C#中foreach遍历原理的心得体会. 对集合中的要素进行遍历是所有编码中经常涉及到的操作,因此大部分编程语言都把此过程写进了语法中,比如C#中的foreach.经常会看到下面的 ...
- Linux上运行安卓应用:安装使用Anbox
文章目录 #0x0 简介 #0x1 安装教程 #0x11 第一步,安装需要的内核模块 #0x12 安装Anbox #0x2 使用Anbox #0x21 一些简单的设置 #0x22 安装APK #0x3 ...
- 数据库/MySQL的安装
来源:https://www.cnblogs.com/liubing8/p/11431382.html mysql的安装.启动和基础配置 —— windows版本 1.下载 第一步:打开网址,http ...