本篇文章给大家带来的内容是关于ES6中Symbol的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 Symbol 是 ES6 引入的一种新的原始数据类型,表示独一无二的值。 Symbol 特性 1.Symbol 通过工厂函数创建,不能以 new 的方式创建,所以使用 instanceof 运算符返回的结果为 false var sym = Symbol();
var sym1 = new Symbol(); // TypeError
sym instanceof Symbol // false 2.Symbol 使用 typeof 运算符返回 “symbol” var sym = Symbol('foo');
typeof sym; // "symbol" 3.Symbol 工厂函数能支持一个可选的参数,用于描述当前的 symbol var sym2 = Symbol('foo');
var sym3 = Symbol('foo'); 4.Symbol 是唯一的,Symbol("foo") == Symbol("foo") 返回 false Symbol('foo') === Symbol('foo'); // false 5.Symbol 与数值或字符串进行运算时,会抛出异常 sym | 0 // TypeError
Symbol("foo") + "bar" // TypeError 6.Symbol 工厂函数返回的 symbol,可作为对象的属性名,可以避免属性冲突,在 for...in 迭代中不可枚举 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); // logs "c" and "d"
} 7.Symbol 工厂函数返回的值,可作为对象属性名,当使用 JSON.stringify() 进行序列化时,该属性会被忽略 JSON.stringify({[Symbol("foo")]: "foo"}); // '{}' 8.Symbol 是唯一的,但可以使用 Symbol.for() 共享同一个 Symbol 值 var mySymbol1 = Symbol.for('some key');
var mySymbol2 = Symbol.for('some key');
mySymbol1 == mySymbol2 //true Symbol 实战 对象字面量私有属性和方法 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 外,在定义类的私有属性和方法时也可以使用。 类的私有属性和方法 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 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') // 4 该示例的执行流程: 解析 'angular'.search('ng') 把 ‘angular’ 转换为字符串对象 new String('angular') 把 ‘ng’ 转换为正则对象 new Regexp('ng') 调用 ‘angular’ 字符串对象的 search 方法,该方法内部会自动调用 ng 正则对象的 Symbol.search 方法 具体可以参考以下伪代码: // pseudo code for String class
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 逻辑: 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)); // Found
console.log('重温ES6'.search(article)); // Not_Found 以上示例的执行流程: 解析 'Angular7'.search(article) 语句 把 ‘Angular7’ 转换为字符串对象 new String("Angular7") 由于 article 是对象,这里不需要进行转换 调用 ‘Angular7’ 字符串对象的 search 方法,该方法会自动调用 article 对象内部的 Symbol.search 方法,比如 article[Symbol.search]('Angular7') 以上就是ES6中Symbol的详细介绍(代码示例)的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |