JavaScript 21个常用数组使用方法

前言

在 JavaScript 中，数组是一种特殊类型的对象，用于存储和组织多个值。数组使您可以将值分组到单个变量名下，从而方便管理和操作数据集合。以下是更详细的解释：

在 JavaScript 中，一对方括号 [] 表示数组。数组中的所有元素都用逗号 , 分隔。

在 JavaScript 中，数组可以包含任何类型的元素。这意味着您可以创建包含 String、Boolean、Number、Object 甚至其他数组等类型的元素的数组。

以下是一个包含四个元素的数组示例：Number、Boolean、String 和 Object。

const mixTypedArray = [ 100 , true , 'javascript' , {}];

元素在数组中的位置称为其索引。在 JavaScript 中，数组索引从 0 开始，每个元素递增 1。

例如，在上面的数组中，元素 100 位于索引 0，true 位于索引 1，'javascript' 位于索引 2，依此类推。

数组中元素的数量决定了其长度。例如，上述数组的长度为 4。

有趣的是，JavaScript 数组的长度不是固定的。您可以通过分配正数值随时更改长度。我们稍后会对此进行更多了解。

破坏性数组方法

破坏性数组方法会更改原始数组并返回修改后的数组。让我们探索各种用于操作更改原始数组的数组的方法。

添加或删除数组的方法

通常需要添加或删除数组中的元素。例如，考虑这个名称数组：

let names = ["John Doe", "Jane Doe", "Ann Doe"];

您可以使用以下方法之一来操作此数组，以从数组中添加或删除第一个、最后一个或特定元素。

01、pop()

此方法删除附加的 JavaScript 数组的最后一个元素，更改原始数组，并返回已删除的元素。

myArray.pop();

注意：您不会将任何内容作为参数传递给 pop() 方法。

以下示例展示了如何使用 pop() 方法：

let names = ["John Doe", "Jane Doe", "Ann Doe"];
names.pop(); // "Ann Doe"
console.log(names); // ['John Doe', 'Jane Doe']

02、push()

此方法将新元素添加到附加的 JavaScript 数组的末尾，更改原始数组，并返回数组的新长度。此方法接受您希望添加到数组末尾的元素作为参数。

myArray.push(element1, element2, ..., elementX);

现在让我们创建一个新的分数数组，然后使用 push() 方法向数组添加更多分数：

let scores = [12, 55, 78, 95, 33];
scores.push(66, 77); // 7

console.log(scores); // [12, 55, 78, 95, 33, 66, 77]

03、shift()

shift() 方法删除数组的第一个元素。它的工作方式与 pop() 方法类似，但不是从末尾删除，而是从附加数组的开头删除。它返回已删除/已移位的元素。

myArray.shift();

现在让我们创建一个新的动物名称数组，然后学习如何使用 shift() 方法从数组中删除第一个名称：

let animalNames = ["Lion", "Dog", "Snake", "Tiger"];
animalNames.shift(); // "Lion"

console.log(animalNames); // ['Dog', 'Snake', 'Tiger']

04、unshift()

unshift() 方法的工作方式与 push() 方法类似，因为它用于将新元素添加到数组中，但添加到数组的开头。此方法将您希望在数组开头添加的元素作为参数。它还返回数组的新长度。

myArray.unshift(element1, element2, ..., elementX);

现在让我们创建一个新的食物名称数组，然后使用 unshift() 方法向数组添加更多食物名称：

let foodNames = ["Salad", "Bread", "Fish", "Rice"];
foodNames.unshift("Pizza", "Cake"); // Returns 6 - the length of the newly changed array
console.log(foodNames); // ['Pizza', 'Cake', 'Salad', 'Bread', 'Fish', 'Rice']

05、splice()

splice() 方法从数组中添加或删除特定元素。删除元素时，它会返回数组中已删除的元素，添加元素时，它会返回一个空数组。

myArray.splice(index, howMany, element1, element2, ..., elementX);

在上面的语法中，index 是一个必需参数，表示要添加或删除元素的位置。howMany 是一个可选参数，表示要删除的元素数量。任何其他参数都是可选的，表示要添加到指定位置的新元素。

假设您有一个水果数组：

let fruits = ["Mango", "Strawberries", "Lime", "Oranges", "Pomegranate"];

您可以使用 splice() 方法删除特定元素，例如第三个水果、第一个和第二个水果等等：

// Remove third fruit
fruits.splice(2,1); // ['Lime']
console.log(fruits); // ["Mango", "Strawberries", "Oranges", "Pomegranate"]

