Symbol详解

news2024/9/22 11:24:17

Symbol

Symboles6引入的一个新的原始数据类型,是一个独一无二的值。
目前为止,js的数据类型有以下几种:

数据类型说明
undefinedundefined
nullnull
boolean布尔值
string字符串
number数字
Bigint大整数
Object对象
SymbolSymbol

Symbol通过Symbol()函数生成。对象的属性名现在除了可以使用字符串以外,还可以使用新增的Symbol类型。如果属性名使用Symbol,那么它就是独一无二的,不与其它属性名产生冲突。

let s = Symbol()
console.log(typeof s);  // symbol

注意:Symbol()函数前不能使用new,否则报错。因为生成的Symbol是一个原始类型的值,而不是对象,所以不能使用new来调用。而且,Symbol值不是对象,不能给Symbol添加属性。可以这么理解,Symbol是一种类似于字符串的数据类型。

Symbol接收字符串作为参数,表示对Symbol的描述,添加描述可以用来区分多个Symbol

let s2 = Symbol('desc')
let s3 = Symbol('desc2')
console.log(s2);  // Symbol(desc)
console.log(s3);  // Symbol(desc2)

如果Symbol的参数传入的是对象,需要把对象转为字符串再生成Symbol,否则会显示[object Object]

let obj = {
       name : '东方不败'
  }
let s4 = Symbol(JSON.stringify(obj)) 
console.log(s4); // Symbol({"name":"东方不败"})

let s5 = Symbol(obj) 
console.log(s5);// Symbol([object Object])

Symbol传入的参数只是一个描述,实际上SymbolSymbol并不相等。

let sy = Symbol()
let sy2 = Symbol()
console.log(sy === s2); // false

let sy3 = Symbol('a')
let sy4 = Symbol('a')
console.log(sy3 === sy4); // false

每调用一次Symbol()都会生成一个独一无二的值,每个Symbol都不相等。

Symbol值不能参与其他类型值的运算,否则报错。

let a = Symbol('hello')
console.log(a + 'world');  // 报错 Cannot convert a Symbol value to a string

Symbol转换

Symbol可以转换为字符串

let a2 = Symbol('hello')
console.log(String(a2)); // Symbol(hello)

如果需要返回Symbol的描述需要使用es2019提供的Symbol实例属性description返回描述。

let a2 = Symbol('hello')
console.log(a2.description); // hello

Symbol可以转换为布尔值(boolean)

let a2 = Symbol('hello')
console.log(Boolean(a2));  // true
console.log(Boolean(!a2)); // false

Symbol属性名

Symbol作为属性名

let n = Symbol()
// 方式一
let obj2 = {
      [n] : '东方不败'
   }
console.log(obj2);  // {Symbol(): '东方不败'}
console.log(obj2[n]);  // 东方不败

// 方式二
obj2[n] = '东方求败'
console.log(obj2[n]);  // 东方求败

// 方式三
let obj3 = {}
let back = Object.defineProperty(obj3,n,{value : '艺术概论'})
console.log(obj3[n]); // 艺术概论

Object.defineProperty使用说明
第一个参数:要在其上定义属性的对象
第二个参数:要定义或修改的属性的名称
第三个参数:将被定义或修改的属性描述符

Symbol值作为对象属性名时,不能用点运算符获得Symbol属性,使用点运算符相当于是给对象添加了一个字符串属性名,而不是获取Symbol

let n2 = Symbol()
let obj4 = {}
console.log(obj4.n2 = '中国工艺美术史');  // 中国工艺美术史
console.log(obj4[n2]);  // undefined
console.log(obj4);  // {n2: '中国工艺美术史'}

属性名遍历

Symbol是不可枚举的,Symbol作为对象键名时,是不可被遍历的,for...inObject.keys等方法都得不到Symbol键名,并且JSON.stringify()也不会返回Symbol

let m = Symbol('a')
let f = {
    [m]:'东方不败',
    name:'西方求败',
    name2: '光合作用'
}

