ES6 Symbol 数据类型

ES6-Symbol 类型


  1. ES5 除类数组对象(类数组对象名可以为数字,对象必须有 length 属性,可以用数组下标的方式访问对象属性,但不能通过点的方式访问)外,对象属性名都是字符串,这很容易造成属性名的冲突。而且 JavaScript 是弱类型语言,属性名冲突不会报错,处于代码执行顺序后面的属性值会覆盖前面的属性值(属性值容易被篡改),这样对象的属性就不能保证是我们想要的。

  2. ES6 引入了Symbol数据类型很好地解决了对象属性名冲突的问题。

  3. Symbol表示 独一无二的值 ,它是原始数据类型,不能用 new

  4. ES6之后JavaScript就有了7种数据类型,分别是:NumberStringBooleannullundefinedObjectSymbol

基本用法


Symbol 函数栈不能用 new 命令,因为 Symbol 是原始数据类型,不是对象。可以接受一个字符串作为参数,为新创建的 Symbol 提供描述,用来显示控制台或者作为字符串的时候使用,便于区分。

let name = Symbol('name');
console.log(name); // Symbol(name);
console.log(typeof name); // "symbol"

特点

  1. Symbol 函数栈不能用 new 命令,因为 Symbol 是原始数据类型,不是对象;

  2. Symbol 表示独一无二的值,因此带有相同参数的两个 Symbol 值也不相等;

// 没有参数的情况
let name1 = Symbol();
let name2 = Symbol();name1 === name2 // false// 有参数的情况
let name1 = Symbol('foo');
let name2 = Symbol('foo');name1 === name2 // false
  1. Symbol 不能进行隐式类型转换
let name = Symbol('foo');
console.log('你好,' + name);
// 报错:Cannot convert a Symbol value to a string(无法将symbol值转换为字符串)console.log(`你好,${name}`);
// 报错:Cannot convert a Symbol value to a string(无法将symbol值转换为字符串)console.log(name + 1);
// 报错:Cannot convert a Symbol value to a number(无法将symbol值转换为数值)
  1. Symbol 值可以显式转为字符串
let name = Symbol('foo');
console.log(String(name)); // "Symbol(foo)"
console.log(name.toString); // "Symbol(foo)"
  1. Symbol 值不能转化为数字
let name = Symbol('foo');
console.log(Number.name);
// 报错:Cannot convert a Symbol value to a number(无法将symbol值转换为数值)
  1. Symbol 值可以转换为布尔值
let name = Symbol('foo');
console.log(Boolean(name)); // true
console.log(!name); // false

Symbol 应用场景


  1. 作为对象属性名

Symbol 声明的对象名不能用 key.value 的形式获取对象的属性值,要用 [ ],原因:
1. ES5中对象 .(点) 运算符获取的属性名是字符串, 用 key.value 的形式会将属性名识别为字符串,新建一个属性名给对象,无法和 Symbol 属性区别
2. 方括号中带双引号的属性名表示字符串属性,不带双引号的属性名表示 Symbol 属性,一次区别二者

let sy = Symbol();// 写法 1
let syObject = {};
syObject[sy] = 'symbol';
console.log(syObject); // {Symbol(): "symbol"}// 写法 2
let syObject = {[sy]: "symbol"
};
console.log(syObject); // {Symbol(): "symbol"}// 写法 3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "symbol"});
console.log(syObject); // {Symbol(): "symbol"}// 万万不能用点
syObject[sy]; // "symbol";
syObject.sy; // 'undefined'
// 因为 syObject.sy === syObject["sy"]
  1. Symbol 值作为属性名时,该属性是公有属性不是私有属性,可以在类的外部访问。但是不会出现在 for...infor...of 的循环中,也不会被 Object.keys()Object.getOwnPropertyNames() 返回。如果要读取一个对象的 Symbol 属性,可以通过 Object.getOwnPropertySymbols()Reflect.ownKeys() 取到。
let sy = Symbol();
let syObject = {};
syObject[sy] = "symbol";
console.log(syObject); // {Symbol(): "symbol"}for (let i in syObject) {console.log(i); // 无输出
}Object.keys(syObject); // []
Object.getOwnpropertyNames(syObject); // []
Object.getOwnpropertySymbols(syObject); // [Symbol()]
Reflect.ownKeys(syObject); // [Symbol()]

