【ES6】—【新特性】—Symbol详情

news2024/10/7 16:15:23

在这里插入图片描述

一、一种新的原始数据类型

定义:独一无二的字符串

二、 声明方式

1. 无描述声明

let s1 = Symbol()
let s2 = Symbol()
console.log(s1, s2)
// Symbol() Symbol()
console.log(s1 === s2) 
// false

PS: Symbol 声明的值是独一无二的

2. 有描述的声明

let s1 = Symbol('foo')
let s2 = Symbol('bar')
console.log(s1, s2)
// Symbol(foo) Symbol(bar)
console.log(s1 === s2) 
// false

3. 参数为对象时,自动调用对象的toString方法,转换为字符串

let obj = {
	name: 'xiaoxiao'
}
let s = Symbol(obj)
console.log(s)
// Symbol([object Object])

3. 通过description 获取描述

let s = Symbol('foo')
console.log(s.description)
// foo

4.Symbol.for() 表示再全局环境下声明的

let s1 = Symbol.for('foo'); 
let s2 = Symbol.for('foo');
console.log(s1 === s2) // true
// 第一步,在全局环境下声明一个字符串foo,并把foo字符串赋值给s1
// 第二步, 在全局环境下声明一个字符串foo, 发现该字符串之前已经声明过,直接把s1的值赋给s2
// s2指向的s1的值,所以s1 === s2

PS: 无论Symbol.for()在哪里声明,都属于全局环境声明

function foo () {
	return Symbol.for('foo')
}
const x = foo()
const y = Symbol.for('foo')
console.log(x === y) // true

5. Symbol.keyFor() 返回 Symbol.for的 描述,返回全局声明的描述

const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefined
const s2 = Symbol.for('xiaoxiao')
console.log(Symbol.keyFor(s2)) // xiaoxiao

三、 应用场景

1. 防止对象的key值重复覆盖前面的值

  1. 当一个对象的key值有重复时,后面的值会覆盖前面的值
const grade= {
	张三: {address:'xxx', tel: '111'},
	李四: {address:'yyy', tel: '222'},
	李四: {address:'zzz', tel: '333'},
}
console.log(grade)
/* {
    "张三": {
        "address": "xxx",
        "tel": "111"
    },
    "李四": {
        "address": "zzz",
        "tel": "333"
    }
}
*/

PS: 使用Symbol的独一无二的特性来解决

const stu1 = Symbol('张三');
const stu2 = Symbol('李四');
const stu3 = Symbol('李四')
// 当key是一个变量时,需要给变量加一个中括号
const grader = {
	[stu1]: {address:'xxx', tel: '111'},
	[stu2]: {address:'zzz', tel: '222'},
	[stu3]: {address:'yyy', tel: '333'},
}
console.log(grader)

2. 普通属性和Symobl属性的显示与隐藏

const sym = Symbol("imooc")
class User {
	constructor(name) {
		this.name = name 
		this[sym] = 'imooc.com'
	}
	getName () {
		return this.name + this[sym]
	}
}
const user = new User ('xiaoxiao')
console.log(user.getName())
// xiaoxiaoimooc.com

// PS: for in + 遍历对象的key, 无法获取出symbol的属性, 对Symobl属性进行了隐藏
for (let key in user) {
	console.log(key)
	// name
}
// PS: for of + Object.keys(), 无法获取出symbol的属性,对Symbol属性进行了隐藏
for (let key of Object.keys(user)) {
	console.log(key)
	// name
}
// PS:  for of + Object.getOwnPropertySymbols(), 只能获取symbol的属性,普通属性被隐藏
for (let key of Object.getOwnPropertySymbols(user)) {
	console.log(key)
	// Symbol(imooc)
}
// PS:  for of + Reflect.ownKeys(), 既可以获取symbol属性,也可以获取普通属性
for (let key of Reflect.ownKeys(user)) {
	console.log(key)
	// name
	// Symbol(imooc)
}

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

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

相关文章

Android自定义view实现横向滚动弹幕

