ES6 Symbol 数据类型

ES6-Symbol 类型

ES5 除类数组对象（类数组对象名可以为数字，对象必须有 length 属性，可以用数组下标的方式访问对象属性，但不能通过点的方式访问）外，对象属性名都是字符串，这很容易造成属性名的冲突。而且 JavaScript 是弱类型语言，属性名冲突不会报错，处于代码执行顺序后面的属性值会覆盖前面的属性值（属性值容易被篡改），这样对象的属性就不能保证是我们想要的。
ES6 引入了Symbol数据类型很好地解决了对象属性名冲突的问题。
Symbol表示 独一无二的值 ，它是原始数据类型，不能用 new
ES6之后JavaScript就有了7种数据类型，分别是：Number 、String 、Boolean 、null 、undefined 、Object 、Symbol

基本用法

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

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

特点

Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象；
Symbol 表示独一无二的值，因此带有相同参数的两个 Symbol 值也不相等；

// 没有参数的情况
let name1 = Symbol();
let name2 = Symbol();name1 === name2 // false// 有参数的情况
let name1 = Symbol('foo');
let name2 = Symbol('foo');name1 === name2 // false

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值转换为数值)

Symbol 值可以显式转为字符串

let name = Symbol('foo');
console.log(String(name)); // "Symbol(foo)"
console.log(name.toString); // "Symbol(foo)"

Symbol 值不能转化为数字

let name = Symbol('foo');
console.log(Number.name);
// 报错：Cannot convert a Symbol value to a number(无法将symbol值转换为数值)

Symbol 值可以转换为布尔值

let name = Symbol('foo');
console.log(Boolean(name)); // true
console.log(!name); // false

Symbol 应用场景

作为对象属性名

用 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"]

Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for...in、for...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的方法

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() 定义相同描述的值时会被搜索到，描述相同则他们就是一个值。

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的属性

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() 在全局注册过的描述。

ES6 Symbol 数据类型相关推荐

ES6 rest参数，扩展运算符，Symbol数据类型，迭代器和生成器【详解加案例】(二)
文章目录 1.ES6 rest 参数 2. ES6 扩展运算符 2.1 ES6 简介 2.2 应用 3. ES6 Symbol 数据类型 3.1 Symbol两种创建方式 3.2 Symbol注意事项 ...
ES6学习笔记01：Symbol数据类型
ES6学习笔记01:Symbol数据类型 1.Symbol定义浏览demo01.html: 2.Symbol作对象属性名 Symbol函数可以接收一个字符串作为参数,表示对Symbol实例的描述,输 ...
es6 Symbol概述
Symbol概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如 ...
JavaScript重难点解析1（数据类型——var、let、const区别，类型补充，“===”、“typeof”、“instanceof”区别，Symbol数据类型）
JavaScript重难点解析1(数据类型) var.let.const区别: 类型补充 "==="."typeof"."instanceof&quo ...
js中的Symbol数据类型
最近,在学习vue的过程中碰到了一种从没有遇到过的数据类型:Symbol 查阅资料后,发现这是一种在ES6 中新添加的数据类型,好奇之下研究了下. Symbol 本质上是一种唯一标识符,可用作对象的唯 ...
ES6——Symbol属性与for...of循环迭代器
目录一.认识Symbol数据类型二.Symbol特性三.在对象中添加Symbol属性四.Symbol内置值五.迭代器(for..in和for...of的对比) 六.迭代器原理一.认识Sym ...
ReactNative进阶（二十八）：ES6 Symbol 用法
文章目录一.什么是Symbol? 二.应用场景三.注意事项四.拓展阅读一.什么是Symbol? Symbol是es6中一种新增的数据类型,它表示独一无二的值.es5把数据类型分为基本数据类型( ...
ES6基本数据类型总结
ES5的基本数据类型有:Number,String,Boolean,null,undefined ES6基本数据类型:Number,String,Boolean,null,undefined,symb ...
前端技巧-JS元编程ES6 symbol公开符号
元编程就是指以操作目标为程序本身的行为特性的编程,而在ES6中增加了类型symbol,除了自定义的符号之外,还预定义了其他的一些内置符号,可以被称为内置符号.下面就来给大家介绍一下这些内置符号. 1. ...