如何解决for in 循环无法遍历symbol key的问题

简介: 如何解决for in 循环无法遍历symbol key的问题

先说for in循环对象,hasOwnProperty()的作用

var obj = {
    name:"echolun",
    age:"24",
    sex:"male"
},
objName=[], //用来装对象属性名
objVal=[];  //用来装对象属性值
for(var i in obj){
    objName.push(i);
    objVal.push(obj[i]);
}
console.log(objName,objVal);

image.png

需要注意的是,for in循环对象会访问原型链上所有对象属性,看下面。

var obj = {
    name:"echolun",
    age:"24",
    sex:"male"
},
objName=[], //用来装对象属性名
objVal=[];  //用来装对象属性值
Object.prototype.game="lastgame";
for(var i in obj){
    objName.push(i);
    objVal.push(obj[i]);
}
console.log(objName,objVal);
}

这里同样是循环对象obj,但是需要注意的是,原型链上我们额外添加的对象game也被循环出来。

image.png

那么我们只想循环对应的对象该怎么做呢,这里引入hasOwnProperty()方法,hasOwnProperty()函数用于指示一个**对象自身(不包括原型链)**是否具有指定名称的属性。如果有,返回true,否则返回false。


说简单点,它能帮你指向你当前循环的对象,而过滤掉原型链上其它对象,因为在工作中我们很难保证其他人是否会修改原型链,这样做会更为保险,那么修改代码:

var obj = {
    name:"echolun",
    age:"24",
    sex:"male"
},
objName=[], //用来装对象属性名
objVal=[];  //用来装对象属性值
Object.prototype.game="lastgame";
for(var i in obj){
    if(obj.hasOwnProperty(i)) {
        objName.push(i);
        objVal.push(obj[i]);
    }
}
console.log(objName,objVal);
}

看吧,这下就过滤掉game了。


image.png


1.hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false。

2.说简单点,它能帮你指向你当前循环的对象,而过滤掉原型链上其它对象,因为在工作中我们很难保证其他人是否会修改原型链,这样做会更为保险。

3.因为 for in 循环总是遍历整个原型链,所以当遍历多继承的对象时效率较低。

4.为了检查某个对象是否拥有不在原型链上的自定义属性,就有必要用到 hasOwnProperty 方法,任何一个对象都具有该方法,它继承自 Object.prototype。

5.当检测某个对象是否拥有某个属性时,hasOwnProperty 是唯一可以完成这一任务的方法,在 for in 循环时,建议增加 hasOwnProperty 进行判断,可以有效避免扩展本地原型而引起的错误。

6.我们无法完全检测某个属性是否是undefined,因为属性有可能存在,但其值为undefined。

7.hasOwnProperty 是Javascript中唯一一个可以处理对象属性而不遍历原型链的方法。

hasOwnProperty()的主要作用就是在多重循环中过滤掉不符合条件的对象,减少遍历次数,和其他编程语言中的continue和break类似。


image.png


属性名的遍历


Symbol 作为属性名,遍历对象的时候,该属性不会出现在 for...in 、 for...of 循环中,也不 会被 Object.keys() 、 Object.getOwnPropertyNames() 、JSON.stringify() 返回。


但是,它也不是私有属性,有一个 Object.getOwnPropertySymbols() 方法,可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。

.  const obj = {};
.  let a = Symbol('a');
.  let b = Symbol('b');
.
.  obj[a] = 'Hello';
.  obj[b] = 'World';
.
.  const objectSymbols = Object.getOwnPropertySymbols(obj);
.
.  objectSymbols
.  // [Symbol(a), Symbol(b)]

下面是另一个例子, Object.getOwnPropertySymbols() 方法与 for...in 循

环、 Object.getOwnPropertyNames 方法进行对比的例子。

.  const obj = {};
.  const foo = Symbol('foo');
.
.  obj[foo] = 'bar';
.
.  for (let i in obj) {
.  console.log(i); // 无输出
.  }
.
.  Object.getOwnPropertyNames(obj) // []
.  Object.getOwnPropertySymbols(obj) // [Symbol(foo)]

另一个新的 API, Reflect.ownKeys() 方法可以返回所有类型的键名,包括常规键名和 Symbol键名

.  let obj = {
.  [Symbol('my_key')]: 1,
.  enum: 2,
.  nonEnum: 3
.  };
.
.  Reflect.ownKeys(obj)
.  // ["enum", "nonEnum", Symbol(my_key)]

由于以 Symbol 值作为键名,不会被常规方法遍历得到。我们可以利用这个特性,为对象定义一些非私有的、但又希望只用于内部的方法。


具体可以参考 https://www.cnblogs.com/zhenggc99/p/14718859.html



相关文章
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
536 3
一步一步搭建前端监控系统:JS错误监控篇
一步一步搭建前端监控系统:JS错误监控篇 摘要: 徒手写JS错误监控。 作者:一步一个脚印一个坑 原文:搭建前端监控系统(二)JS错误监控篇 Fundebug经授权转载,版权归原作者所有。 背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点。
2674 0
|
小程序
小程序踩坑:Setting data field "xxxx" to undefined is invalid.
小程序踩坑:Setting data field "xxxx" to undefined is invalid.
783 0
|
存储 监控 前端开发
Sentry 监控部署与使用(详细流程)
Sentry 监控部署与使用(详细流程)
15389 1
|
JavaScript 前端开发 Android开发
易语言按键精灵接单平台,易语言接单网,autojs接单平台
随着RPA(机器人流程自动化)需求激增,国内形成了以易语言、按键精灵、Auto.js为核心的三大
|
JSON 数据可视化 Linux
安利3款Python三方库!轻松实现PDF转图片,最快的只需一行代码!
安利3款Python三方库!轻松实现PDF转图片,最快的只需一行代码!
774 0
|
Linux 调度 虚拟化
深入剖析docker核心技术(namespace、cgroups、union fs、网络)(一)
深入剖析docker核心技术(namespace、cgroups、union fs、网络)(一)
1229 0
|
11月前
|
监控 iOS开发 CDN
“企业微信iPad协议”凌晨沉默实验:当群发接口只剩心跳声
预热群发遇阻,企业微信iPad协议暗藏静默流控:5分钟超300条即限速,无报错仅返空ID。拆分50人群组,间隔65秒发送,启用CDN直传,终完成2987人触达,折叠率仅0.7%。接口沉默处,亦有信号。
460 0
|
C语言 C++
为什么要学习easyx图形库,他是做什么的?值得吗?
首先,easyx仅支持C语言和C++,这对于学习C语言的新生来说很友好,在熟悉C语言的同时还可以提高写代码的能力,在熟悉C语言以后,就可以尝试写一写小游戏了,比如说扫雷,三子棋,魔塔,贪吃蛇,飞机大战等等,但是当我们写出来运行的时候可以发现,游戏的逻辑写的没有问题,也的确可以玩,但是界面和人物怪兽什么的都很丑,全是符号不好看,同时控制台一闪一闪的,对玩家来说体验感极差,这也就是我们为什么要学习easyx图形库。
780 1
|
JavaScript 定位技术 API
Vue项目中引入高德地图步骤详解
Vue项目中引入高德地图步骤详解
1245 0

热门文章

最新文章