前端必需知道的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 = namethis.age = agethis.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 resultif (typeof obj !== 'object' || obj =&#