js中Symbol的理解与应用

文章目录

  • 一、Symbol特性
    • 1.1 不支持语法new Symbol()
    • 1.2 唯一性
    • 1.3 不与其他值隐式转换
    • 1.4 不可枚举
    • 1.5 类型为symbol
  • 二、Symbol常见方法
    • 2.1 Symbol.toStringTag
    • 2.2 Symbol.iterator
    • 2.3 Symbol.for()
  • 三、Symbol应用

在JavaScript中,Symbol 是一种基本数据类型,它是 ECMAScript 6(ES6)引入的新特性之一。Symbol 主要用于创建具有唯一性的标识符,这些标识符不会与其他任何值冲突。

一、Symbol特性

1.1 不支持语法new Symbol()

作为构造函数来说它并不完整,因为它不支持语法:“new Symbol()”

//错误用法
const mySymbol = new Symbol();
console.log(mySymbol)   //Uncaught TypeError: Symbol is not a constructor


//正确用法
const mySymbol = Symbol();
console.log(mySymbol)   //Symbol()

1.2 唯一性

每个通过 Symbol 创建的值都是唯一的,即使它们使用相同的描述

const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');

console.log(symbol1 === symbol2);  // false

1.3 不与其他值隐式转换

Symbol 不会与其他数据类型隐式转换,这意味着不能通过简单的运算等方式与字符串拼接

const mySymbol = Symbol('我是');
const str = mySymbol + '七言'
console.log(str)   //Uncaught TypeError: Cannot convert a Symbol value to a string

1.4 不可枚举

Symbol 创建的属性默认是不可枚举的,不会出现在 for…in 循环中。

const obj = {
  val: 'value1',
  [Symbol('mySymbol')]: 'value2'
};

for (let key in obj) {
  console.log(key);  // 输出 val,而不会输出 Symbol 属性
}

1.5 类型为symbol

const mySymbol = Symbol("mySymbol");
console.log(typeof mySymbol); // "symbol"

二、Symbol常见方法

2.1 Symbol.toStringTag

用于自定义对象的 Object.prototype.toString() 方法的返回值

class Fn{

}
const f = new Fn();
console.log(Object.prototype.toString.call(f))  //[object Object]

//改造一下
Fn.prototype[Symbol.toStringTag] = Fn.name;
console.log(Object.prototype.toString.call(f))  //[object Fn]

2.2 Symbol.iterator

用于定义对象的默认迭代器,使对象可以被 for…of 循环或扩展运算符(…)迭代

Object.prototype[Symbol.iterator] = function() {
        let keys = Object.keys(this);
        let length = keys.length;
        let index = 0;
        return {
            next: () => {
                return {
                    value: {[keys[index]]:this[keys[index]]},
                    done: index++ === length
                }
            }
        }
}

let obj = {
   a:1,
   b:2,
   c:3
}

for(let i of obj) {
    console.log(i);     
}

在这里插入图片描述

2.3 Symbol.for()

Symbol.for(key) 用于创建一个可被全局共享的 Symbol,如果已存在相同的 key,则返回已存在的 Symbol

Symbol.for("bar") === Symbol.for("bar");

三、Symbol应用

  • 创建私有属性或方法: 由于 Symbol 是唯一的,可以用它创建类的私有属性或方法,以避免与其他代码冲突。
  • 避免属性名冲突: 在对象中使用 Symbol 作为属性名,可以确保属性不会与其他属性冲突。
  • 使用内置Symbol方法:JavaScript 提供了一些内置的Symbol方法,如上面的,可用于定义对象的行为

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

el-table 多选表格存在分页,编辑再次操作勾选会丢失原来选中的数据

el-table表格多选时,只需要添加type"selection", row-key及selection-change,如果存在分页时需要加上reserve-selection,这里就不写具体的实现方法了,可以查看我之前的文章,这篇文章主要说一下存…

智能指针(C++)

目录 一、智能指针是什么 二、为什么需要智能指针 三、智能指针的使用和原理 3.1、RALL 3.2 智能指针的原理 3.3、智能指针的分类 3.3.1、auto_ptr 3.3.2、unique_ptr 3.3.3、shared_ptr 3.2.4、weak_ptr 一、智能指针是什么 在c中,动态内存的管理式通过一…

VPX基于全国产飞腾FT-2000+/64核+复旦微FPGA的计算刀片

6U VPX计算板 产品简介 产品特点 飞腾计算平台,国产化率100% VPX-MPU6902是一款基于飞腾FT-2000/64核的计算刀片,主频2.2GHz,负责业务数据流的管控和调度。搭配自带独立显示芯片的飞腾X100芯片,可用于于各类终端及服务器类应用场…

Spring与SpringBoot入门

Spring入门 要使用Spring最起码需要引入两个依赖: <!-- Spring Core&#xff08;核心&#xff09; --><dependency><groupId>org.springframework</groupId><artifactId>spring-core</artifactId><version>5.3.20</version>…

小白水平理解面试经典题目LeetCode 655. Print Binary Tree【Tree】

655 打印二叉树 一、小白翻译 给定二叉树的 root &#xff0c;构造一个 0 索引的 m x n 字符串矩阵 res 来表示树的格式化布局。格式化布局矩阵应使用以下规则构建&#xff1a; 树的高度为 height &#xff0c;行数 m 应等于 height 1 。 列数 n 应等于​​xheight1​​ - …

爆火的1分钟声音克隆GPT-SoVITS项目 linux系统 ubuntu22.04安装2天踩坑教程

