本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于ES6中Symbol的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。Symbol 是 ES6 引入的一种新的原始数据类型,表示独一无二的值。
Symbol 特性
1.Symbol 通过工厂函数创建,不能以 new 的方式创建,所以使用 instanceof 运算符返回的结果为 false
1 2 3 | var sym = Symbol();
var sym1 = new Symbol();
sym instanceof Symbol
|
2.Symbol 使用 typeof 运算符返回 “symbol”
1 2 | var sym = Symbol( 'foo' );
typeof sym;
|
3.Symbol 工厂函数能支持一个可选的参数,用于描述当前的 symbol
1 2 | var sym2 = Symbol( 'foo' );
var sym3 = Symbol( 'foo' );
|
4.Symbol 是唯一的,Symbol("foo") == Symbol("foo") 返回 false
1 | Symbol( 'foo' ) === Symbol( 'foo' );
|
5.Symbol 与数值或字符串进行运算时,会抛出异常
1 2 | sym | 0
Symbol( "foo" ) + "bar"
|
6.Symbol 工厂函数返回的 symbol,可作为对象的属性名,可以避免属性冲突,在 for...in 迭代中不可枚举
1 2 3 4 5 6 7 8 | var obj = {};
obj[Symbol( "a" )] = "a" ;
obj[Symbol. for ( "b" )] = "b" ;
obj[ "c" ] = "c" ;
obj.d = "d" ;
for ( var i in obj) {
console.log(i);
}
|
7.Symbol 工厂函数返回的值,可作为对象属性名,当使用 JSON.stringify() 进行序列化时,该属性会被忽略
1 | JSON.stringify({[Symbol( "foo" )]: "foo" });
|
8.Symbol 是唯一的,但可以使用 Symbol.for() 共享同一个 Symbol 值
1 2 3 | var mySymbol1 = Symbol. for ( 'some key' );
var mySymbol2 = Symbol. for ( 'some key' );
mySymbol1 == mySymbol2
|
Symbol 实战
对象字面量私有属性和方法
1 2 3 4 5 6 7 8 9 10 11 12 13 | const myPrivateMethod = Symbol( "myPrivateMethod" );
const myPrivateProperty = Symbol( "myPrivateProperty" );
const obj = {
[myPrivateProperty]: "semlinker" ,
[myPrivateMethod]() {
return `Hello ${this[myPrivateProperty]}!!!`;
},
hello() {
console.log(this[myPrivateMethod]());
}
};
console.log(Object.keys(obj));
console.log(obj.hello());
|
除了在创建对象字面量时可以使用 Symbol 外,在定义类的私有属性和方法时也可以使用。
类的私有属性和方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const myPrivateMethod = Symbol( "myPrivateMethod" );
const myPrivateProperty = Symbol( "myPrivateProperty" );
class MyClass {
constructor() {
this[myPrivateProperty] = "semlinker" ;
}
[myPrivateMethod]() {
return `Hello ${this[myPrivateProperty]}!!!`;
}
hello() {
console.log(this[myPrivateMethod]());
}
}
const myCls = new MyClass();
console.log(myCls.hello());
|
在 ES6 中,引入了一些全局的 Symbols,比如:Symbol.match,Symbol.replace,Symbol.search,Symbol.iterator 和 Symbol.split。这里我们简单介绍一下 Symbol.search 和 Symbol.iterator。
Symbol.iterator
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | class Skill {
constructor() {
this.skills = [ 'Angular' , 'React' , 'Vue' , 'Koa' , 'Ionic' ];
}
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
const value = this.skills[index++];
const done = index === this.skills.length + 1;
return {
value,
done
};
}
}
}
}
const mySkills = new Skill();
console.log([...mySkills]);
for (let skill of mySkills) {
console.log(`My skill is ${skill}`);
}
|
Symbol.search
先来简单看个示例:
该示例的执行流程:
解析 'angular'.search('ng')
把 ‘angular’ 转换为字符串对象 new String('angular')
把 ‘ng’ 转换为正则对象 new Regexp('ng')
调用 ‘angular’ 字符串对象的 search 方法,该方法内部会自动调用 ng 正则对象的 Symbol.search 方法
具体可以参考以下伪代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class String {
constructor(value) {
this.value = value;
}
search(obj) {
obj[Symbol.search](this.value);
}
}
class RegExp {
constructor(value) {
this.value = value;
}
[Symbol.search](string) {
return string.indexOf(this.value);
}
}
|
此外利用 Symbol.search 我们还可以让 String.prototype.search() 方法调用我们自定义对象内部的 Symbol.search() 方法,从而实现自定义 search 逻辑:
1 2 3 4 5 6 7 8 9 10 11 | class Article {
constructor(tag) {
this.tag = tag;
}
[Symbol.search](string) {
return string.indexOf(this.tag) >= 0 ? 'Found' : 'Not_Found' ;
}
}
var article = new Article( 'Angular' );
console.log( 'Angular7' .search(article));
console.log( '重温ES6' .search(article));
|
以上示例的执行流程:
解析 'Angular7'.search(article) 语句
把 ‘Angular7’ 转换为字符串对象 new String("Angular7")
由于 article 是对象,这里不需要进行转换
调用 ‘Angular7’ 字符串对象的 search 方法,该方法会自动调用 article 对象内部的 Symbol.search 方法,比如 article[Symbol.search]('Angular7')
以上就是ES6中Symbol的详细介绍(代码示例)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript开发中常用的方法集
深入学习ES6作用域
了解ES6扩展运算符,谈谈它的8种使用方法
ES6之promise的学习
javascript中的generator函数的用法介绍(附代码)
javascript普通函数和箭头函数有什么区别?
10个实用的ES6方法,快来收藏!
ES6 generator 基本使用
聊聊javascript中eval()函数的用法
浅谈ES6中的字符串(代码示例)
更多相关阅读请进入《ES6》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » ES6中Symbol的详细介绍(代码示例)