😬 10 个必须知道的 JavaScript 数组方法

在本文中，我们将介绍 10 个重要的 JavaScript 数组方法，这些方法几乎在 JavaScript 项目中随处可见。我们将通过示例快速了解每个方法。以下是前 8 个方法示例所需的数据。


const studentData = [
    { name: 'John', marks: 634, passed: true },
    { name: 'Mark', marks: 467, passed: true },
    { name: 'Randy', marks: 390, passed: true },
    { name: 'Leo', marks: 149, passed: false },
    { name: 'Chris', marks: 564, passed: true },
    { name: 'Apu', marks: 456, passed: true },
    { name: 'Naty', marks: 567, passed: true },
    { name: 'James', marks: 98, passed: false },
    { name: 'Andy', marks: 478, passed: true },
    { name: 'Frank', marks: 180, passed: false },
    { name: 'Don', marks: 123, passed: false }
];

筛选（）

该filter()方法创建一个新数组，其中包含所有通过指定函数实现的测试的元素。
假设我们只需要获取已通过测试的学生。因此，我们将按如下方式进行筛选。

const passedStudents = studentData.filter((student) => {
    return student.passed;
});
console.log(passedStudents);

输出：

[
{ 名称：'John', 分数：634, 已通过：true },
{ 名称：'Mark', 分数：467, 已通过：true },
{ 名称：'Randy', 分数：390, 已通过：true },
{ 名称：'Chris', 分数：564, 已通过：true },
{ 名称：'Apu', 分数：456, 已通过：true },
{ 名称：'Naty', 分数：567, 已通过：true },
{ 名称：'Andy', 分数：478, 已通过：true }
]

地图（）

该map()方法创建一个新数组，其中包含对调用数组中每个元素调用指定函数的结果。
假设我们想获取每个学生的姓名数组。我们可以这样获取：

const studentNames = studentData.map((student) => {
    return student.name;
});
console.log(studentNames);

输出：

[
'约翰', '马克',
'兰迪', '利奥',
'克里斯', '阿普',
'纳蒂', '詹姆斯',
'安迪', '弗兰克',
'唐'
]

寻找（）

该find()方法返回所提供数组中第一个满足所提供测试函数的元素的值。如果没有值满足测试函数，undefined则返回。假设我们想获取姓名为“Leo”的学生的数据，那么

const dataOfLeo = studentData.find((student) => {
    return student.name === 'Leo';
});
console.log(dataOfLeo);

输出：

{ 姓名：'Leo', 分数：149, 已通过：false }

减少（）

该方法对数组的每个元素reduce()执行一个函数（由你提供），并返回单个输出值。它的第一个参数是函数，第二个参数是：假设我们要计算所有学生的成绩总和，那么reducerreducerinitial value

const totalMarksOfAll = studentData.reduce((currentTotal, student) => {
    return student.marks + currentTotal;
}, 0);
console.log(totalMarksOfAll);

输出：

4106

查找索引（）

该findIndex()方法返回数组中第一个满足所提供测试函数的元素的索引。否则，返回，表示没有元素通过测试。假设我们想找到 Leo 的数据的索引，那么-1

const indexOfLeo = studentData.findIndex((student) => student.name === 'Leo');
console.log(indexOfLeo);

输出：

3

forEach()

该forEach()方法为每个数组元素执行一次提供的函数。它的工作原理类似于 for 循环。假设我们想打印每个学生的成绩状态，那么

studentData.forEach((student) => {
    console.log(
        `${student.name} has ${
            student.passed ? 'passed' :
            'failed'} !`
    );
});

输出：

约翰通过了！
马克通过了！
兰迪通过了！
利奥不及格！
克里斯通过了！
阿普通过了！
纳蒂通过了！
詹姆斯不及格！
安迪通过了！
弗兰克不及格！
唐不及格！

一些（）

该some()方法测试数组中是否至少有一个元素通过了所提供函数实现的测试。如果在数组中找到一个元素，且所提供函数的测试结果为 true，则返回 true；否则返回 false。该方法不会修改数组。假设我们想知道 data 中是否有不及格的学生，那么

const hasFailedStudents = studentData.some((student) => {
    return !student.passed;
});
console.log(hasFailedStudents);

输出：

真的

每一个（）

该every()方法测试数组中的所有元素是否都通过了由所提供函数实现的测试。它返回一个布尔值。它与some()方法类似，唯一的区别在于，some()如果任何谓词为真，该方法将返回 true；every()如果所有谓词都为真，方法将返回 true。假设我们想检查所有学生是否都通过了测试，那么

const hasAllPassed = studentData.every((student) => {
    return student.passed;
});
console.log(hasAllPassed);

输出：

错误的

新数据

现在，对于剩下的两种方法，让我们使用以下数据，

const languages = [
    'java',
    'cpp',
    'python',
    'javascript'
];

包括（）

该includes()方法判断数组的条目中是否包含某个值，并根据情况返回true或。假设我们想检查 python 和 ruby 是否包含在上述语言的数组中，那么false

const includesRuby = languages.includes('ruby');
console.log(includesRuby)
const includesPython = languages.includes('python');
console.log(includesPython);

输出：

假
真

索引（）

该indexOf()方法返回数组中指定元素的第一个索引，如果不存在则返回 -1。
假设我们想查找 Python 的索引，那么

const indexOfPython = languages.indexOf('python');
console.log(indexOfPython);

输出：

2

本文就到这里。您可以访问satishnaikawadi.me获取更多编程相关文章。感谢您的阅读。

文章来源：https://dev.to/satishnaikawadi2001/10-must-know-javascript-array-methods-bp5