// 西方求败 、 光合作用
for(k in f){
   console.log(f[k]);
}

console.log(Object.keys(f)); // ['name','name2']
console.log(JSON.stringify(f));  // {"name":"西方求败","name2":"光合作用"}

Reflect.ownKeys()可以返回常规键名和Symbol键名

console.log(Reflect.ownKeys(f)); //  ['name', 'name2', Symbol(a)] 

Object.getOwnPropertySymbols()只返回Symbol属性

console.log(Object.getOwnPropertySymbols(f)); // [Symbol(a)]

Symbol.for()、Symbol.keyFor()

Symbol.for()
Symbol有一个特性就是Symbol不等于Sombol,但有时候我们需要同一个Symbol

let r = Symbol.for('a')
let r2 = Symbol.for('a')
console.log(r === r2);  // true

Symbol.for()Symbol()都会生成新的Symbol,前者会被登记在全局环境提供搜索,后者不会。
Symbol.for()每次调用都会先检查参数key是否存在,如果不存在才会新建一个值。
Symbol()每次调用都会新建一个值。

Symbol.keyFor()
Symbol.keyFor()返回已经登记的Symbol值的key

let r3 = Symbol.for('b')
let r4 = Symbol('c')
console.log(Symbol.keyFor(r3));  // b
console.log(Symbol.keyFor(r4));  // undefined

Symbol内置值

Symbol.hasInstance

Symbol.hasInstance用来判断某个对象是否为某个构造器实例

class myClass {
     static [Symbol.hasInstance](val){
            return typeof val === 'number'
     }
     // static [Symbol.hasInstance](val){
     //     return typeof val === 'boolean'
     // }
 }
console.log(100 instanceof myClass); // true
console.log('100' instanceof myClass); // false

多个Symbol.hasInstance会覆盖,只保留最下面的那一个。


Symbol.isConcatSpreadable

Symbol.isConcatSpreadable用于表示Array.prototype.concat()是否可以展开,true、undefined可以展开,false不可展开。

let arr1 = [1,2]
let arr2 = [3,4]
console.log(arr1[Symbol.isConcatSpreadable]);  // undefined
console.log(arr1.concat(arr2));  // [1,2,3,4]

在这里插入图片描述

console.log(arr1[Symbol.isConcatSpreadable] = false)
console.log(arr1.concat(arr2)); // [[1,2],3,4]

在这里插入图片描述


Symbol.species

对象的Symbol.species属性指向一个构造函数,创建衍生对象时会使用该属性

// 这里继承了Array的原型
class MyArray extends Array { }
let a = new MyArray(1,2,3)
let b = a.map(el => el + 1)
console.log(b);  // constructor : class MyArray

在这里插入图片描述
bc调用的是数组方法,那么应该是Array的实例,但实际上它们也是MyArray的实例

class MyArray extends Array {
      static get [Symbol.species]() { return Array }
}

let a = new MyArray(1,2,3)
let b = a.map(el => el + 1)
let c = a.filter(el => el == 2)

console.log(a,b,c);  // 1,2,3    2,3,4   2
console.log(b instanceof MyArray); // false
console.log(b);  // constructor : class MyArray

在这里插入图片描述

Symbol.species可以在创建衍生对象时使用这个属性返回的函数作为构造函数。
这里returnArray,所以创建的衍生对象使用的Array作为构造函数,而不是MyArray
如果这里return一个String,那么上面的map、filter会报错,因为衍生对象使用的是String作为构造函数,String是没有数组方法的。


Symbol.match

Symbol.match指向一个函数,如果函数存在则会被调用,并返回该方法的返回值

class MyMatch {
      [Symbol.match](val){
         return 'hello world'.indexOf(val)
      }
}

// match字符串方法,可以在字符串内检索指定的值并返回
console.log('e'.match(new MyMatch()));  // 1

案例源码:https://gitee.com/wang_fan_w/es6-science-institute

如果觉得这篇文章对你有帮助,欢迎点亮一下star哟

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/132749.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[go学习笔记.第十八章.数据结构] 2.约瑟夫问题,排序,栈,递归,哈希表,二叉树的三种遍历方式