Symbol的方法

  1. Symbol.for()

作用:用于将描述相同的 Symbol 变量指向同一个 Symbol

let a1 = Symbol.for('a');let a2 = Symbol.for('a');a1 === a2 // truetypeof a1 // "symbol"typeof a2 // "symbol"let a3 = Symbol('a');a1 === a3 // false
  • Symbol()Symbol.for() 的相同点:
    1. 它们定义的值类型都为 “Symbol”;
  • Symbol()Symbol.for() 的不同点:
    1. Symbol() 定义的值每次都是新建,即使描述相同值也不相等;
    2. Symbol() 定义的值会先检查给定的描述是否已经存在,如果不存在才会新建一个值,并把这个值登记在全局环境中供搜索,Symbol.for() 定义相同描述的值时会被搜索到,描述相同则他们就是一个值。
  1. Symbol.keyFor()

作用:用来检测该字符串参数作为名称的 Symbol 值是否已被登记,返回一个已登记的 Symbol 类型值的 key

let a1 = Symbol.for('a');
Symbol.keyFor(a1); // "a"
let a2 = Symbol('a');
Symbol.keyFor(a2); // undefined// a1已经用Symbol.for()登记过,因此返回的key为"a",而a2没有被登记,因此返回undefined

Symbol的属性

  1. Symbol.prototype.descirption

description用于返回 Symbol 数据的描述

// Symbol() 定义的数据
let a = Symbol('acc');
console.log(a.description); // "acc"
Symbol.keyFor(a); // undefined// Symbol.for() 定义的数据
let a1 = Symbol.for('acc');
console.log(a1.description); // "acc"
Symbol.keyFor(a1); // "acc"// 未指定描述的数据
let a2 = Symbol.();
console.log(a1.description); // undefined

description属性和Symbol.keyFor()方法的区别是:description 能返回所有 Symbol 数据类型的描述,而 Symbol.keyFor() 只能返回 Symbol.for() 在全局注册过的描述。

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

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

相关文章

word中图片为嵌入式格式时显示不全_图片在word中显示不全怎么处理_word图片显示不全怎么办-win7之家...

我们在编辑word文档时,会需要插入一些图片来做为装饰或者用来标识,也会出现插入的图片显示不全的情况,要是遇到这种情况该怎么办,那么图片在word中显示不全要怎么处理呢,下面小编给大家分享图片在word中显示不全的解决…

Map集合使用get方法返回null抛出空指针异常问题

Map集合使用get方法空指针异常问题 前言 1.Map里面只能存放对象,不能存放基本类型,例如int,需要使用Integer 2.Map集合取出时,如果变量声明了类型,会先进行拆箱,再进行转换。 空指针问题 如图&#xff…

ES6 扩展运算符

ES6 数组相关 一、扩展运算符 … 用于函数调用 将一个数组变为参数序列;可与正常的函数参数结合使用;扩展运算符后面也可以放表达式;如果扩展运算符后面是空数组,不产生任何结果。只有函数调用时,扩展运算符才可以放…

android gone动画_Android动画之淡入淡出

为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见。我们把当前要显示的View叫showView, 要隐藏不可见的view叫hideVie…

java各map中存放null值

java中各map中是否可以存储null值情况

windows配置samba客户端_怎样设置Samba文件服务器以使用Windows客户端

输入先前用‘smbpasswd -a’设置的用户名和密码:进入计算机,然后检查网络驱动器是否被正确添加:作为测试,让我们从Samba的手册页创建一个pdf文件,然后保存到/home/xmodulo目录:接下来,我们可以验…

DOM 节点类型及属性

一、节点类型 节点名称节点类型节点文本内容#document (文档节点)9null大写标签名 (元素节点)1null#text (文本节点 )3文本内容#comment (注释节点)8注释的内容 二、获取节点的方式 childNodes ⇒ 获取所有子节点 document.body.childNodeschildren ⇒ 获取所有元素子节点 …

Java8中Collectors详解

