在 JavaScript 中遍历数组和对象的方法汇总

2023-11-02 21:07:46

遍历数组的方法

1. forEach() 方法

forEach() 方法用于对数组的每个元素执行一次指定的回调函数。它不会改变原数组，而是返回一个新的数组，其中包含回调函数的返回值。

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

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

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

2. map() 方法

map() 方法用于将数组的每个元素映射到一个新值。它返回一个新的数组，其中包含回调函数的返回值。

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

// 使用 map() 方法将数组中的每个元素平方
const squaredNumbers = numbers.map((number) => {
  return number * number;
});

// 输出结果：
// [1, 4, 9, 16, 25]

3. filter() 方法

filter() 方法用于从数组中筛选出满足指定条件的元素。它返回一个新的数组，其中包含满足条件的元素。

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

// 使用 filter() 方法从数组中筛选出偶数
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

// 输出结果：
// [2, 4]

4. some() 方法

some() 方法用于检查数组中是否存在满足指定条件的元素。它返回一个布尔值，表示是否存在满足条件的元素。

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

// 使用 some() 方法检查数组中是否存在大于 3 的元素
const isGreaterThanThree = numbers.some((number) => {
  return number > 3;
});

// 输出结果：
// true

5. every() 方法

every() 方法用于检查数组中是否所有元素都满足指定条件。它返回一个布尔值，表示是否所有元素都满足条件。

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

// 使用 every() 方法检查数组中是否所有元素都是偶数
const isAllEven = numbers.every((number) => {
  return number % 2 === 0;
});

// 输出结果：
// false

6. reduce() 方法

reduce() 方法用于将数组中的所有元素归并为一个值。它返回一个累积值，它是对数组中所有元素的指定回调函数的结果的累积。

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

// 使用 reduce() 方法将数组中的所有元素求和
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

// 输出结果：
// 15

7. find() 方法

find() 方法用于在数组中查找满足指定条件的第一个元素。它返回满足条件的第一个元素，或者 undefined。

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

// 使用 find() 方法查找数组中第一个大于 3 的元素
const firstGreaterThanThree = numbers.find((number) => {
  return number > 3;
});

// 输出结果：
// 4

8. findIndex() 方法

findIndex() 方法用于在数组中查找满足指定条件的第一个元素的索引。它返回满足条件的第一个元素的索引，或者 -1。

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

// 使用 findIndex() 方法查找数组中第一个大于 3 的元素的索引
const firstGreaterThanThreeIndex = numbers.findIndex((number) => {
  return number > 3;
});

// 输出结果：
// 3

遍历对象的方法

1. for...in 循环

for...in 循环用于遍历对象的属性。它返回一个字符串数组，其中包含对象的属性名称。

const person = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

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

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

2. Object.keys() 方法

Object.keys() 方法用于返回一个数组，其中包含对象的属性名称。

const person = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

// 使用 Object.keys() 方法返回对象的属性名称
const keys = Object.keys(person);

// 输出结果：
// ["name", "age", "city"]

3. Object.values() 方法

Object.values() 方法用于返回一个数组，其中包含对象的属性值。

const person = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

// 使用 Object.values() 方法返回对象的属性值
const values = Object.values(person);

// 输出结果：
// ["John Doe", 30, "New York"]

4. Object.entries() 方法

Object.entries() 方法用于返回一个数组，其中包含对象的键值对数组。

const person = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

// 使用 Object.entries() 方法返回对象的键值对数组
const entries = Object.entries(person);

// 输出结果：
// [["name", "John Doe"], ["age", 30], ["city", "New York"]]

5. forEach() 方法

forEach() 方法也可以用于遍历对象。它会对对象的每个属性执行一次指定的回调函数。

const person = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

// 使用 forEach() 方法遍历对象的属性
person.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

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