javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS各种对象遍历

JavaScript中各种对象遍历方法总结

作者：m0_75041482

遍历对象在JS编程中是一个常见的任务,通过使用for...in循环、Object.keys()、Object.values()和Object.entries()方法,我们可以轻松地遍历对象的属性和值,这篇文章主要给大家介绍了关于JavaScript中各种对象遍历方法的相关资料,需要的朋友可以参考下

1.forEach方法

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

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

参数说明：

基本用法示例

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

适用场景

不适用场景

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}]

实际应用场景

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']

实际应用场景

注意事项

4.for...of循环

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

特点

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的区别

5.some方法

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

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

特点

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);

特点

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 数组遍历方法对比表

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

详细对比说明

1. 返回值差异

2. 循环控制能力

3. 空数组处理

4. 性能考量

5. 典型使用场景

选择建议

  1. 需要 转换数组结构 → map

  2. 需要 过滤数据 → filter

  3. 需要 检查是否至少一个元素满足条件 → some

  4. 需要 检查所有元素是否满足条件 → every

  5. 需要 灵活控制循环过程 → for...of

  6. 只需要 简单遍历执行操作 → forEach

总结 

到此这篇关于JavaScript中各种对象遍历方法总结的文章就介绍到这了,更多相关JS各种对象遍历内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文