文章目录1.averagingDouble2.collectingAndThen3.counting4.groupingBy4.1groupingBy(Function)4.2groupingBy(Function, Collector)4.3groupingBy(Function, Supplier, Collector)5.groupingByConcurrent5.1groupingByConcurrent(Function)5.2groupingByConcurrent(Function, …

DOM 元素以及内容的增删改

一、.createElement() ⇒ 创建元素 const div document.createElement(div); // 创建一个 div 元素二、appendChild() 追加一个元素 | insertBefore(Ele, Target) ⇒ 指定位置插入元素 const div document.createElement(div); // 创建一个 div 元素 document.getElementBy…

js实现图片虚化_Web前端之高斯模糊图片记

题记 前端需求之高斯模糊图片最近工作中有一个需求,客户提交图片,服务器根据图片生成内容,并将内容显示,要求高斯模糊处理用户的图片并作为作品展示的背景,类似于苹果设备上的高斯模糊背景。用户提交的图片分网络图片地…

r语言中残差与回归值的残差图_用R语言做回归分析_iris数据集/longley数据集

机器学习课程2 回归分析【题目1】使用R对内置鸢尾花数据集iris(在R提示符下输入iris回车可看到内容)进行回归分析,自行选择因变量和自变量,注意Species这个分类变量的处理方法。解答:1.iris数据集介绍鸢尾花(iris)是数据挖掘常用到的一个数据…

Java 8————Collectors中的中的joining 方法和mapping方法

先定义好后面做示例要用的数据&#xff1a; List<User> listUser new ArrayList<>(); listUser.add(new User("李白", 20, true)); listUser.add(new User("杜甫", 40, true)); listUser.add(new User("李清照", 18, false)); lis…

BOM -- browser object model

操作浏览器窗口 一、 innerWidth / innerHeight 获取浏览器可视区的宽高(不包含开发者工具区域) window.innerWidth px window.innerHeight px二、 outerWidth / outerHeight 获取浏览器软件界面的宽高 window.outerWidth px window.outerHeight px三、 screenTop / scr…

vue 拓扑组件_vue 集成 vis-network 实现网络拓扑图的方法

vis.js 网站https://visjs.org/vs code 下安装命令npm install vis-network在vue 下引入 vis-network组件const vis require("vis-network/dist/vis-network.min.js");require("vis-network/dist/vis-network.min.css");例子代码使用let DIR "/jtop…

编译器说 Lambda 表达式中的变量必须是 final 的,我偏不信

偶尔&#xff0c;我们需要在 Lambda 表达式中修改变量的值&#xff0c;但如果直接尝试修改的话&#xff0c;编译器不会视而不见听而不闻&#xff0c;它会警告我们说&#xff1a;“variable used in lambda expression should be final or effectively final”。 这个问题发生的…

window 事件

一、 onscroll ⇒ 页面滚动是事件 // 当页面发生滚动就会触发这个事件 window.onscroll function () {console.log(我会随着鼠标滚动改变); }二、 onresize ⇒ 窗口改变事件 // 当窗口大小发生改变就会触发这个事件 window.onresize function () {console.log(我会随着窗口…

pandas series取值_【小学生级】pandas入门到精通备查表——AI未来系列3

在未来面前&#xff0c;每个人都是学生江海升月明&#xff0c;天涯共此时&#xff0c;关注江时&#xff01;引子篇为AI未来系列第三篇&#xff0c;中阶部分开始。pandas的数据分析功能比excel强太多&#xff0c;基本上学会pandas&#xff0c;走遍天下都不怕。这是我的备查字典&…

java中为final变量赋值的几种方式

java中为final变量赋值的几种方式 前言 使用final修饰变量&#xff0c;很多人第一时间想到的就是不可变。然后以为变量必须得在声明的时候就为其赋初始值&#xff0c;其实不然&#xff0c;本文将详细讲解java中使用final修改的变量的赋值问题。 被final修饰的变量的几种赋值方…

instanceof 和 对象转型

一、instanceof 判断某个对象是否属于某个类 father1 instanceof Father; // true// 如果有子类继承父类的话 son instanceof Father; // true二、对象转型 子转父 > 自动转&#xff08;向下转型&#xff09; 父转子 > 强转&#xff08;向上转型&#xff09; 三、Obj…

java类验证和装载顺序_Java JVM类加载顺序详解

首页 > 基础教程 > 基础知识 > JDK&JRE&JVMJava JVM类加载顺序详解JVM加载就是寻找一个类或是一个接口的二进制形式并用该二进制形式来构造代表这个类或是这个接口的class对象的过程&#xff0c;其中类或接口的名称是给定了的。当然名称也可以通过计算得到&am…