JavaScript数组与对象遍历方法：一览全览与性能比较

2023-10-28 01:00:57

数组遍历

1.1 for循环

最传统且效率最高的数组遍历方法。它通过依次访问每个数组元素的索引来遍历数组，并通过数组的长度来控制循环次数。如下所示：

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

// 使用for循环遍历数组
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// 输出：
// 1
// 2
// 3
// 4
// 5

1.2 for...of循环

ES6引入的for...of循环是另一种遍历数组的语法糖，它比传统的for循环更简洁。for...of循环会创建一个迭代器对象，并依次访问数组中的每个元素。如下所示：

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

// 使用for...of循环遍历数组
for (const element of array) {
  console.log(element);
}

// 输出：
// 1
// 2
// 3
// 4
// 5

1.3 forEach()方法

forEach()方法是JavaScript数组原生提供的遍历方法。它接受一个回调函数作为参数，该函数会在数组的每个元素上执行。如下所示：

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

// 使用forEach()方法遍历数组
array.forEach((element) => {
  console.log(element);
});

// 输出：
// 1
// 2
// 3
// 4
// 5

1.4 map()方法

map()方法也是JavaScript数组原生提供的遍历方法。它接受一个回调函数作为参数，该函数会在数组的每个元素上执行，并返回一个新的数组。如下所示：

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

// 使用map()方法遍历数组，并将每个元素加1
const newArray = array.map((element) => {
  return element + 1;
});

// 输出：
// [2, 3, 4, 5, 6]

1.5 filter()方法

filter()方法也是JavaScript数组原生提供的遍历方法。它接受一个回调函数作为参数，该函数会在数组的每个元素上执行，并返回一个新的数组，其中只包含通过回调函数返回true的元素。如下所示：

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

// 使用filter()方法遍历数组，并过滤出大于2的元素
const newArray = array.filter((element) => {
  return element > 2;
});

// 输出：
// [3, 4, 5]

1.6 reduce()方法

reduce()方法也是JavaScript数组原生提供的遍历方法。它接受一个回调函数作为参数，该函数会在数组的每个元素上执行，并返回一个累积值。如下所示：

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

// 使用reduce()方法遍历数组，并计算数组元素的总和
const sum = array.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

// 输出：
// 15

2. 对象遍历

2.1 for...in循环

for...in循环是遍历对象的最简单方法。它会依次访问对象的所有可枚举属性，并通过对象的属性名来访问属性值。如下所示：

const object = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

// 使用for...in循环遍历对象
for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// 输出：
// name: John Doe
// age: 30
// city: New York

2.2 Object.keys()方法

Object.keys()方法返回一个数组，其中包含对象的所有可枚举属性名。可以使用该数组来遍历对象。如下所示：

const object = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

// 使用Object.keys()方法遍历对象
const keys = Object.keys(object);
for (const key of keys) {
  console.log(`${key}: ${object[key]}`);
}

// 输出：
// name: John Doe
// age: 30
// city: New York

2.3 Object.values()方法

Object.values()方法返回一个数组，其中包含对象的所有可枚举属性值。可以使用该数组来遍历对象。如下所示：

const object = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

// 使用Object.values()方法遍历对象
const values = Object.values(object);
for (const value of values) {
  console.log(value);
}

// 输出：
// John Doe
// 30
// New York

2.4 Object.entries()方法

Object.entries()方法返回一个数组，其中包含对象的所有可枚举属性的键值对。可以使用该数组来遍历对象。如下所示：

const object = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

// 使用Object.entries()方法遍历对象
const entries = Object.entries(object);
for (const [key, value] of entries) {
  console.log(`${key}: ${value}`);
}

// 输出：
// name: John Doe
// age: 30
// city: New York

3. 性能比较

以下是各种遍历方法的性能比较：

方法	时间复杂度	空间复杂度
for循环	O(n)	O(1)
for...of循环	O(n)	O(1)
forEach()方法	O(n)	O(1)
map()方法	O(n)	O(n)
filter()方法	O(n)	O(n)
reduce()方法	O(n)	O(1)
for...in循环	O(n)	O(1)
Object.keys()方法	O(n)	O(n)
Object.values()方法	O(n)	O(n)
Object.entries()方法	O(n)	O(n)

可以看到，在性能方面，for循环和for...of循环是最快的，时间复杂度均为O(n)，空间复杂度均为O(1)。forEach()方法、map()方法、filter()方法和reduce()方法的时间复杂度也为O(n)，但空间复杂度为O(n)，因为它们需要创建一个新的数组。for...in循环、Object.keys()方法、Object.values()方法和Object.entries()方法的时间复杂度也为O(n)，但空间复杂度为O(n)，因为它们需要创建一个新的数组来存储对象的可枚举属性。