辨析js遍历对象与数组的方法
1 遍历对象的方法?
(1) for…in(也可遍历数组,但效率较低,一般用来遍历对象)
示例:
// 生成一个原型上有属性并且有可枚举属性与不可枚举属性的对象 const data = Object.create({ name: "这是原型上的属性", //生成原型上的属性 }); data.age = 23; // 对象自身(可枚举)属性 Object.defineProperty(data, "sex", { // 对象自身的不可枚举属性 value: "女", Enumerable: false, //不可枚举 }); // 使用for...in遍历data for (let key in data) { console.log(key); // 获得data自身可枚举属性及原型上的属性 // 结果: age、name }
(2) Object.keys()
示例:
// 生成一个原型上有属性并且有可枚举属性与不可枚举属性的对象 const data = Object.create({ name: "这是原型上的属性", //生成原型上的属性 }); data.age = 23; // 对象自身(可枚举)属性 Object.defineProperty(data, "sex", { // 对象自身的不可枚举属性 value: "女", Enumerable: false, //不可枚举 }); // 使用Object.kes遍历data Object.keys(data).forEach(key=>{ console.log(key) // 获得data自身可枚举属性 // 结果: age })
(3) Object.getOwnPropertyNames()
示例:
// 生成一个原型上有属性并且有可枚举属性与不可枚举属性的对象
const data = Object.create({ name: "这是原型上的属性", //生成原型上的属性 }); data.age = 23; // 对象自身(可枚举)属性 Object.defineProperty(data, "sex", { // 对象自身的不可枚举属性 value: "女", Enumerable: false, //不可枚举 }); console.log(data); // 使用Object.getOwnPropertyNames()遍历data Object.getOwnPropertyNames(data).forEach(key=>{ console.log(key) // 获得data自身可枚举属性及不可枚举属性 // 结果: age、sex })
总结:
for…in获取对象自身的可枚举属性及原型上的属性(可通过hasOwnProperty()过滤原型上的属性);
Object.keys只获取对象自身的可枚举属性;
Object.getOwnPropertyNames获取对象自身的可枚举及不可枚举属性。
2 遍历数组的方法?
(1) for循环
示例:
const data = [ { id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }, ]; // for循环 for (let i = 0; i < data.length; i++) { console.log(data[i]); } // 优化效率的for循环(将length进行缓存) for (let i = 0, length = data.length; i < length; i++) { console.log(data[i]); }
(2) forEach
示例:
// 数组的遍历 const data = [ { id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }, ]; // forEach遍历 data.forEach(ee=>{ console.log(ee) })
(3) while遍历
示例:
// 数组的遍历 const data = [ { id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }, ]; // while遍历 let i=0; while(i<data.length){ console.log(data[i]); i++ }
(4) map
示例:
// 数组的遍历 const data = [ { id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }, ]; // map遍历 data.map(ee=>{ console.log(ee) })
(5) for…of
示例:
// 数组的遍历 const data = [ { id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }, ]; // for...of遍历 for(let i of data){ console.log(i) }
总结:
for写法麻烦,每一步需要手动处理;
foreach遍历数组的每一项,不影响原数组,性能差,不能中断循环,也不能return;
map支持return,返回值相当于克隆了一份数据,可改变克隆的部分但不影响原数组;
for…of语法简洁,可以与 break
、continue
和 return
配合使用。
辨析js遍历对象与数组的方法的更多相关文章
- js遍历对象的属性和方法
js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...
- JS遍历对象和数组总结
在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天把经常用到的方法总结一下! 一.遍历对象 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不 ...
- JS遍历对象或者数组
一.纯js实现 <script> var obj = {"player_id":"GS001","event_id":" ...
- JS遍历对象的几种方法
几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的 平时还真没有使用到这个方法,一时不知如何回答 从方法名称来分析,应该是返回的是对象自身属性名组成的数组 那 ...
- js遍历对象的数组
遍历数组: 1.js关键for遍历 2.jquery提供each功能 ----------------------------------- $.each(array, function(){ ...
- js声明 对象,数组 的方法
i={} 对象字面量 等同 i = new Object();i=[] 数组字面量 等同 i = new Array();
- JS合并两个数组的方法
JS合并两个数组的方法 我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合 ...
- jquery中each遍历对象和数组示例
通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个s ...
- javaScript遍历对象、数组总结(转载)
javaScript遍历对象.数组总结 转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...
随机推荐
- zjnu1189 土地租用(完整版)
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 77 Accepted: 10 Description 随着YYHS的OI ...
- 国产网络测试仪MiniSMB - 双击就可以直接编辑数据报文字段(如IP地址)
国产网络测试仪MiniSMB(www.minismb.com)是复刻smartbits的IP网络性能测试工具,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太 ...
- Go - 实现项目内链路追踪(二)
上篇文章 Go - 实现项目内链路追踪 分享了,通过 链路 ID 可以将 请求信息.响应信息.调用第三方接口的信息.调试信息.执行的 SQL 信息.执行的 Redis 信息 串起来,记录的具体参数在文 ...
- Docker--Image and Container
2.1 深入探讨Image 说白了,image就是由一层一层的layer组成的. 2.1.1 官方image https://github.com/docker-library mysql http ...
- ES2015 (ES6) 新特性: 20 个
ES2015 (ES6) 新特性 http://babeljs.io/docs/learn-es2015/ Learn ES2015 A detailed overview of ECMAScript ...
- Express vs Koa
Express vs Koa https://www.esparkinfo.com/express-vs-koa.html https://www.cleveroad.com/blog/the-bes ...
- 如何重置电信悦 me 智能网关
如何重置电信悦 me 智能网关 重置电信网关密码 电信悦 me 智能网关密码忘记了怎么办? 首先,得要知道默认终端配置地址和默认终端配置密码. 可以从无线路由器背面标签得知. 如果不知道密码了,可以通 ...
- 图解 Webpack 4.x 热更新原理
图解 Webpack 4.x 热更新原理 Webpack HMR ️ module.hot & module.hot.accept if (module.hot) { module.hot.a ...
- svn conflict & svn cleanup
svn conflict & svn cleanup OK $ svn --help $ svn cleanup Tree Conflicts https://tortoisesvn.net/ ...
- UI & APP
UI & APP lanhu http://help.lanhuapp.com/hc/ http://help.lanhuapp.com/hc/kb/article/1173434/ 快速使用 ...