js中的各种对象遍历方法

m0_75041482

已于 2025-05-28 17:30:30 修改

阅读量1.1k

点赞数 22

CC 4.0 BY-SA版权

文章标签： javascript 算法开发语言前端

于 2025-05-28 17:21:59 首次发布

本文链接：https://blog.csdn.net/m0_75041482/article/details/148287166

1.forEach方法

forEach是javaScrip中数组(Array)的一个内置方法，用于遍历数组中的每个元素并执行回调函数。

array.forEach(function(currentValue, index, array) {
  // 执行的操作
}, thisArg);

参数说明：

currentValue：当前处理的数组元素（必需）
index：当前元素的索引（可选）
array：正在操作的数组本身（可选）
thisArg：执行回调时用作 this 的值（可选）
基本用法示例

const fruits = ['apple', 'banana', 'orange'];

// 简单遍历
fruits.forEach(function(fruit) {
  console.log(fruit);
});
// 输出: apple, banana, orange

// 带索引的遍历
fruits.forEach(function(fruit, index) {
  console.log(index + ': ' + fruit);
});
// 输出: 0: apple, 1: banana, 2: orange

箭头函数写法

fruits.forEach((fruit,index)) =>{
console.log(${index+1}: ${fruit});
}

特点与注意事项

不会改变原数组（除非在回调中手动修改）

const numbers = [1, 2, 3];
numbers.forEach(num => num * 2); // 原数组不变
console.log(numbers); // [1, 2, 3]

没有返回值（返回 `undefined`）

const result = [1, 2, 3].forEach(num => num * 2);
console.log(result); // undefined

无法中途跳出循环（不能使用 `break` 或 `return`）

// 这样不会停止循环
[1, 2, 3].forEach(num => {
  if (num === 2) return; // 只是跳过当前迭代
  console.log(num);
});

会跳过空位

[1, , 3].forEach(num => console.log(num)); // 输出: 1, 3

适用场景
需要对数组每个元素执行相同操作
不需要中途退出循环
代码可读性优先于性能
不适用场景
需要根据条件提前终止循环（改用 for 或 some/every）
需要返回新数组（改用 map）
需要过滤数组（改用 filter）
2.map--数组映射转换
map是JavaScript 数组的高阶函数，用于处理数组并返回新数组。而我们的forEach不会返回新数组。map（）方法会创建一个新数组，其结果是原数组的每个元素调用一次提供的函数返回值。

const newArray = arr.map(function(currentValue, index, array) {
  // 返回处理后的元素
}, thisArg);

特点

返回新数组（不修改原数组）
新数组长度与原数组相同
用于数据转换/格式化

const numbers = [1, 2, 3];

// 所有元素乘以2
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// 转换为对象数组
const objects = numbers.map(num => ({ value: num }));
console.log(objects); // [{value: 1}, {value: 2}, {value: 3}]

实际应用场景
API数据格式化
渲染列表前的数据准备
数值计算转换

3.filter---数组过滤

基本概念：filter()方法会创建一个新数组，包含通过所提供的函数测试的所有元素。

const newArray = arr.filter(function(currentValue, index, array) {
  // 返回true保留元素，false过滤元素
}, thisArg);

何时选择

特点
返回新数组（不修改原数组）
新数组长度 ≤ 原数组长度
用于数据筛选

const numbers = [1, 2, 3, 4, 5];

// 过滤偶数
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// 过滤长度大于3的字符串
const words = ['apple', 'banana', 'pear'];
const longWords = words.filter(word => word.length > 4);
console.log(longWords); // ['banana']

实际应用场景

搜索/筛选功能
数据清理（去除无效数据）
权限过滤
注意事项
不修改原数组：两者都返回新数组，不影响原数组
性能考虑：大数据量时，链式调用多个方法可能影响性能
需要转换数据格式 → 用 map
需要筛选数据子集 → 用 filter
需要先筛选再转换 → 链式调用 filter().map()
空位处理：map会保留空位，filter会跳过空位
异步问题：回调函数中使用异步代码需要特别处理
4.for...of循环
基本概念：for...of 是 ES6 引入的循环语法，用于遍历可迭代对象（如 Array、String、Map、Set 等）

for (const element of iterable) {
  // 执行操作
}

特点

可遍历任何可迭代对象（实现了 [Symbol.iterator] 方法的对象）
可以直接获取元素值（不需要通过索引）
可以使用 break 和 continue 控制循环
不提供索引（需要索引时可结合 entries()）

const fruits = ['apple', 'banana', 'orange'];

// 基本用法
for (const fruit of fruits) {
  console.log(fruit);
}

// 带索引的遍历
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

// 可提前终止
for (const fruit of fruits) {
  if (fruit === 'banana') break;
  console.log(fruit); // 只输出 'apple'
}

与 `forEach` 的区别

for...of 可以使用 break/continue
for...of 可以遍历任何可迭代对象，而 forEach 只是数组方法
for...of 性能通常比 forEach 更好

5.some方法

基本概念：some()测试数组中是否至少有一个元素通过了提供的函数测试。

array.some(function(currentValue, index, array) {
  // 返回布尔值
}, thisArg);

特点

返回布尔值（true/false）
遇到第一个返回 true 的元素就停止遍历
空数组调用始终返回 false
不修改原数组

const numbers = [1, 2, 3, 4, 5];

// 检查是否有偶数
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

// 检查是否有大于10的数
const hasLargeNumber = numbers.some(num => num > 10);
console.log(hasLargeNumber); // false

实际应用

权限检查（是否有某项权限）
表单验证（是否有无效字段）
搜索（是否存在匹配项）

6.every方法

基本概念：every()测试数组中的所有元素是否都通过了提供的函数测试。

array.every(function(currentValue, index, array) {
  // 返回布尔值
}, thisArg);

特点

返回布尔值（true/false）
遇到第一个返回 false 的元素就停止遍历
空数组调用始终返回 true（空真规则）
不修改原数组

const numbers = [2, 4, 6, 8, 10];

// 检查是否都是偶数
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

// 检查是否都小于5
const allSmall = numbers.every(num => num < 5);
console.log(allSmall); // false (6不小于5)

实际应用

表单验证（所有字段是否有效）
权限检查（是否具备所有权限）
数据完整性检查

JavaScript 数组遍历方法对比表

方法	返回值	是否修改原数组	能否中断循环	空数组处理	主要用途	性能特点
forEach	`undefined`	否	否	跳过空位	遍历执行操作	中等，最通用
map	新数组	否	否	保留空位	数据转换/映射	稍慢，需处理所有元素
filter	新数组	否	否	跳过空位	数据筛选	中等，可能提前结束
for...of	无	可手动修改	可(`break`)	不执行	通用遍历	较快
some	布尔值	否	可(短路)	返回`false`	检查是否存在符合条件的元素	最快(可能提前结束)
every	布尔值	否	可(短路)	返回`true`	检查所有元素是否都符合条件	最快(可能提前结束)