前端必需知道的7种JS对象遍历方法

方法总览

对象的遍历方法

一、for…in

定义

1. 遍历对象自身的和继承的可枚举的属性（不含Symbol属性）的键名。
2. 由于对象的属性没有顺序，因此for…in每个属性都会返回一次，但输出的属性顺序不可预测。

语法：

for (var key in obj) {
   
    // 执行代码块
    console.log(obj[key])
}

这里的var操作符不是必需，但为了保证局部变量，推荐使用上面的写法

代码解析

function Person (name, age) {
   
  this.name = name
  this.age = age
  this.sayHello = function () {
   
    console.log('Hello');
  }
}

Person.prototype.addr = 'The Earth'
Person.prototype.getNum = function() {
   
  console.log(1);
}

const tom = new Person('Tom', 18, 'tomato')
console.log(tom); // { name: 'Tom', age: 18, sayHello: [Function] }
console.log(tom.__proto__); // { addr: 'The Earth', getNum: [Function] }

// 会遍历自身和继承的属性和方法
for (var key in tom) {
   
  console.log(key + ':' + tom[key]);
  /*
    name:Tom, age:18, sayHello:function(){...} , addr:The Earth, getNum:function() {...}
  */
}

for…in用于遍历数组

遍历数组的缺点：

• 数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
• for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
• 某些情况下，for…in循环会以任意顺序遍历键名。
• for…in循环主要是为遍历对象而设计的，不适用于遍历数组

const colors = ['red', 'blue', 'yellow']
colors.name = 'overcast'
for (var key in colors) {
   
  // 以字符串作为键名
  console.log(key); // '0', '1', '2', name
}

for (var v of colors) {
   
  console.log(v);  // red, blue, yellow
}

使用for…in进行深拷贝

function deepClone (obj = {
    }) {
   
  let result
  if (typeof obj !== 'object' || obj === null) {
   
    return obj
  }

  // 判断是对象还是数组
  if (obj instanceof Array) {
   
    result = []
  } else {
   
    result = {