一.约瑟夫问题 josephu 问题: 设编号为1, 2 &#xff0c;... n 的n个人围坐一圈, 约定编号为 k (1<k<n &#xff09;的人从 1 开始报数&#xff0c;数到m的那个人出列&#xff0c;它的下一位又从1开始报数&#xff0c;数到 m 的那个人又出列&#xff0c;依次类推&#xf…

ActivityManagerService

1 AMS 家族 ActivityManagerService&#xff08;AMS&#xff09;主要负责系统中四大组件的启动、切换、调度以及应用程序的管理和调度工作&#xff0c;其职责与操作系统中的进程管理和调度模块类似。ActivityManagerService 进行初始化的时机很明确&#xff0c;就是在 system_…

计算机组成原理“上分秘籍”——数据的表示和运算

前言 上分地图 目录 前言 上分地图 猜你想问 Q1&#xff1a;为何要研究数据表示问题&#xff1f; Q2&#xff1a;什么叫数据表示&#xff1f;计算机中又有哪些方法&#xff1f; 正文 上分突破口1&#xff1a;进位计数法 例&#xff1a;二进制转为十进制 例&#xff…

路由综合实验

目录需求分析解决方法1&#xff0c;环回配置2&#xff0c;路由接口ip配置3&#xff0c;配置DHCP服务4&#xff0c;配置缺省5&#xff0c;静态路由配置6.浮动路由配置7&#xff0c;nat的配置8&#xff0c;远程服务及端口进行映射需求分析 一&#xff0c;原始需求如图&#xff1…

基于React Native开发的非法App破解记录

目标app YUhSMGNITTZMeTloWm1ZdWJIVnNkWE5wY2k1dFpTOD0 使用jadx反编译&#xff0c;找了一圈没有找到相应代码&#xff0c;看AndroidManifest.xml也不像有加壳的样子。。。 在lib目录下找到libreactnativejni.so文件&#xff0c;看似和react相关&#xff0c;莫非这app是大前端…

C++ Primer Plus 第六版(中文版)第五、六章(重置版)编程练习答案

//本博主所写的代码仅为阅读者提供参考&#xff1b; //若有不足之处请提出&#xff0c;博主会尽所能修改&#xff1b; //附上课后编程练习题目&#xff1b; //若是对您有用的话请点赞或分享提供给它人&#xff1b; //-----------------------------------------------------…

JavaScript奇淫技巧:反调试

JavaScript奇淫技巧&#xff1a;反调试 本文&#xff0c;将分享几种JS代码反调试技巧&#xff0c;目标是&#xff1a;实现防止他人调试、动态分析自己的代码。 检测调试&#xff0c;方法一&#xff1a;用console.log检测 代码&#xff1a; var c new RegExp ("1"…

Cesium 定位到图层(ImageryLayer)报错 DeveloperError: normalized result is not a number

Cesium 定位到图层&#xff08;ImageryLayer&#xff09;报错 DeveloperError: normalized result is not a number错误原因调试定位问题过程问题解决总结在使用 Cesium 封装代码的时候&#xff0c;遇到个奇怪的问题。 使用 viewer.flyTo(ImageryLayer) 报错&#xff1a;Devel…

【2022年度悲报】-回望2022,展望2023

文章目录一、前言-想对大家说的话二、有感而谈2022年-新年开端&#xff08;同销万古愁&#xff09;2022年-前中期&#xff08;再进再困&#xff0c;再熬再奋&#xff09;2022年-年后半段&#xff08;玉骨那愁瘴雾&#xff0c;冰姿自有仙风&#xff09;2022年-年末尾声&#xff…

简单总结:Flink和Kafka是如何做到精准一致性的

Flink CheckPoint机制 CheckPoint本质上就是检查点&#xff0c;类似于玩游戏的时候&#xff0c;需要偶尔存档&#xff0c;怕家里断电导致自己白玩。 Flink也是一样的&#xff0c;机器也是可能宕机&#xff0c;那么Flink如何保证自身不受宕机影响呢&#xff1f; 一般来说&am…

