掌握前端开发必备的7种JS对象遍历技巧
最编程
2024-01-14 22:27:22
...
一、for…in
定义
- 遍历对象自身的和继承的可枚举的属性(不含Symbol属性)的键名。
- 由于对象的属性没有顺序,因此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 = {
上一篇: JS中常用的数组和对象遍历技巧有哪些?
下一篇: JS遍历语法大比拼
推荐阅读