// Remove the first and second fruits
fruits.splice(0,2); // ['Mango', 'Strawberries']
console.log(fruits); // ["Oranges", "Pomegranate"]

您还可以使用 splice() 方法将特定水果添加到数组中的特定位置：

// Add to the first position without removing any elements
fruits.splice(0, 0, "Grape"); // []
console.log(fruits); // ['Grape', 'Mango', 'Strawberries', 'Lime', 'Oranges', 'Pomegranate']

// Add to the fifth and sixth position by replacing them with new fruits
fruits.splice(4, 2, "Bananas", "Avocado"); // ['Oranges', 'Pomegranate']
console.log(fruits); // ['Grape', 'Mango', 'Strawberries', 'Lime', 'Bananas', 'Avocado']

splice() 方法是从数组中添加和删除元素的最灵活的工具之一。

非破坏性数组方法

即使在使用数组方法后，非破坏性数组方法也会返回一个新的或未修改的数组。如果您想在将新输出分配给新数组时保留原始数组，可以使用这些非破坏性数组方法。

06、concat()

假设您有两个或多个要连接在一起的数组。您可以使用 concat() 方法。此方法连接数组或向数组添加元素，然后返回包含连接数组或新元素的新数组。

myArray1.concat(myArray2, myArray3, ..., myArrayX)
// or
array1.concat(element1, ..., elementX)

假设您有两个欧洲和非洲国家名称数组：

let EuroCountries = ["Germany", "Poland", "Sweden"];
let AfricanCountries = ["Ghana", "Nigeria"];

然后，您可以使用 concat() 方法合并这些数组，并将新数组分配给新变量，从而使原始数组保持完整：

let countries = EuroCountries.concat(AfricanCountries);

console.log(countries); // ['Germany', 'Poland', 'Sweden', 'Ghana', 'Nigeria']

您也可以只添加元素，也可以添加数组和元素，如下所示：

let countries = EuroCountries.concat("Togo", "Rwanda");
console.log(countries); // ['Germany', 'Poland', 'Sweden', 'Togo', 'Rwanda']

let countries = EuroCountries.concat(AfricanCountries, "South Africa");
console.log(countries); // ['Germany', 'Poland', 'Sweden', 'Ghana', 'Nigeria', 'South Africa']

07、slice()

slice() 方法将指定的元素从一个数组放入新数组中，而不更改原始数组。此方法采用两个可选参数：起始位置和结束位置。默认情况下，起始位置为 0，而结束位置是数组的最后一个元素。

// Syntax
myArray.slice(start, end)

起始位置表示第一个元素的索引位置，而结束位置是复制元素中未包含的最后一个位置。在这个国家数组中，我们使用切片方法将元素复制到新数组中：

let countries = ['Germany', 'Poland', 'Sweden', 'Ghana', 'Nigeria', 'South Africa'];

let euroCountries = countries.slice(0, 3);
console.log(euroCountries); // ['Germany', 'Poland', 'Sweden']

let africanCountries = countries.slice(3);
console.log(africanCountries); // ['Ghana', 'Nigeria', 'South Africa']

08、fill()

使用 fill() 操作，我们可以用静态值替换某些元素。此方法是一种就地方法，这意味着它会修改原始数组。它不会返回新数组。

Syntax:
array.fill(value, start, end)

参数：

value – 您想要填充到数组中的静态值
start – 您想要替换数组的索引值
end – 索引的最后一个值

const nums = [1, 2, 3, 5, 6];
nums.fill(0); // fills the entire array with 0
console.log(nums);

const strings = ["code", "damn", "web2", "web3"];
strings.fill("abc", 2, 4); // fills the elements with abc at index 2 and 3
console.log(strings);

//output
[0, 0, 0, 0, 0]
['code', 'damn', 'abc', 'abc']

连接数组

假设您需要连接所有数组元素以使其成为一个字符串。您可以使用 join() 方法执行此操作，而无需更改或更改原始数组。

09、join()

join() 方法将数组作为字符串返回。此方法将您喜欢的分隔符作为其参数。

// Syntax
myArray.join(separator)

分隔符参数是可选的 - 如果您不输入任何内容，它将默认使用逗号。但是，正如您在我们的示例中看到的，在将数组转换为字符串时，它确实接受其他符号和空格来分隔数组中的每个元素：

