ES6 之 Symbol
1. 基本用法
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. 使用场景
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() ]
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()
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
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 是个函数值属性,其被构造函数用以创建派生对象。
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
ES6 之 Symbol的更多相关文章
- ES6之Symbol
ES6中Symbol是为了防止属性名冲突而引入的,是独一无二的.Symbol值是通过Symbol函数生成.Symbol值不能与其他类型的值运算否则会报错且Symbol的值可以转换为字符串或者是布尔值但 ...
- ES6(六) --- Symbol
概述: ES5 中属性名都是字符串,这容易就造成命名的冲突,特别是在混入模式(mixin模式)下.为解决这个问题ES6 引入了Symbol, Symbol是一种新的基本数据类型,表示独一无二的值! ...
- Es6(Symbol,set,map,filter)
首先再讲这几个新东西之前,先说一个Es6中新出的扩展运算符(...) 1.展开运算符,就是把东西展开,可以用在array和object上 比如: let a=[,] let b=[,...a,]//[ ...
- JS的ES6的Symbol
一.Symbol 1.什么是Symbol: Symbol是ES6新添加的原始类型(ES5已有原始数据类型:String,Number,boolean,function,undefined,object ...
- ES6的Symbol
let s = Symbol(); alert(typeof(s)); // Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比 ...
- es6(9)--Symbol
//Symbol生成一个独一无二的值,生成的值不会相等 { //声明1 let a1=Symbol(); let a2=Symbol(); console.log(a1===a2);//false / ...
- ES6 中 Symbol.split的用法
class Split1 { constructor(value) { this.value = value; } [Symbol.split](string) { var index = strin ...
- ES6初识-Symbol
Symbol的概念 变量是独一无二的 let a1=Symbol(); let a2=Symbol(); a1和a2严格意义不相等 let a3=Symbol.for('a3'); let a4=Sy ...
- ES6中的Symbol类型
前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型——Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个 ...
随机推荐
- 201871010101-陈来弟《面向对象程序设计(java)》第四周学习总结
...
- 火车头data下任务文件夹的SpiderResult.db3文件用什么软件打开
火车头采集器默认是用sqlite数据库来保存数据的,新建一个采集,打开data/任务/发现有一个SpiderResult.db3文件,.db3是sqlite的存储文件后缀,那么要如何查看这些文件呢?用 ...
- SpringBoot中使用Maven插件,上传docker镜像
开启docker远程端口 我上一篇里面写了,这里暴露的路径: 18.16.202.95:2375 简单构建 配置pom.xml文件 在properties中增加一行指定远程主机的位置 <prop ...
- 小学四则运算口算练习app---No.7
今天主要改了设置页面的提示框以及按钮的闪退问题: activity_calculators .class import android.support.v7.app.AppCompatActivity ...
- CentOS7.5 系统最小化安装与初始化配置
CentOS7.5 系统最小化安装与初始化配置 1.安装标准化的系统 1.1.系统安装期间的语言 选择:中文-简体中文,安装完成也会默认支持中文输出,便于管理 1.2.时区选择 亚洲上海,CST时区( ...
- vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到过什么问题、踩过的坑)
问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...
- BST | 1043 BST树与镜像BST树的判断
较为简单.小于大于的都走一遍就可以AC了 #include <stdio.h> #include <memory.h> #include <math.h> #inc ...
- 【JZOJ5738】【20190706】锁屏杀
题目 $n \le 2000 $ 题解 \(B\)的数字可以对1440取模,对三个图分别进行\(dp\)即可 时间复杂度\(O(n\times 1440 \times 10)\) Code #incl ...
- async和await对promise异步方案的改进,以及使用注意事项
async.await相比原生promise的有优势: 1.更加简洁,await一个promise即可,那么会自动返回这个promise的resolve值,无需在then函数的回调中手动取值,彻底解决 ...
- 微信小程序跳转函数总结
微信小程序跳转函数总结 笔者在微信小程序前端的开发过程中,在不同的情况下遇到了需要使用不同的页面跳转逻辑的情况,以下是我对这些函数的使用场景的一个总结介绍. wx.navigateTo 这是最常用 ...