原项目地址&#xff1a;https://github.com/RVC-Boss/GPT-SoVITS 1分钟素材&#xff0c;最后出来的效果确实不错。 1. cuda环境安装 cuda环境准备 根据项目要求在cuda11.8和12.3都测试了通过。我这里是用cuda11.8 cuda11.8安装教程&#xff1a; ubuntu 22.04 cuda多版本和…

【软件测试】--功能测试4-html介绍

1.1 前端三大核心 html:超文本标记语言&#xff0c;由一套标记标签组成 标签&#xff1a; 单标签&#xff1a;<标签名 /> 双标签:<标签名></标签名> 属性&#xff1a;描述某一特征 示例:<a 属性名"属性值"> 1.2 html骨架标签 <!DOC…

蓝桥杯第十四届电子类单片机组决赛程序设计

目录 前言 单片机资源数据包_2023&#xff08;点击下载&#xff09; 一、第十四届比赛题目 1.比赛题目 2.题目解读 1&#xff09;任务要求 2&#xff09;注意事项 二、显示功能实现 1.关于高位为0时数码管熄灭功能的实现 2.关于显示小数位的处理 3.关于“校准值”的…

某查查首页瀑布流headers加密

目标网站&#xff1a; 某查查 对目标网站分析发现 红框内的参数和值都是加密的&#xff0c;是根据算法算出来的&#xff0c;故进行逆向分析。 由于没有固定参数名&#xff0c;只能通过搜索headers&#xff0c;在搜索的位置上打上断点&#xff0c;重新请求。 断点在此处断住&a…

【计算机】本科考研还是就业?

其实现在很多计算机专业的学生考研&#xff0c;也是无奈的选择 技术发展日新月异&#xff0c;而在本科阶段&#xff0c;大家学着落后的技术&#xff0c;出来找工作自然会碰壁。而且现在用人单位的门槛越来越高&#xff0c;学历默认研究生起步&#xff0c;面试一般都是三轮起步…

循序渐进丨MogDB / openGauss 如何实现自增主键

概述 自增主键是我们在设计数据库表结构时经常使用的主键生成策略&#xff0c;主键的生成可以完全依赖数据库&#xff0c;无需人为干预&#xff0c;在新增数据的时候&#xff0c;我们只需要将主键的值设置为default&#xff0c;数据库就会为我们自动生成一个主键值。 MySQL 主键…

基于沁恒微 ch643q 多通道采集 adc 驱动层实现

一、代码 #include "main.h"/********************************************************************** fn ADC_Function_Init** brief Initializes ADC collection.** return none*/ void ADC_Function_Init(void) {ADC_InitTypeDef ADC_InitStructure …

【Go 快速入门】协程 | 通道 | select 多路复用 | sync 包

文章目录 前言协程goroutine 调度使用 goroutine 通道无缓冲通道有缓冲通道单向通道 select 多路复用syncsync.WaitGroupsync.Mutexsync.RWMutexsync.Oncesync.Map 项目代码地址&#xff1a;05-GoroutineChannelSync 前言 Go 1.22 版本于不久前推出&#xff0c;更新的新特性可…

LoRa技术在智能气象监测中的应用与解决方案分享

LoRa技术在智能气象监测领域的应用具有广泛的前景&#xff0c;通过LoRa技术可以实现对气象数据的远程采集、传输和监测&#xff0c;为气象行业提供更加智能化和高效的解决方案。以下将探讨LoRa技术在智能气象监测中的应用与解决方案分享。 首先&#xff0c;LoRa技术可以用于连…

python|闲谈2048小游戏和数组的旋转及翻转和转置

目录 2048 生成数组 n阶方阵 方阵旋转 顺时针旋转 逆时针旋转 mxn矩阵 矩阵旋转 测试代码 测试结果 翻转和转置 2048 《2048》是一款比较流行​的数字游戏​&#xff0c;最早于2014年3月20日发行。原版2048由Gabriele Cirulli首先在GitHub上发布&#xff0c;后被移…

【C语言】数据存储篇,内存中的数据存储----C语言整型,浮点数的数据在内存中的存储以及大小端字节序【图文详解】

欢迎来CILMY23的博客喔&#xff0c;本篇为​【C语言】数据存储篇&#xff0c;内存中的数据存储----C语言整型&#xff0c;浮点数的数据在内存中的存储以及大小端字节序【图文详解】&#xff0c;感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 前言 C语…

GIS之深度学习02:Anaconda2019版本安装(py38)

Anaconda是一个专注于数据科学和机器学习的开源发行版&#xff0c;内置了丰富的工具和库&#xff0c;包括Python解释器、NumPy、SciPy、Pandas、Scikit-learn、TensorFlow等&#xff0c;使用户能够轻松进行科学计算和数据分析。其强大的包管理器conda简化了软件包的安装和环境管…

Linux/Spectra

Enumeration nmap 第一次扫描发现系统对外开放了22&#xff0c;80和3306端口&#xff0c;端口详细信息如下 22端口运行着ssh&#xff0c;80端口还是http&#xff0c;不过不同的是打开了mysql的3306端口 TCP/80 进入首页&#xff0c;点击链接时&#xff0c;提示域名不能解析&…

4核8G服务器并发数多少?性能如何?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

vue3 增加全局水印(显示登录信息)

一、纯文字水印 在main.ts页面里面 加入以下代码&#xff1a; // 导入 Vue 的 createApp 函数 import { createApp } from vue;// 导入全局样式文件 import ./style.css;// 导入根组件 App.vue import App from ./App.vue;// 导入路由配置 import router from ./router;// 使…