理解 JavaScript 数组方法

如果你是一名 JavaScript 开发人员，那么你应该熟悉最常用的 ES5 和 ES6+ 数组方法。

这些方法使 JavaScript 编码变得更加容易，也使你的代码看起来简洁明了，易于所有人理解。

所以，在本文中，我们将探讨JavaScript中最重要、最常用的一些数组方法。那么，让我们开始吧。

Array.forEach 方法

该Array.forEach方法的语法如下：

Array.forEach(callbackfn: (value: element, index: number, array: []))

该forEach方法会为数组中的每个元素执行一次提供的回调函数。

const months = ['January', 'February', 'March', 'April', 'May', 'June'];
months.forEach(function(month) {
  console.log(month);
});

/* output
January
February
March
April
May
June
*/

这里有一个Codepen 示例

在这里，在forEach循环回调函数内部，数组中的每个元素都会自动作为函数的第一个参数传递。

需要记住的重要一点是，forEach 方法不返回任何值。

请查看以下代码：

const workDays= ['Monday', 'Tuesday', 'Wednesday', 'Thursday'];
const returnedValue = workDays.forEach(function (day) {
  return day;
});

console.log('returnedValue: ', returnedValue); // undefined

请注意，它forEach仅用于遍历数组并执行一些处理或日志记录。即使您return从回调函数中显式地传递一个值，它也不会返回任何值function（这意味着返回值undefined与上面的示例相同）。

使用 Array.forEach 方法的优势

使用 forEach 循环可以使你的代码更简洁、更易于理解。
使用 forEach 循环时，我们不需要跟踪数组中元素的数量，因此避免了创建额外的计数器变量。
使用 forEach 循环可以简化代码调试，因为遍历数组不需要额外的变量。
当数组中的所有元素都遍历完毕时，forEach 循环会自动停止。

Array.map 方法

在所有数组方法中，数组映射方法是最有用、应用最广泛的数组方法。

该Array.map方法的语法如下：

Array.map(callbackfn: (value: element, index: number, array: []))

map 方法会对数组中的每个元素执行一次提供的回调函数，并返回一个包含结果的新转换数组。

请查看以下代码：

const workDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
const upperDays = workDays.map(function (day) {
  return day.toLocaleUpperCase();
});

console.log( upperDays); 
//output ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY','FRIDAY']

以下是一个代码示例

在上面的代码中，在回调函数内部，我们将每个元素转换为大写并返回它。

使用map该方法可以避免预先创建单独的转换数组来存储转换后的元素。这样既节省了内存空间，也使代码更加简洁。Array.map

请注意，该map方法返回一个与原始数组长度完全相同的新数组。

forEach` map` 和 `return` 方法的区别forEach在于，`map` 仅用于循环，不返回任何值。而 `return`map方法则会返回一个与原数组长度完全相同的新数组。

另外，请注意，该函数map不会更改原始数组，而是返回一个新数组。

map如果您只想从数组中提取特定数据，数组方法也很有用，例如：

const workers = [
    {
        first_name: 'Mike',
        last_name: 'Sheridan',
        age: 30
    },
    {
        first_name: 'Tim',
        last_name: 'Lee',
        age: 45
    },
    {
        first_name: 'John',
        last_name: 'Carte',
        age: 25
    },
    {
        first_name: 'Paul',
        last_name: 'Victor',
        age: 22
    }
]

const workersAges = workers.map(function (user) {
    return user.age 
})

console.log(workersAges)
//output: [30, 45, 25, 22]

以下是一个代码示例

在上面的代码中，我们只提取每个工人的年龄，并将它们存储在一个新数组中。

使用映射方法的优势

它可以帮助快速生成一个新数组，而不会改变原始数组。
它允许我们快速提取数组中的任何元素。
它会生成一个与原始数组长度完全相同的数组。

Array.find 方法

该Array.find方法的语法如下：

Array.find(predicate: (value: element, index: number, array: []))

该find方法返回数组中第一个满足所提供测试条件的元素的值，否则返回 undefined。

该find方法以回调函数(predicate)作为第一个参数，并对(predicate)数组中的每个元素执行该回调函数。每个数组元素的值都作为第一个参数传递给回调函数。

假设我们有一份员工名单，如下所示：

const employees = [
    { name: "David Carlson", age: 32 },
    { name: "John Copper", age: 25 },
    { name: "Mike Sheridan", age: 24 },
    { name: "John Carte", age: 50 }
   ];

我们想要获取年龄小于 30 岁的员工记录。在这种情况下，我们可以使用如下所示的 find 方法：

 const underAgeWorker= employees.find(function (employee) {
    return employee.age < 30 ;
  });

 console.log(underAgeWorker); 
// outputs: {name: "John Copper", age: 25}

以下是一个代码示例

即使"Mike Sheridan"列表中存在年龄小于 30 岁的元素，find 方法也会在找到第一个匹配项后停止。因此，它不会返回第一个年龄小于 30 岁的对象。

使用 find 方法的优势

它使我们能够快速找到任何元素，而无需编写大量代码。
一旦找到匹配项，循环就会立即停止，因此不需要额外的 break 语句。

Array.findIndex 方法

该Array.findIndex方法的语法如下：

Array.findIndex(callbackfn: (value: element, index: number, array: []))

该findIndex方法返回数组中第一个满足所提供测试条件的元素的索引。否则，返回 -1，表示没有元素通过测试。

