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语法简洁,可以与 breakcontinue 和 return 配合使用。

辨析js遍历对象与数组的方法的更多相关文章

  1. js遍历对象的属性和方法

    js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...

  2. JS遍历对象和数组总结

    在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天把经常用到的方法总结一下! 一.遍历对象 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不 ...

  3. JS遍历对象或者数组

    一.纯js实现 <script> var obj = {"player_id":"GS001","event_id":" ...

  4. JS遍历对象的几种方法

    几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的 平时还真没有使用到这个方法,一时不知如何回答 从方法名称来分析,应该是返回的是对象自身属性名组成的数组 那 ...

  5. js遍历对象的数组

    遍历数组: 1.js关键for遍历 2.jquery提供each功能 ----------------------------------- $.each(array, function(){     ...

  6. js声明 对象,数组 的方法

    i={} 对象字面量 等同 i = new Object();i=[] 数组字面量 等同 i = new Array();

  7. JS合并两个数组的方法

    JS合并两个数组的方法 我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合 ...

  8. jquery中each遍历对象和数组示例

    通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个s ...

  9. javaScript遍历对象、数组总结(转载)

    javaScript遍历对象.数组总结  转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...

随机推荐

  1. zjnu1189 土地租用(完整版)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 77   Accepted: 10 Description 随着YYHS的OI ...

  2. 国产网络测试仪MiniSMB - 双击就可以直接编辑数据报文字段(如IP地址)

    国产网络测试仪MiniSMB(www.minismb.com)是复刻smartbits的IP网络性能测试工具,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太 ...

  3. Go - 实现项目内链路追踪(二)

    上篇文章 Go - 实现项目内链路追踪 分享了,通过 链路 ID 可以将 请求信息.响应信息.调用第三方接口的信息.调试信息.执行的 SQL 信息.执行的 Redis 信息 串起来,记录的具体参数在文 ...

  4. Docker--Image and Container

    2.1 深入探讨Image  说白了,image就是由一层一层的layer组成的. 2.1.1 官方image https://github.com/docker-library mysql http ...

  5. ES2015 (ES6) 新特性: 20 个

    ES2015 (ES6) 新特性 http://babeljs.io/docs/learn-es2015/ Learn ES2015 A detailed overview of ECMAScript ...

  6. Express vs Koa

    Express vs Koa https://www.esparkinfo.com/express-vs-koa.html https://www.cleveroad.com/blog/the-bes ...

  7. 如何重置电信悦 me 智能网关

    如何重置电信悦 me 智能网关 重置电信网关密码 电信悦 me 智能网关密码忘记了怎么办? 首先,得要知道默认终端配置地址和默认终端配置密码. 可以从无线路由器背面标签得知. 如果不知道密码了,可以通 ...

  8. 图解 Webpack 4.x 热更新原理

    图解 Webpack 4.x 热更新原理 Webpack HMR ️ module.hot & module.hot.accept if (module.hot) { module.hot.a ...

  9. svn conflict & svn cleanup

    svn conflict & svn cleanup OK $ svn --help $ svn cleanup Tree Conflicts https://tortoisesvn.net/ ...

  10. UI & APP

    UI & APP lanhu http://help.lanhuapp.com/hc/ http://help.lanhuapp.com/hc/kb/article/1173434/ 快速使用 ...