对象遍历(对象forEach遍历)
对象遍历(对象forEach遍历)
- 对象遍历
- 对象fon in 遍历
- 对象keys 遍历
- 对象values 遍历
- 对象getOwnPropertyNames遍历
- 使用Reflect.ownKeys(obj)遍历
- 封装Object.forEach方法遍历
对象遍历
对象fon in 遍历
尝试遍历(获取对象的键)
在JavaScript中,对象是不能使用传统的for循环进行遍历的,但是可以使用fon in来进行比遍历。
var obj = {avatar:'https://a.jpg',nickName:'昵称',UID:'5616259',
}for(key in obj){console.log(key)
}
打印结果
以上代码执行打印的结果为
=> avatar
=> nickName
=> UID
获取对象的值
由此可以看出使用for in
来进行对象的遍历,可以得到对象的属性,也就是key
,那么我们要进行取值就可以这样做。
var obj = {avatar:'https://a.jpg',nickName:'昵称',UID:'5616259',
}for(key in obj){console.log(obj[key])
}
代码执行后的结果为
=> https://a.jpg
=> 昵称
=> 5616259
对象keys 遍历
除了使用for in
遍历对象,我们还可以使用Object
提供的方法来进行对象的遍历。
在JavaScript中,Object
提供了一个keys
的方法。
获取对象自身的和继承的可枚举属性(不含Symbol属性)
var obj = {avatar:'https://a.jpg',nickName:'昵称',UID:'5616259',
}var keys = Object.keys(obj)
console.log(keys)
返回结果
=> ["avatar", "nickName", "UID"]
通俗来讲,就是使用对象的keys
方法可以获取到对象可枚举的属性(key)数组。
那么根据这个数组我们可以获取到对象的值。
获取对象的值
var obj = {avatar:'https://a.jpg',nickName:'昵称',UID:'5616259',
}var keys = Object.keys(obj)
keys.forEach(item=>{console.log(item + " : " + obj[item])
})
打印结果
=> avatar : https://a.jpg
=> nickName : 昵称
=> UID : 5616259
对象values 遍历
如果你只关注对象的值,而不关注对象的属性,那么可以尝试使用values
方法来遍历对象。
var obj = {avatar:'https://a.jpg',nickName:'昵称',UID:'5616259',
}Object.values(obj).forEach(value=>{console.log(value);
})
返回的值
=> https://a.jpg
=> 昵称
=> 5616259
对象getOwnPropertyNames遍历
Object.getOwnPropertyNames()方法返回一个数组,包含对象自身的所有属性(键)(不含Symbol属性,但是包括不可枚举属性)。
获取属性
var obj = {avatar:'https://a.jpg',nickName:'昵称',UID:'5616259',
}Object.getOwnPropertyNames(obj).forEach(key=>{console.log(key);
})
打印结果
=> avatar
=> nickName
=> UID
使用Reflect.ownKeys(obj)遍历
Reflect.ownKeys(obj)
返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举。
获取属性
var obj = {avatar:'https://a.jpg',nickName:'昵称',UID:'5616259',
}Reflect.ownKeys(obj).forEach(key=>{console.log(key);
})
打印结果
=> avatar
=> nickName
=> UID
封装Object.forEach方法遍历
如果我们在开放中不想使用以上的那些方法,那么我们可以尝试一下自己封装forEach方法,将封装的方法挂在到Object原型链的构造函数中,我们就可以使用Object.forEach
来进行对象的遍历。
未封装前使用Object.forEach()
不出意外,报了如下的错误
接下来让我们封装一下forEach吧!
封装forEach
// 将自定义的方法挂载到Object的构造函数中,函数接收一个对象一个回调方法
Object.prototype.constructor.forEach = function(obj,callback){// 判断回调是否是一个函数if(typeof(callback) === 'function'){let i = 0;for(let key in obj){callback(obj[key],i,key);i ++;}return;}// 传入的回调如果不是function,那么就抛出错误throw new Error (callback + ' is not a function!,You can use it like this: Object.forEach(obj,(item,index,key)=>{...}) ')
}
让我们来使用一下Object.forEach方法吧
var obj = {avatar:'https://a.jpg',nickName:'昵称',UID:'5616259',
}Object.forEach(obj,(item,index,key)=>{console.log(item, index, key);
})
返回结果
=> https://a.jpg 0 avatar
=> 昵称 1 nickName
=> 5616259 2 UID
我们可以看出,使用自己封装的forEach方法可以实现我们想要的结果,他能遍历出对象的值,下标(伪下标),属性。分别对应着回调方法中的item、index、key三个形参。
到此,我们的forEach方法的封装就结束了。
对象遍历(对象forEach遍历)相关推荐
- html中foreach遍历list,foreach遍历----for(object o: list)
Foreach遍历 前天在项目中遇到一个问题,foreach遍历过程中修改responses中的对象,其中responses的类型:IEnumerable,代码如下: foreach (Orde .. ...
- html函数参数数组遍历,JavaScript foreach遍历数组
JavaScript forEach遍历数组教程 JavaScript forEach详解 定义 forEach() 方法为每个数组元素调用一次函数(回调函数). 语法 array.forEach(f ...
- 集合迭代、for遍历、foreach遍历
集合迭代遍历 import java.util.Collection; import java.util.HashSet; import java.util.Iterator;public class ...
- for遍历和foreach遍历的一个细小差别
写这两种遍历的时候,都会定义一个int i.要注意这个i的意义是不同的. 举例说明: static void Main(string[] args){int[] arr = { 1, 5, 9, 2, ...
- js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
1.给对象添加属性:使用 object.prop 或object['prop'] 给对象添加属性 let obj={};obj.name="zhangsan";obj[" ...
- JavaScript写一个能遍历对象和数组的通用forEach函数
//遍历对象用for...in...,遍历数组用forEach function forEach(obj){ var key; if(obj instanceof Array){ obj ...
- jquery 遍历java对象,js/jquery遍历对象和数组的方法分析【forEach,map与each方法】...
本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ ...
- 使用foreach遍历对象
PHP5起可以使用foreach遍历对象,但受访问权限的影响. <?php class MyClass {public $var1 = 'value 1';public $var2 = 'val ...
- 能用foreach遍历访问的对象需要实现____接口或声明____方法的类型
之前面试看到一个这样的笔试题,当时只知道List和Dictionary类型可以用foreach遍历,但他两也没什么共同点啊.List是有序的,但Dictionary是无序的.回来在网上查了下才发现,他 ...
最新文章
- linux 内核编译错误 Makefile:416: *** mixed implicit and normal rules: deprecated syntax
- winform绑定多张图片
- 考研计算机专业课统考吗,【计算机考研】你了解计算机统考408吗?
- 分享Silverlight/WPF/Windows Phone一周学习导读(12月20日-12月26日)
- HTML把表格链接进下拉菜单,excel表格下拉菜单怎么做
- php opcache文件还原,php7使用opcache把编译后的php文件存储为文件,实现php源码保护和脚本加速...
- 计算机软件在哪里建文本文档,如何新建文档
- 将钉钉应用内浮窗_手机钉钉怎么设置悬浮窗 几步轻松开启
- 什么是组播?让我们一起解密组播协议(IGMP、PIM)
- 微信加人的108种方法
- 龙芯3A3000 PCI 硬件问题
- ENVI/ArcGIS根据坐标位置提取影像DN值(批量)
- OPPOReno4SE和华为畅享20 哪款好
- 从zotero文献集中批量导出PDF的方法
- 数据库关系模型有哪三类完整性约束?
- 基于Multisim的四人抢答器设计与仿真
- 如何制定产业园区招商运营方案
- 单片机-6位数码管动态时间扫描程序,具有时分秒
- springboot+vue+elementui实现前后端分离的网上商城购物系统
- winxp映射linux目录,如何让WinXP与Linux二者相互共存(2)