5个数组Array方法：indexOf、filter、forEach、map、reduce使用实例

一、介绍

数组是JavaScript中最常用的数据类型之一。使用数组的时候，我们经常需要使用到一些方法对数组进行操作，比如获取某个元素的下标、筛选元素、遍历元素、处理元素等等。本篇攻略将详细讲解五个数组Array方法：indexOf、filter、forEach、map、reduce，并提供实例说明，帮助大家更好了解和熟练掌握这些方法的使用。

二、indexOf

indexOf方法用于获取指定元素在数组中的下标。如果数组中存在该元素，则返回该元素的下标；如果不存在，则返回-1。该方法有如下语法：

array.indexOf(searchElement[, fromIndex])

其中，searchElement为要搜索的元素，fromIndex为可选参数，表示搜索的起始下标，默认值为0。

示例一：查找指定元素在数组中的下标

const arr = ['apple', 'banana', 'orange', 'grape', 'watermelon'];
const index = arr.indexOf('orange');

console.log(index); // 2

示例二：查找指定元素在数组中是否存在

const arr = ['apple', 'banana', 'orange', 'grape', 'watermelon'];
const index = arr.indexOf('kiwi');

if (index === -1) {
  console.log('该元素不存在');
} else {
  console.log('该元素下标为：', index);
}

三、filter

filter方法用于筛选符合条件的元素并返回一个新数组。它的语法如下：

const newArray = array.filter(callback(element[, index[, array]])[, thisArg])

其中，callback为用于测试每个元素的函数，element为当前被测试的元素，index为可选参数，表示当前元素在数组中的下标，array为可选参数，表示原数组。这个函数返回一个布尔值，表示是否保留该元素。thisArg为可选参数，表示执行回调函数时的this值，默认为undefined。

示例一：筛选数组中所有偶数

const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.filter(function(item) {
  return item % 2 === 0;
});

console.log(newArr); // [2, 4, 6]

示例二：筛选对象数组中符合条件的元素

const arr = [
  { name: 'Apple', price: 5 },
  { name: 'Banana', price: 3 },
  { name: 'Orange', price: 2 },
  { name: 'Grape', price: 4 },
  { name: 'Watermelon', price: 6 }
];
const newArr = arr.filter(function(item) {
  return item.price > 4;
});

console.log(newArr); // [{ name: 'Apple', price: 5 }, { name: 'Watermelon', price: 6 }]

四、forEach

forEach方法用于遍历数组。它的语法如下：

array.forEach(callback(currentValue[, index[, array]])[, thisArg])

其中，callback为遍历数组时执行的回调函数，currentValue表示当前遍历的数组元素，index表示当前元素在数组中的下标，array表示原数组。这个函数没有返回值。thisArg同样为可选参数，表示执行回调函数时的this值，默认为undefined。

示例一：遍历输出数组中的元素

const arr = ['apple', 'banana', 'orange', 'grape', 'watermelon'];
arr.forEach(function(item, index) {
  console.log(index + ': ' + item);
});

示例二：使用箭头函数遍历输出数组中的元素

const arr = ['apple', 'banana', 'orange', 'grape', 'watermelon'];
arr.forEach((item, index) => {
  console.log(index + ': ' + item);
});

五、map

map方法用于对数组中的每个元素进行处理并返回一个新的数组。它的语法如下：

const newArray = array.map(callback(currentValue[, index[, array]])[, thisArg])

其中，callback为用于处理每个元素的函数，currentValue表示待处理的当前元素，index表示当前元素在数组中的下标，array表示原数组。这个函数返回一个新的数组。thisArg同样为可选参数，表示执行回调函数时的this值，默认为undefined。

示例一：将数组中的元素全部转为大写

const arr = ['apple', 'banana', 'orange', 'grape', 'watermelon'];
const newArr = arr.map(function(item) {
  return item.toUpperCase();
});

console.log(newArr); // ['APPLE', 'BANANA', 'ORANGE', 'GRAPE', 'WATERMELON']

示例二：将对象数组中某个属性提取出来组成一个新数组

const arr = [
  { name: 'Apple', price: 5 },
  { name: 'Banana', price: 3 },
  { name: 'Orange', price: 2 },
  { name: 'Grape', price: 4 },
  { name: 'Watermelon', price: 6 }
];
const newArr = arr.map(function(item) {
  return item.name;
});

console.log(newArr); // ['Apple', 'Banana', 'Orange', 'Grape', 'Watermelon']

六、reduce

reduce方法用于对数组中的每个元素进行累加或累乘等操作，最终返回一个值。它的语法如下：

array.reduce(callback[, initialValue])

其中，callback为累加器函数，initialValue为可选参数，表示初始值。累加器函数接受四个参数：accumulator表示累加器的累计值，currentValue表示当前遍历的元素，index表示当前元素在数组中的下标，array表示原数组。函数返回值为累计值。初始值默认为数组的第一个元素。

示例一：对数组元素进行累加

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});

console.log(sum); // 15

示例二：统计对象数组中某属性值的总和

const arr = [
  { name: 'Apple', price: 5 },
  { name: 'Banana', price: 3 },
  { name: 'Orange', price: 2 },
  { name: 'Grape', price: 4 },
  { name: 'Watermelon', price: 6 }
];
const priceSum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue.price;
}, 0);

console.log(priceSum); // 20

以上就是五个数组Array方法：indexOf、filter、forEach、map、reduce使用实例的完整攻略。通过以上示例，希望读者能够更好地理解和掌握这些数组方法的使用，从而提高开发效率。