let names = ['John', 'Doe'];
let joinedNames1 = names.join(); // 'John,Doe'
let joinedNames2 = names.join(' '); // 'John Doe'
let joinedNames3 = names.join('-'); // 'John-Doe'

遍历数组元素

传统上，如果您想对单个元素进行任何类型的数据检查或处理，则必须使用循环来遍历数组。

例如，如果您有一个学生数组，并且想在网站上显示某个学生，那么您必须循环遍历整个数组，然后创建自己的逻辑以根据过滤条件对其进行过滤。

从头开始处理所有这些可能非常复杂，但 JavaScript 已经有一些内置方法，您可以使用它们高效地执行所有这些任务。以下是迭代数组的最常用方法的概述。

10、includes()

顾名思义，includes() 方法会检查数组以查看数组是否包含指定值。如果包含该值，则返回 true - 如果不包含，则返回 false。该方法接受两个参数：特定值和可选的起始位置。

// Syntax
myArray.includes(value, start)

假设您有一个水果数组。让我们检查数组是否包含“Apple”：

let fruits = ["Apple", "Strawberries", "Mango", "Lime", "Oranges"];

console.log(fruits.includes("Apple")); // true
console.log(fruits.includes("Apple", 3)); // false

11、every()

every() 方法以求值的形式对数组的每个元素执行一个函数。如果所有数组元素都通过求值，则返回 true；如果至少有一个元素未通过求值，则返回 false（并停止执行）。此方法使用回调函数作为参数，并针对每个元素进行求值。

// Syntax
myArray.every(callbackFn)

假设您有一个用户年龄数组，并且想要检查所有用户是否都低于 50 岁：

let usersAge = [22, 56, 75, 33, 22, 80, 12, 43, 23];

console.log(usersAge.every((age) => age < 50)); // false

您也可以决定创建该函数，然后将其传

let usersAge = [22, 56, 75, 33, 22, 80, 12, 43, 23];

function checkAge(age) {
    return age < 50;
}

console.log(usersAge.every(checkAge)); // false

注意：此方法不会对空元素执行该函数。

12、some()

some() 方法与 every() 方法非常相似，但这次如果通过了数组元素之一的求值，则返回 true 并停止执行。如果所有元素都未通过求值，则返回 false。

// Syntax
myArray.some(callbackFn)

在回调函数中，您可以访问每个元素、索引和原始数组本身：

// Normal function
myArray.some(function(element, index, array){ /* ... */ })

// Arrow function
myArray.some((element, index, array) => { /* ... */ })

在我们的用户年龄数组中，假设您想要检查是否至少有一个用户年龄超过 50 岁

let usersAge = [22, 56, 75, 33, 22, 80, 12, 43, 23];

console.log(usersAge.some((age) => age > 50)); // true

注意：此方法不会对空元素执行该函数。

13、find()

find 方法也类似于 some() 方法，但不返回布尔值 - 它将返回通过测试的第一个元素。与 some() 和 every() 方法一样，它也为每个元素执行回调函数，如果没有元素通过测试，它将返回 undefined。它的语法也与这两种方法相似。

// Syntax
myArray.find(callbackFn)

假设您有一个学生数组，每个学生都有一个包含其姓名和年龄的对象。您可以找到具有特定姓名的学生并输出该学生的年龄：

let students = [
    { name: "John Doe", age: 22 },
    { name: "Jane Doe", age: 33 },
    { name: "Karl Don", age: 21 }
];

console.log(students.find((student) => student.name === "John Doe").age); // 22

您可以决定提取该函数：

let students = [
    { name: "John Doe", age: 22 },
    { name: "Jane Doe", age: 33 },
    { name: "Karl Don", age: 21 }
];

const checkStudents = (student) => {
    if (student.name === "John Doe") {
        return student;
    }
};

console.log(students.find(checkStudents).age); // 22

注意：此方法不对空元素执行该函数。

14、findIndex()

此方法与 find() 方法非常相似，但这次，它不返回元素，而是返回通过测试函数的数组中第一个元素的索引（位置）。如果没有匹配项，它将返回 -1。它的语法类似于 find() 方法。

// Syntax
myArray.findIndex(callbackFn)

假设您有一个学生数组，每个学生都有一个包含其姓名和年龄的对象。您可以查找具有特定姓名的学生并输出该学生的索引：

let students = [
    { name: "John Doe", age: 22 },
    { name: "Jane Doe", age: 33 },
    { name: "Karl Don", age: 21 }
];

const checkStudents = (student) => {
    if (student.name === "Jane Doe") {
        return student
    }
};