const employees = [
    { name: "David Carlson", age: 32 },
    { name: "John Copper", age: 25 },
    { name: "Mike Sheridan", age: 24 },
    { name: "John Carte", age: 50 }
   ];

const index = employees.findIndex(function (employee) {
  return employee.name.indexOf('John') > -1;
})

console.log(index); 
// outputs:  1

这里我们得到的输出是 1，它是第一个名为 John 的对象的索引。请注意，数组的索引从零开始。

使用 findIndex 方法的优势

它使我们能够快速找到元素的索引，而无需编写大量代码。
一旦找到匹配项，循环就会立即停止，因此不需要额外的 break 语句。

Array.filter 方法

该Array.filter方法的语法如下：

Array.filter(callbackfn: (value: element, index: number, array: []))

该filter方法接受一个回调函数作为第一个参数，并对数组中的每个元素执行该回调函数，然后返回a new array满足回调函数中指定条件的所有元素。

因此，使用这种filter方法，它不会在找到特定匹配项后停止，而是会继续检查数组中其他符合条件的元素。然后，它会返回数组中所有匹配的元素。

const employees = [
    { name: "David Carlson", age: 30 },
    { name: "John Cooper", age: 24 },
    { name: "Mike Sheridan", age: 25 },
    { name: "John Carte", age: 50 }
   ];

   const employee = employees.filter(function (employee) {
    return employee.name.indexOf("John") > 1 ;
  });

console.log(employee)
//output [ { name: "John Cooper", age: 24 }, { name: "Mike Sheridan", age: 25 } ]

请注意，该filter方法始终返回一个数组。如果没有元素通过测试条件，则返回一个空数组。

使用过滤法的优势

它使我们能够快速找到数组中所有匹配的元素。
即使没有匹配项，它也总是返回一个数组，因此避免了编写额外的 if 条件语句。
这样就避免了创建额外变量来存储筛选后的元素。

Array.every 方法

该Array.every方法的语法如下：

Array.every(callbackfn: (value: any, index: number, array: []))

该every方法测试数组中的所有元素是否都通过提供的测试条件，并返回布尔true值false。

假设你有一个注册表单，你想在提交表单之前检查所有必填字段是否都已填写。你可以使用该every方法轻松检查每个字段的值。
以下是一个代码示例。

使用每种方法的优势

它使我们能够快速检查所有元素是否符合特定条件，而无需编写大量代码。

Array.reduce 方法

该Array.reduce方法的语法如下：

Array.reduce(callbackfn: (accumulator: any, currentValue: any, Index: number, array: []), initialValue)

该reduce方法对数组中的每个元素执行一个reducer函数（由您提供），从而产生一个输出值。

请注意，该方法的输出reduce始终是一个单独的值。它可以是对象、数字、字符串、数组等等。具体输出类型取决于您希望该reduce方法生成什么，但始终是一个单独的值。

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

const sum = numbers.reduce(function(accumulator, number) {
  return accumulator + number; 
}, 0);

console.log(sum); // 15

该reduce方法接受一个回调函数，该函数接收 `a` accumulator、number`b`index和array`c` 作为值。在上面的代码中，我们只使用了 `a`accumulator和 `c` number。

该元素accumulator将包含initialValue用于该元素的值array。该元素initialValue决定了该方法返回的数据的返回类型reduce。

这number是回调函数的第二个参数，它将在循环的每次迭代中包含该array元素。

在上面的代码中，我们0为提供initialValue了accumulator。因此，回调函数第一次执行时，accumulator+number将是，0 + 1 = 1并且我们将返回该值1。

下次回调函数运行时，accumulator+number将是1 + 2 = 3（1这里是
上一次迭代返回的前一个值，2是下一个元素array）。

然后，下次回调函数运行时，accumulator+number将是3 + 3 = 6（这里的第一个3是上次迭代中返回的前一个值，下一个3是中的下一个元素），并且它将以这种方式继续，直到sarray中的所有元素都没有被迭代为止。numberarray

因此，它将accumulator像静态变量一样保留最后一次操作的值。

在上面的代码中，不需要使用initialValueof ，因为的所有元素都是整数。0array

使用reduce方法的优势

使用 reduce 方法，我们可以基于数组生成任何类型的简单或复杂数据。
它会记住循环之前返回的数据，因此可以帮助我们避免创建全局变量来存储先前的值。

非常感谢您的阅读！

以上就是全部内容。希望你们对强大的 JavaScript 数组及其方法有了一些了解。

如果您还有任何疑问，请随时在下方评论区留言！

想及时获取有关 JavaScript、Python 和编程等方面的最新内容吗？请在Twitter上关注我。

**读这篇文章你是不是也和我写这篇文章一样开心呢？😍** 请我喝杯咖啡支持一下吧😃

文章来源：https://dev.to/iamvictor/understanding-javascript-array-methods-44fj

菜单

分享

理解 JavaScript 数组方法

理解 JavaScript 数组方法

如果你是一名 JavaScript 开发人员，那么你应该熟悉最常用的 ES5 和 ES6+ 数组方法。

Array.forEach 方法

使用 Array.forEach 方法的优势

Array.map 方法

使用映射方法的优势

Array.find 方法

使用 find 方法的优势

Array.findIndex 方法

使用 findIndex 方法的优势

Array.filter 方法

使用过滤法的优势

Array.every 方法

使用每种方法的优势

Array.reduce 方法

使用reduce方法的优势

非常感谢您的阅读！

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码