JS数组和对象循环遍历的几种实现方式

Question

如题所述

Answer 1

探索JS数组与对象的多元遍历策略

1. 传统for循环

let arr = [1,2,3,4,5];

for (let i = 0, length = arr.length; i < length; i++) {

 console.log(arr[i]);

}

2. 简化优化版for循环

let arr = [1,2,3,4,5];

for (let j = 0; j < arr.length; j++) {

 console.log(arr[j]);

}

3. 优雅的forEach遍历

forEach提供了对数组元素的高效处理，利用箭头函数，确保正确的this指向:

let arr = [1,2,3,4,5];

arr.forEach((currentValue, index, arr) => {

 console.log(currentValue, index, arr, this);

}, {});

4. map的强大功能

map用于变换数组，同时返回新数组，这里展示了对数组元素进行操作的示例:

let arr = [1,2,3,4,5];

let mapResult = arr.map((currentValue, index, arr) => {

 console.log(currentValue, index, arr);

 return currentValue * index;

});

console.log(mapResult);

遍历策略对比

forEach用于处理，而map则用于数组的值映射，生成新的数据结构。

5. for...of的迭代乐趣

let arr = [1,2,3,4,5];

for (let num of arr) {

 console.log(num);

}

6. 精准对象遍历

for...in适合于对象属性的遍历，但需注意过滤掉非自有属性:

const obj = Object.create({ bar: 'bar' });

obj.foo = 'foo';

for (let prop in obj) {

 if (obj.hasOwnProperty(prop)) {

  console.log(prop);

 } 

深入理解对象属性

for...in只遍历可枚举属性，Object.keys()获取这些属性（排除Symbol）。
使用Object.getOwnPropertyNames()包括不可枚举属性，而Object.getOwnPropertySymbols()专为Symbol属性。
Reflect.ownKeys()包含所有属性，包括不可枚举和Symbol。

这些方法在处理对象属性时，提供了多样化的选择与应用场景。