console.log(students.findIndex(checkStudents)); // 1

您还可以使用带有箭头函数的一行：

let students = [
    { name: "John Doe", age: 22 },
    { name: "Jane Doe", age: 33 },
    { name: "Karl Don", age: 21 }
];

console.log(students.findIndex((student) => student.name === "Jane Doe")); // 1

15、indexOf()

indexOf() 方法检查每个元素并返回与指定值匹配的第一个元素的索引。它使用严格相等 (===) 进行搜索，如果指定的值与数组中的任何元素都不匹配，则返回 -1。

findIndexOf() 方法和 indexOf() 类似，但 findIndexOf() 接受回调函数，而 indexOf() 允许您直接传递要查找的值。

// Syntax
myArray.indexOf(item)
myArray.indexOf(item, start)

start 参数是可选的，表示搜索应从哪个索引位置开始。使用负数时，搜索从数组末尾开始。默认情况下，其值为 0。以下是一个例子：

let scores = [23, 56, 67, 22, 45, 57, 45, 7, 5, 34, 7];

console.log(scores.indexOf(7));     // Output: 7
console.log(scores.indexOf(7, -1)); // Output: 10

16、filter()

filter() 方法遍历整个数组，选择满足指定条件的元素，并在新数组中返回它们

// Syntax
myArray.filter(callbackFn)

在回调函数中，您可以访问每个元素、其索引以及原始数组本身。例如：

let students = [
    { name: "John Doe", age: 22 },
    { name: "Jane Doe", age: 33 },
    { name: "Karl Don", age: 21 }
];

console.log(students.filter((student) => student.age < 30));

这将输出

[
    { "name": "John Doe", "age": 22 },
    { "name": "Karl Don", "age": 21 }
]

注意：filter() 不会对空元素执行该函数。

17、forEach()

forEach() 方法循环遍历所有数组元素并为每个元素调用一个函数（回调函数）。回调函数可以在每次循环中访问当前元素、索引和整个数组。

// Syntax
myArray.forEach(callbackFn)

例如：

let staff = [
    { name: "John Doe", salary: 120 },
    { name: "Jane Doe", salary: 350 },
    { name: "Karl Don", salary: 710 }
];

let totalSalary = 0;

staff.forEach((staffPerson) => {
    totalSalary += staffPerson.salary;
});

console.log(totalSalary); // Output: 1180

注意：forEach() 不会对空元素执行该函数。

18、map()

map() 方法迭代数组，将回调函数应用于每个元素并返回一个包含修改后元素的新数组。

// Syntax
myArray.map(callbackFn)

例如：

let scores = [45, 71, 65, 80, 47];

let newScores = scores.map((score) => score + 5);

console.log(newScores); // Output: [50, 76, 70, 85, 52]

19、reduce()

reduce() 方法将 Reducer 函数应用于数组的每个元素并返回单个输出。Reducer 函数迭代数组中的所有元素并返回前一个元素的计算结果。

/ Syntax
myArray.reduce(callbackFn, initialValue)

例如：

let staff = [
    { name: "John Doe", salary: 120 },
    { name: "Jane Doe", salary: 350 },
    { name: "Karl Don", salary: 710 }
];

const totalSalary = staff.reduce((total, staffPerson) => {
    total += staffPerson.salary;
    return total;
}, 0);

console.log(totalSalary); // Output: 1180

注意：reduce() 是一种复杂的数组方法。

20、flat()

flat() 方法通过根据指定的深度连接所有子数组元素来创建新数组。

// Syntax
myArray.flat()
myArray.flat(depth)

例如：

let numbers = [23, 56, 67, [22, 45, 57, [45, 7], 5], [34, 7]];

console.log(numbers.flat());  // Output: [23, 56, 67, 22, 45, 57, [45, 7], 5, 34, 7]
console.log(numbers.flat(2)); // Output: [23, 56, 67, 22, 45, 57, 45, 7, 5, 34, 7]

21、flatmap()

flatmap() 方法结合了 map() 和 flat()，将给定的回调函数应用于每个数组元素，然后将结果展平一层。

// Syntax
myArray.flatMap(callbackFn)

例如：

let numbers = [23, 56, 67, 22, 45, 57, 45, 7, 5];

let doubleNumbers = numbers.flatMap((number) => number * 2);

console.log(doubleNumbers); // Output: [46, 112, 134, 44, 90, 114, 90, 14, 10]

数组结束。

关于优联前端

武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育，医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。可进行Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。