ES6中Symbol的详述-创新互联
这篇文章运用了实例代码展示了ES6中Symbol的具体内容,代码非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
创新互联建站网站建设公司,提供成都做网站、网站制作,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!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的介绍,详细使用情况还需要大家自己使用过才领会。如果想了解更多,欢迎关注创新互联网站制作公司行业资讯频道!
网站标题:ES6中Symbol的详述-创新互联
URL网址:http://pwwzsj.com/article/djosei.html