1. 基本用法

Symbol 是ES6引入的一种新的原始数据类型,表示独一无二的值。
前六种基础数据类型是 undefined null Boolean String Number Object
Symbol 值通过Symbol函数生成 可以接受一个字符串作为参数,主要为了区分不同Symbol值
参数若是一个对象,则会调用该对象的 toString 方法转成字符串 传递给Symbol
*** 参数只做为一个描述存在,同样的参数生成的Symbol也不相等
***** 不能用 new 创建
围绕原始数据类型创建一个显式包装器对象从 ECMAScript 6 开始不再被支持。然而,现有的原始包装器对象,如 new Boolean、new String以及new Number,因为遗留原因仍可被创建。
 let s1 = Symbol('foo');
let s2 = Symbol('bar');
let s3 = Symbol('bar');
console.log(s1); // Symbol(foo)
console.log(typeof s1); // symbol
console.log(String(s2)); // "Symbol(bar)" 不能用new String
console.log(Boolean(s2)); // true
console.log(Number(s2)); // 报错 TypeError: Cannot convert a Symbol value to a number
console.log(s2 === s3); //false
console.log(s3.description); //"bar" (ES2019)
 let obj1 = {
a: 12
};
let obj2 = {
a: 12,
toString() {}
};
let obj3 = {
a: 12,
toString() {
return this.a;
}
};
let s4 = Symbol(obj1);
let s5 = Symbol(obj2);
let s6 = Symbol(obj3);
console.log(s4); //Symbol([object Object])
console.log(s5); //Symbol(undefined)
console.log(s6); //Symbol(12)

2. 使用场景

基本应用场景有两种,一是作为key ,一是作为value
***作为key时 只能用 [] 定义 , 不能用 .
 let s7 = Symbol();
let s8 = Symbol();
let s9 = Symbol();
let jo = {
name: 'nan',
age: 18,
[s7]: 'Hi'
};
jo[s8] = 'hook';
Object.defineProperty(jo, s9, {
value: 'jay',
enumerable: true
})
console.log(jo); //{ name: 'nan', age: 18, [Symbol()]: 'Hi', [Symbol()]: 'hook', [Symbol()]: 'jay' }
console.log(jo[s8]); //hook
// 是无法通过正常的遍历方法取到Symbol 属性名的
// for...in / for...of / Object.keys() / Object.getOwnPropertyNames() / JSON.stringify()
// 可以通过 Object.getOwnPropertySymbols() / Reflect.ownKeys()
// 可以利用这个特点来定义一些不暴露出去的属性或方法
console.log(Object.keys(jo)); //[ 'name', 'age' ]
console.log(Object.getOwnPropertyNames(jo)); //[ 'name', 'age' ]
console.log(Object.getOwnPropertySymbols(jo)); //[ Symbol(), Symbol(), Symbol() ]
console.log(Reflect.ownKeys(jo)); //[ 'name', 'age', Symbol(), Symbol(), Symbol() ]
***作为value , 可以定义一组常量 , 并且保证这些常量的值不想等
当只想定义一组常量 , 并不关心值的时候 ,就可以使用Symbol来定义
 const PENDING = Symbol();
const SUCCESS = Symbol();
const FAIL = Symbol();
class Promise {
constructor (executor) {
this.state = PENDING;
let resolve = value => {
if (this.state === PENDING) {
this.state = SUCCESS;
// ...
}
}
let reject = reason => {
if (this.state === PENDING) {
this.state = FAIL;
// ...
}
}
executor(resolve, reject);
}
}

3. Symbol.for() & Symbol.keyFor()

Symbol.for() 接收一个字符串,然后搜索有没有以该参数作为名称的 Symbol 值, 有则直接返回,没有创建一个新的Symbol 且注册到全局 (可以应用到iframe中)
Symbol.keyFor 返回一个Symbol.for登记过值的 key
 let s10 = Symbol.for('foo');
let s11 = Symbol('foo');
console.log(Symbol.for('foo') === s10); //true
console.log(s11 === s10); //false
console.log(Symbol.keyFor(s10)); //"foo"
console.log(Symbol.keyFor(s11)); //undefined

4. 属性

1). Symbol.hasInstance 用于判断某对象是否为某构造器的实例。因此你可以用它自定义 instanceof 操作符在某个类上的行为。

 class Counts {
static [Symbol.hasInstance](instance) {
return !(instance % 2); //是否被 2 整除
}
}
console.log(1 instanceof Counts); //false
console.log(4 instanceof Counts); // true

2). Symbol.isConcatSpreadable 符号用于配置某对象作为Array.prototype.concat()方法的参数时是否展开其数组元素。

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

3). Symbol.species 是个函数值属性,其被构造函数用以创建派生对象。

***你可能想在扩展数组类 MyArray 上返回 Array 对象。 例如,当使用例如 map() 这样的方法返回默认的构造函数时,你希望这些方法能够返回父级的 Array 对象,以取代 MyArray 对象。Symbol.species 允许你这么做:
 class MyArray extends Array {
// 覆盖 species 到父级的 Array 构造函数上
static get [Symbol.species]() { return Array; }
}
let a = new MyArray(1,2,3);
let mapped = a.map(x => x * x);
console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array); // true

4). Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。

 let myIterable = {}
myIterable[Symbol.iterator] = function* () {
let i = 0;
while (i < 5) {
yield i;
i++;
}
};
console.log([...myIterable]); //[ 0, 1, 2, 3, 4 ]
function getOdd () {
let arr = [];
for (let i of myIterable) {
!(i%2) && arr.push(i);
}
return arr;
}
console.log(getOdd()); //[ 0, 2, 4 ]

5). Symbol.asyncIterator 符号指定了一个对象的默认异步迭代器。如果一个对象设置了这个属性,它就是异步可迭代对象,可用于for await...of循环。

 let asyncIterable = {
[Symbol.asyncIterator]() {
return {
i: 0,
next() {
if (this.i < 3) {
return Promise.resolve({ value: this.i++, done: false });
} return Promise.resolve({ done: true });
}
};
}
}; (async function() {
for await (num of asyncIterable) {
console.log(num); // 0 1 2
}
})();

***** 其他属性和方法可以参考 MDN 文档

***** 参考文献

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

http://es6.ruanyifeng.com/#docs/symbol

 
 

ES6 之 Symbol的更多相关文章

  1. ES6之Symbol

    ES6中Symbol是为了防止属性名冲突而引入的,是独一无二的.Symbol值是通过Symbol函数生成.Symbol值不能与其他类型的值运算否则会报错且Symbol的值可以转换为字符串或者是布尔值但 ...

  2. ES6(六) --- Symbol

    概述: ES5 中属性名都是字符串,这容易就造成命名的冲突,特别是在混入模式(mixin模式)下.为解决这个问题ES6 引入了Symbol, Symbol是一种新的基本数据类型,表示独一无二的值!   ...

  3. Es6(Symbol,set,map,filter)

    首先再讲这几个新东西之前,先说一个Es6中新出的扩展运算符(...) 1.展开运算符,就是把东西展开,可以用在array和object上 比如: let a=[,] let b=[,...a,]//[ ...

  4. JS的ES6的Symbol

    一.Symbol 1.什么是Symbol: Symbol是ES6新添加的原始类型(ES5已有原始数据类型:String,Number,boolean,function,undefined,object ...

  5. ES6的Symbol

    let s = Symbol(); alert(typeof(s)); // Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比 ...

  6. es6(9)--Symbol

    //Symbol生成一个独一无二的值,生成的值不会相等 { //声明1 let a1=Symbol(); let a2=Symbol(); console.log(a1===a2);//false / ...

  7. ES6 中 Symbol.split的用法

    class Split1 { constructor(value) { this.value = value; } [Symbol.split](string) { var index = strin ...

  8. ES6初识-Symbol

    Symbol的概念 变量是独一无二的 let a1=Symbol(); let a2=Symbol(); a1和a2严格意义不相等 let a3=Symbol.for('a3'); let a4=Sy ...

  9. ES6中的Symbol类型

    前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型——Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个 ...

随机推荐

  1. 201871010101-陈来弟《面向对象程序设计(java)》第四周学习总结

                                                                                                        ...

  2. 火车头data下任务文件夹的SpiderResult.db3文件用什么软件打开

    火车头采集器默认是用sqlite数据库来保存数据的,新建一个采集,打开data/任务/发现有一个SpiderResult.db3文件,.db3是sqlite的存储文件后缀,那么要如何查看这些文件呢?用 ...

  3. SpringBoot中使用Maven插件,上传docker镜像

    开启docker远程端口 我上一篇里面写了,这里暴露的路径: 18.16.202.95:2375 简单构建 配置pom.xml文件 在properties中增加一行指定远程主机的位置 <prop ...

  4. 小学四则运算口算练习app---No.7

    今天主要改了设置页面的提示框以及按钮的闪退问题: activity_calculators .class import android.support.v7.app.AppCompatActivity ...

  5. CentOS7.5 系统最小化安装与初始化配置

    CentOS7.5 系统最小化安装与初始化配置 1.安装标准化的系统 1.1.系统安装期间的语言 选择:中文-简体中文,安装完成也会默认支持中文输出,便于管理 1.2.时区选择 亚洲上海,CST时区( ...

  6. vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到过什么问题、踩过的坑)

    问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...

  7. BST | 1043 BST树与镜像BST树的判断

    较为简单.小于大于的都走一遍就可以AC了 #include <stdio.h> #include <memory.h> #include <math.h> #inc ...

  8. 【JZOJ5738】【20190706】锁屏杀

    题目 $n \le 2000 $ 题解 \(B\)的数字可以对1440取模,对三个图分别进行\(dp\)即可 时间复杂度\(O(n\times 1440 \times 10)\) Code #incl ...

  9. async和await对promise异步方案的改进,以及使用注意事项

    async.await相比原生promise的有优势: 1.更加简洁,await一个promise即可,那么会自动返回这个promise的resolve值,无需在then函数的回调中手动取值,彻底解决 ...

  10. 微信小程序跳转函数总结

    微信小程序跳转函数总结 ​ 笔者在微信小程序前端的开发过程中,在不同的情况下遇到了需要使用不同的页面跳转逻辑的情况,以下是我对这些函数的使用场景的一个总结介绍. wx.navigateTo 这是最常用 ...