JS 5种遍历对象的方式

2024-12-01 23:35:51

几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的

平时还真没有使用到这个方法，一时不知如何回答

从方法名称来分析，应该是返回的是对象自身属性名组成的数组

那和 Object.keys() 方法不就一样了吗

感觉事情并不这么简单，于是我仔细看了一下这几种遍历对象的方法的区别

for in

for in 循环是最基础的遍历对象的方式，它还会得到对象原型链上的属性

// 创建一个对象并指定其原型，bar 为原型上的属性
const obj = Object.create({
 bar: 'bar'
})

// foo 为对象自身的属性
obj.foo = 'foo'

for (let key in obj) {
 console.log(obj[key]) // foo, bar
}

可以看到对象原型上的属性也被循环出来了

在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性

for (let key in obj) {
 if (obj.hasOwnProperty(key)) {
  console.log(obj[key]) // foo
 }
}

这时候原型上的 bar 属性就被过滤掉了

Object.keys

Object.keys() 是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，它会自动过滤掉原型链上的属性，然后可以通过数组的 forEach() 方法来遍历

Object.keys(obj).forEach((key) => {
 console.log(obj[key]) // foo
})

另外还有 Object.values() 方法和 Object.entries() 方法，这两方法的作用范围和 Object.keys() 方法类似，因此不再说明

for in 循环和 Object.keys() 方法都不会返回对象的不可枚举属性

如果需要遍历不可枚举的属性，就要用到前面提到的 Object.getOwnPropertyNames() 方法了

Object.getOwnPropertyNames

Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，包括不可枚举的属性，也可以通过数组的 forEach 方法来遍历

// 创建一个对象并指定其原型，bar 为原型上的属性
// baz 为对象自身的属性并且不可枚举
const obj = Object.create({
 bar: 'bar'
}, {
 baz: {
  value: 'baz',
  enumerable: false
 }
})

obj.foo = 'foo'

// 不包括不可枚举的 baz 属性
Object.keys(obj).forEach((key) => {
 console.log(obj[key]) // foo
})

// 包括不可枚举的 baz 属性
Object.getOwnPropertyNames(obj).forEach((key) => {
 console.log(obj[key]) // baz, foo
})

ES2015 新增了 Symbol 数据类型，该类型可以作为对象的键，针对该类型 ES2015 同样新增Object.getOwnPropertySymbols() 方法

Object.getOwnPropertySymbols

Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组，不包括字符串属性

Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key])
})

什么都没有，因为该对象还没有 Symbol 属性

// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})

// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('foo')] = 'Symbol foo'

Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) // Symbol baz, Symbol foo
})

Reflect.ownKeys

Reflect.ownKeys() 方法是 ES2015 新增的静态方法，该方法返回对象自身所有属性名组成的数组，包括不可枚举的属性和 Symbol 属性

Reflect.ownKeys(obj).forEach((key) => {
 console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo
})

对比

方式	基本属性	原型链	不可枚举	Symbol
for in	是	是	否	否
Object.keys()	是	否	否	否
Object.getOwnPropertyNames()	是	否	是	否
Object.getOwnPropertySymbols()	否	否	是	是
Reflect.ownKeys()	是	否	是	是

结论

这其中只有 for in 循环会得到对象原型链上的属性，其它方法都只适用于对象自身的属性

ES 语言后续添加的新特性不会对以前的代码产生副作用，比如在 ES2015 之前就存在的 for in 循环，Object.keys() 和 Object.getOwnPropertyNames() 是肯定不会返回 Symbol 属性的

以上就是JS 5种遍历对象的方式的详细内容，更多关于JS 遍历对象的资料请关注我们其它相关文章！

js 遍历对象的属性的代码