python小案例——采集财经数据

前言 大家早好、午好、晚好吖 ❤ ~ 另我给大家准备了一些资料&#xff0c;包括: 2022最新Python视频教程、Python电子书10个G &#xff08;涵盖基础、爬虫、数据分析、web开发、机器学习、人工智能、面试题&#xff09;、Python学习路线图等等 全部可在文末名片获取哦&…

MATLAB算法实战应用案例精讲-【人工智能】语义分割(补充篇)(附实战应用案例及代码)

前言 语义分割作为计算机视觉领域的关键任务,是实现完整场景理解的必经之路。为了让机器拥有视觉,要经过图像分类、物体检测再到图像分割的过程。其中,图像分割的技术难度最高。 越来越多的应用得益于图像分类分割技术,全场景理解在计算机视觉领域也至关重要。其中一些应…

强大的ANTLR4(3)--算术表达式

下面要构建一个简单的计算器&#xff0c;规则如下&#xff1a; 1&#xff09;可以由一系列语句构成&#xff0c;每条语句由换行符终止 2&#xff09;一条语句可以是表达式、赋值语句或空行 3&#xff09;可以有加减乘除、小括号以及变量出现 例如&#xff0c;文件名t.expr的内…

【Java】PriorityQueue梳理

【Java】PriorityQueue梳理 简介 PriorityQueue是优先队列的意思。优先队列的作用是能保证每次取出的元素都是队列中权值最小的。这里牵涉到了大小关系&#xff0c;元素大小的评判可以通过元素本身的自然顺序&#xff08;natural ordering&#xff09;&#xff0c;也可以通过…

linux的例行性工作

一&#xff0c;单一执行的例行性工作 定时任务&#xff0c;将来的某个时间点执行 使用单一理性工作的命令&#xff1a;at -> atd 命令 服务名 查看atd状态&#xff0c;看有没有这个服务&#xff0c;查看结果为有 我们使用 at 命令来生成所要运行的工作&#xff0c;并将…

Taro+nutui h5使用nut-signature 签名组件的采坑记录

近期在使用Taro&#xff08;“tarojs/taro”: “3.4.0-beta.0”&#xff09; Nutui &#xff08;3.1.16&#xff09;开发H5时,需要一个签名功能结果在小程序上运行正常的 nut-signature组件,在h5上出问题了 首先问题是 : Nutui的 签名组件&#xff08;nut-signature&#xff…

加解密与HTTPS(3)

您好&#xff0c;我是湘王&#xff0c;这是我的CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e; 除了对称加密算法和非对称加密算法&#xff0c;再就是最后的一种加密算法了&#xff1a;不可逆加密算法。 对称加密算法和非对称加密算法在处理明文的过程中需要…

线程池ThreadPoolExecutor的源码中是如何解决并发问题的?

ThreadPoolExecutor面临哪些线程安全问题 ThreadPoolExecutor俗称线程池&#xff0c;作为java.util.concurrent包对外提供基础实现&#xff0c;以内部线程池的形式对外提供管理任务执行&#xff0c;线程调度&#xff0c;线程池管理等等服务。 然而为高效并发而生ThreadPoolExe…

C++项目实战:职工管理系统

1.管理系统的要求 系统可以管理公司内部所有员工的信息 主要使用c实现一个基于多态的职工管理系统 公司中的职工分为三类&#xff1a;普通员工、经理、老板&#xff0c;显示信息时需要显示职工编号、职工姓名、职工岗位以及职责 普通员工职责&#xff1a;完成经理安排的各项任…

oh my 毕设-人体姿态估计综述

文章目录What is Human Pose Estimation?Classical vs. Deep Learning-based approachesClassical approaches to 2D Human Pose EstimationDeep Learning-based approaches to 2D Human Pose EstimationHuman Pose Estimation using Deep Neural NetworksOpenPoseAlphaPose (…