在 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"];您可以使用以下方法之一来操作此数组，以从数组中添加或删除第一个、最后一个或特定元素。
1、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']2、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]3、shift()
shift() 方法删除数组的第一个元素。它的工作方式与 pop() 方法类似，但不是从末尾删除，而是从附加数组的开头删除。它返回已删除/已移位的元素。
myArray.shift();现在让我们创建一个新的动物名称数组，然后学习如何使用 shift() 方法从数组中删除第一个名称：
let animalNames = ["Lion", "Dog", "Snake", "Tiger"];
animalNames.shift(); // "Lion"
console.log(animalNames); // ['Dog', 'Snake', 'Tiger']4、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']5、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() 方法是从数组中添加和删除元素的最灵活的工具之一。
非破坏性数组方法
即使在使用数组方法后，非破坏性数组方法也会返回一个新的或未修改的数组。如果您想在将新输出分配给新数组时保留原始数组，可以使用这些非破坏性数组方法。
6、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']7、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']8、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() 方法执行此操作，而无需更改或更改原始数组。
9、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)); // false11、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")); // 115、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: 1016、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]数组结束。
总结
以上就是我今天想与您分享的21个常用数组，希望对您有所帮助，最后，感谢您的阅读，祝编程愉快！