如: 复制代码代码如下: Function.prototype.addMethod=function(methodName,func){ if(!this.prototype[methodName]){ this.prototype[methodName]=func;//给原型增加方法,此方法会影响到该类型的实例上 } return this.prototype;//返回原型,此类型实例可以进行链形调用 } function CustomObject(name,value){ this.nam
JavaScript中遍历对象的property的3种方法介绍

在JavaScript中,可以用三种方法来遍历对象的property: 1.for/in.可以使用for/in语句遍历对象自身的property(Own Property)及其从原型对象处继承的property,只有enumerable的property才会被遍历到. 2.Object.keys().可以将对象作为参数传入Object.keys(),Object.keys()语句将返回由所有property名称字符串所组成的数组.Object.keys()语句仅返回对象自身的(Own Prope
JS中如何轻松遍历对象属性的方式总结

自身可枚举属性 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 .如果对象的键-值都不可枚举,那么将返回由键组成的数组. 这是合理的,因为大多数时候只需要关注对象自身的属性. 来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回自己的属性键: let simpleColors = { colorA: 'white', colorB: 'black' }; let
关于JavaScript对象的动态选择及遍历对象

(一)动态选择方法及属性在实际工作中,我们经常会遇到这种情况:根据某个条件来调用两个方法[1]中的一个,或是在两个属性[2]中的一个上面进行读写操作.下面的代码展示了这种情形: 复制代码代码如下: if (condition) { myObj.method1(someArg); } else { myObj.method2(someArg); } JavaScript提供了一种简单的语法,即使用方括号操作符([])来动态地选择方法和属性.正如下面的代码所示,JavaScript有两种等价的成
JS遍历对象属性的方法示例

本文实例讲述了JS遍历对象属性的方法.分享给大家供大家参考,具体如下: 遍历JavaScript某个对象所有的属性名称和值的方法,这样想使用方法的时候非常的直观和方便.代码如下: /* * 用来遍历指定对象所有的属性名称和值 * obj 需要遍历的对象 * author: Jet Mah */ function allPrpos ( obj ) { // 用来保存所有的属性名称和值 var props = "" ; // 开始遍历 for ( var p in obj ){ // 方法
Javascript的数组与字典用法与遍历对象的属性技巧

Javascript 的数组Array,既是一个数组,也是一个字典(Dictionary).先举例看看数组的用法. 复制代码代码如下: var a = new Array(); a[0] = "Acer"; a[1] = "Dell"; for (var i = 0; i < a.length; i++) { alert(a[i]); } 下面再看一下字典的用法. 复制代码代码如下: var computer_price = new Array(); co
JS递归遍历对象获得Value值方法技巧

一般要用到递归,就要判断对象是否和父类型是否一样,通过本文给大家演示下简单的对象递归,还有数组递归类似. var obj = { a:{w:1,y:2,x:3}, b:{s:4,j:5,x:6}, c:{car:7,cat:8,mao:9} } function f(s){ for(var i in s){ if(typeof s[i]=="object"){ f(s[i]) }else{ console.log(s[i]); } } } f(obj); 返回结果:1,2,3,4,5,
js中遍历对象的属性和值的方法

实例如下: var Statistics_Website_logo ={ 'Website_logo_title':'学而思', 'Website_logo_Theme':'教育行业', 'Website_logo_Company':'好未来' }; for (var Key in Statistics_Website_logo){ Websitelogo =Websitelogo+'&'+''+Key+'='+Statistics_Website_logo[Key]+''; } 以上这篇js中
js/jquery遍历对象和数组的方法分析【forEach，map与each方法】

本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,index当前项的索引,array原始数组: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是可以自己通过数组的索引来修改原来的数组: va
JS 5种遍历对象的方式

几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的平时还真没有使用到这个方法,一时不知如何回答从方法名称来分析,应该是返回的是对象自身属性名组成的数组那和 Object.keys() 方法不就一样了吗感觉事情并不这么简单,于是我仔细看了一下这几种遍历对象的方法的区别 for in for in 循环是最基础的遍历对象的方式,它还会得到对象原型链上的属性 // 创建一个对象并指定其原型,bar 为原型上的属性 const obj = Object.
JS中轻松遍历对象属性的几种方式

目录 1.自身可枚举属性 2.Object.values() 返回属性值 3.Object.entries() 4.对象属性的顺序 1.自身可枚举属性 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 .如果对象的键-值都不可枚举,那么将返回由键组成的数组. 这是合理的,因为大多数时候只需要关注对象自身的属性. 来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回
JS中this上下文对象使用方式

JavaScript 有一套完全不同于其它语言的对 this 的处理机制. 在五种不同的情况下 ,this 指向的各不相同. 有句话说得很在理 -- 谁调用它,this就指向谁一.全局范围内在全局范围内使用this ,它将指向全局对象(浏览器中为 window) var name = 'name1'; console.log(name); this.name = 'name2'; console.log(name); console.log(this.name); window.name =
vue中的循环遍历对象、数组和字符串

目录 vue循环遍历对象.数组和字符串 1.循环遍历对象 2.循环遍历数组 3.循环遍历字符串 vue循环遍历,指令v-for 1.循环遍历 2.v-for遍历数组 3.v-for遍历对象 4.v-for使用中添加key vue循环遍历对象.数组和字符串 1.循环遍历对象 1.1vue 在html里面循环遍历对象 v-for=" (val, key , i) in dimItemMap" :key="key" val-每一项 key -key值 i-第几个 <
JS中循环遍历数组的四种方式总结

本文比较并总结遍历数组的四种方式: for 循环: for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环: for (const key in someArray) { console.log(key); } 数组方法 .forEach(): someArray.forEach((elem, index) => { console.log(
javascript遍历对象的五种方式实例代码

目录准备五种武器 for-in Object.keys Object.getOwnPropertyNames Object.getOwnPropertySymbols Reflect.ownKeys 总结扩展 Object.values Object.entries hasOwnProperty propertyIsEnumerable 总结准备先来准备一个测试对象obj. 代码清单1 var notEnum = Symbol("继承不可枚举symbol"); var pro
JS数组的遍历方式for循环与for...in

JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&
微信小程序两种为对象属性赋值的方式详解

微信小程序两种为对象属性赋值的方式对应config.wxml <view> 阶段一<switch id="config1" checked bindchange="switchChange"/> </view> 对应config.js data:{ //定义对象 configs:{} } //方式一 switchChange:function(e){ //为对象的某一属性赋值 configs.config1={ }; conso
详解JS几种变量交换方式以及性能分析对比

前言 "两个变量之间的值得交换",这是一个经典的话题,现在也有了很多的成熟解决方案,本文主要是列举几种常用的方案,进行大量计算并分析对比. 起由最近做某个项目时,其中有一个需求是交换数组中的两个元素.当时使用的方法是: arr = [item0,item1,...,itemN]; //最初使用这段代码来交换第0个和第K(k<N)个元素 arr[0] = arr.splice(k, 1, arr[0])[0]; 当时觉得这种方法很优雅,高逼格... 后来,业余时间又拿这个研究下了
JS中数组与对象的遍历方法实例小结

本文实例讲述了JS中数组与对象的遍历方法.分享给大家供大家参考,具体如下: 一.数组的遍历: 首先定义一个数组 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道数组长度: arr.forEach(function(ele,index){ console.log(index); console.log(ele) }) 3.map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新

JS 5种遍历对象的方式

相关推荐

随机推荐