参考文章 此方案使用动画方式实现,只适合轻量级别的弹幕滚动效果实现,数据量过大时会出现内存激增的情况。 效果: 自定义view代码 public class TumbleLayout extends ViewGroup {private final String TAG "TumbleLayout";priva…

Camunda 7.x 系列【30】中间事件

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址:https://gitee.com/pearl-organization/camunda-study-demo 文章目录 1. 概述2. 消息中间事件3. 定时器中间事件4. 信号中间事件5. 错误中间事件6. 条件中间事件7…

代码随想录算法训练营第五十天|LeetCode 739,496

目录 LeetCode 739.每日温度 LeetCode 496.下一个更大元素! LeetCode 739.每日温度 文章讲解:代码随想录 力扣题目:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 代码如下(Java)&#xf…

Python“牵手”义乌购商品列表数据,关键词搜索义乌购API接口数据,义乌购API接口申请指南

义乌购平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范,义乌购API接口是指通过编程的方式,让开发者能够通过HTTP协议直接访问义乌购平台的数据,包括商品信息、店铺信息、物流信息等,从而实现义…

国标GB28181视频平台EasyGBS视频监控平台无法播放,抓包返回ICMP排查过程

国标GB28181视频平台EasyGBS是基于国标GB/T28181协议的行业内安防视频流媒体能力平台,可实现的视频功能包括:实时监控直播、录像、检索与回看、语音对讲、云存储、告警、平台级联等功能。国标GB28181视频监控平台部署简单、可拓展性强,支持将…

产品经理工作常见的4大误区

产品管理对项目来说非常重要,但在日常工作中,我们往往容易进入思维误区,如果我们没有及时发现错误并进行纠正,这会对产品需求工作以及项目进度产生较大影响。 因此我们需要重视产品工作中常见的思维误区并及时避免,常见…

2023Web自动化测试的技术框架和工具有哪些?

Web 自动化测试是一种自动化测试方式,旨在模拟人工操作对 Web 应用程序进行测试。这种测试方式可以提高测试效率和测试精度,减少人工测试的工作量和测试成本。在 Web 自动化测试中,技术框架和工具起着至关重要的作用。本文将介绍几种常见的 W…

如何让你的交易高效且安全?离不开这项技术

作者|Jason Jiang 在区块链技术演变过程中,有两个关键问题始终绕不过去:隐私与扩容。当我们探寻这两个问题的“标准解法”时,却发现它们都离不开一种技术,那就是:零知识证明。什么是零知识证明&#xff1f…

Dubbo源码环境搭建

背景 Dubbo 作为一款微服务框架,最重要的是向用户提供跨进程的 RPC 远程调用能力。如上图所示,Dubbo 的服务消费者(Consumer)通过一系列的工作将请求发送给服务提供者(Provider)。 为了实现这样一个目标&a…

Apipost: 程序员必备的API管理神器

作为一款专为程序员打造的API管理工具,Apipost也成为开发人员圈子里的一款热门工具。Apipost拥有强大的功能和便捷操作性,这也让许多开发者爱不释手。那么,Apipost到底有哪些吸引人的特点呢?本文将为您详细介绍。 统一API管理 A…

【具身智能】论文系列解读-RL-ViGen

1. RL-ViGen:视觉泛化的强化学习基准 RL-ViGen: A Reinforcement Learning Benchmark for Visual Generalization 0 摘要与总结 视觉强化学习(Visual RL)与高维观察相结合,一直面临着分布外泛化的长期挑战。尽管重点关注旨在解…

[QT]设置程序仅打开一个,再打开就唤醒已打开程序的窗口

需求&#xff1a;speedcrunch 这个软件是开源的计算器软件。配合launch类软件使用时&#xff0c;忘记关闭就经常很多窗口&#xff0c;强迫症&#xff0c;从网上搜索对版本进行了修改。 #include "gui/mainwindow.h"#include <QCoreApplication> #include <…

如何基于自己训练的Yolov5权重,结合DeepSort实现目标跟踪

网上有很多相关不错的操作demo&#xff0c;但自己在训练过程仍然遇到不少疑惑。因此&#xff0c;我这总结一下操作过程中所解决的问题。 1、deepsort的训练集是否必须基于逐帧视频&#xff1f; 我经过尝试&#xff0c;发现非连续性的图像仍可以作为训练集。一个实例&#xff0…

kubernetes搭建及基本使用

1. 前置要求准备 一台或多台机器&#xff0c;操作系统 CentOS7.x-86_x64硬件配置&#xff1a;2GB 或更多 RAM&#xff0c;2 个 CPU 或更多 CPU&#xff0c;硬盘 30GB 或更多集群中所有机器之间网络互通可以访问外网&#xff0c;需要拉取镜像禁止 swap 分区 此处我是白嫖的谷歌云…

No122.精选前端面试题,享受每天的挑战和学习

文章目录 1、vue中key的作用2、如何让vue页面重新渲染3、组件之间通信方式4、vue为什么要mutation、 action操作5、插槽、具名插槽、作用域插槽6、用set求两个数组的交集7、树用js如何实现&#xff1f; 1、vue中key的作用 在Vue中&#xff0c;key的作用是帮助Vue识别每个VNode…

性能评估之旅:软件测试的神秘工具与方法论

引言&#xff1a;性能评估的重要性 在当今的软件开发领域&#xff0c;性能评估已经成为了一个不可或缺的环节。随着用户对于软件响应速度和稳定性的要求越来越高&#xff0c;如何确保软件在各种环境下都能稳定运行&#xff0c;成为了每一个开发者和测试者必须面对的问题。性能…

【App端】uni-app使用echarts和百度地图api

目录 前言方案一&#xff1a;echarts百度地图获取百度地图AK安装echarts和引入百度地图api完整使用代码 方案二&#xff1a;echarts地图和柱状图变形动画完整使用代码 前言 近期的app项目中想加一个功能&#xff0c;展示全国各地的某一数据统计情况&#xff0c;想来想去&#…

搭建Android自动化python+appium环境

一. 需要软件 1. JDK:JAVA安装后配置JDK环境 2. SDK:SDK下载后配置adb环境 3. Python:pyhton语言 4. Pycharm:python脚本编译工具 5. Appium-python-client:pyhton中的库 6. Appium客户端 二. 搭建步骤 1. 配置JDK环境 ①. 下载安装java: https://www.oracle.com/jav…

windows下Mysql安装配置教程

Mysql下载 在官网下载mysql community Server https://dev.mysql.com/downloads/mysql/ 可以选择下载压缩包或者MSI安装程序 使用压缩包安装 MySQL 压缩包安装通常需要以下步骤&#xff1a; 1. 下载 MySQL 安装包 你可以从 MySQL 官网上下载适合你系统的 MySQL 安装包&am…

Android软键盘弹出,底部的控件随之弹出,但整体布局不会向上弹

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.co…