温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ES6中Symbol数据类型怎么用

发布时间:2021-08-18 14:59:01 来源:亿速云 阅读:262 作者:小新 栏目:web开发

这篇文章主要介绍ES6中Symbol数据类型怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

具体如下:

Symbol,是ES6中引入的新的数据类型,表示独一无二的值。在面向对象中,每个对象都有字符串类型的属性,新方法的名字就有可能与现有方法产生冲突。Symbol的引入保证每个属性的名字都是独一无二的,这样就从根本上防止属性名的冲突。

ES6之前对象属性的命名方法

var obj = {  name:'Joh',  'my name': 'Johnny' } console.log(obj.name); // Joh console.log(obj['my name']); // Johnny

引入Symbol之后,变量可以不再重复

let name1 = Symbol('name'); let name2 = Symbol('name'); console.log(name1 === name2); // false

可以看出,虽然都是调用了Symbol函数,但是返回的Symbol类型的name1和name2并不相等

将Symbol类型转换为字符串类型

let name1 = Symbol('name'); let name2 = Symbol('name'); console.log(name1.toString());// Symbol(name) console.log(String(name2)); // Symbol(name)

Symbol类型应用于对象的属性

let getName = Symbol('name'); let obj = {  [getName]() {   return 'Joh';  } } console.log(obj[getName]()); // Joh

Symbol类型的属性具有一定的隐藏性

let name = Symbol('name'); let obj = {  age:22,  [name]:'Joh' }; console.log(Object.keys(obj)); // 打印不出 类型为Symbol的[name]属性 // 使用for-in也打印不出 类型为Symbol的[name]属性 for(var k in obj) {  console.log(k); } // 使用 Object.getOwnPropertyNames 同样打印不出 类型为Symbol的[name]属性 console.log(Object.getOwnPropertyNames(obj)); // 使用 Object.getOwnPropertySymbols 可以 var key = Object.getOwnPropertySymbols(obj)[0]; console.log(obj[key]); // Joh

使用Symbol类型模拟对象的私有属性

User 模块

'use strict'; let getName = Symbol('getName'); module.exports = class User {  [getName]() {   return 'Joh';  }  print() {   console.log(this[getName]());  } }

测试User模块

'use strict'; const User = require('./User'); let user = new User(); user.print(); // Joh let getName = Symbol('getName'); user[getName](); // getName is not defined 报错, 可知 Symbol 可以在面向对象中模拟私有属性

Symbol.for 和 Symbol.keyFor的应用

let name1 = Symbol.for('name'); let name2 = Symbol.for('name'); console.log(name1 === name2); // true console.log(Symbol.keyFor(name1)); // name 备注:字符串类型的

使用Symbol.for 获取Symbol类型的值,使用Symbol.keyFor来获取之前的字符串

使用for-of来顺序输出数组的单项

let arr = ['a', 'b', 'c']; for(let item of arr) {  console.log(item); // 顺序输出 a b c }

使用Symbol.iterator迭代器来逐个返回数组的单项

let arr = ['a', 'b', 'c']; var iterator = arr[Symbol.iterator](); // next 方法返回done表示是否完成 console.log(iterator.next()); // {value: "a", done: false} console.log(iterator.next()); // {value: "b", done: false} console.log(iterator.next()); // {value: "c", done: false} console.log(iterator.next()); // {value: undefined, done: true} console.log(iterator.next()); // {value: undefined, done: true}

程序的优化:

let arr = ['a', 'b', 'c']; var iterator = arr[Symbol.iterator](); // next 方法返回done表示是否完成 var next = iterator.next(); while(!next.done) {  console.log(next);  next = iterator.next(); };

Symbol.iterator在面向对象中的应用实例1:

'use strict'; class UserGroup {  constructor(users) {   // json {joh:111,lili:1123}   this.users = users;  }  [Symbol.iterator]() {   let self = this;   let i = 0;   const names = Object.keys(this.users);   const length = names.length;   // iterator 对象,可以理解为指针   return {    next() {     let name = names[i++];     let qq = self.users[name];     return {value: {name, qq}, done: i > length}    }   }  } } let group = new UserGroup({'Joh':'595959','Lili':'888116'}); for (let user of group) {  console.log(user); } // { name: 'Joh', qq: '595959' } // { name: 'Lili', qq: '888116' }

Symbol.iterator在面向对象中的应用实例2:

'use strict'; var obj = {'Joh':'56999', 'Lili':'899888'}; obj[Symbol.iterator] = function() {  let self = this;  let i = 0;  const names = Object.keys(this);  const length = names.length;  // iterator 对象,可以理解为指针  return {   next() {    let name = names[i++];    let qq = self[name];    return {value: {name, qq}, done: i > length}   }  } } for (let u of obj) console.log(u);

程序优化之后:

'use strict'; var obj = {'Joh':'56999', 'Lili':'899888'}; let iteratorFun = function () {  let self = this;  let i = 0;  const names = Object.keys(this);  const length = names.length;  // iterator 对象,可以理解为指针  return {   next() {    let name = names[i++];    let qq = self[name];    return {value: {name, qq}, done: i > length}   }  } } obj[Symbol.iterator] = iteratorFun; for (let u of obj) console.log(u);

Symbol.iterator应用于伪数组中

'use strict'; var obj = {  length:2,  '0':'abc',  '1':'ddd' } /* // if this , err: obj is not iterable for (let i of obj) {  console.log(i); } */ obj[Symbol.iterator] = [][Symbol.iterator]; // handle this first // then for (let i of obj) {  console.log(i); }

字符串实现了Symbol.iterator接口

'use strict'; console.log('Joh'[Symbol.iterator]); // [Function: [Symbol.iterator]] for(let char of 'Lili') {  console.log(char); }

同样的,在ES6中在set, map 字符串都能实现 Symbol.iterator接口

以上是“ES6中Symbol数据类型怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI