辨析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 配合使用。