前言：
JavaScript 中的数组是一种强大而灵活的数据结构，它提供了许多内置方法，可以轻松地对数组进行各种操作和转换。了解和掌握这些数组方法是成为一个高效的 JavaScript 开发者的关键之一。无论你是初学者还是有经验的开发者，小编将在本文为你详细介绍 JavaScript 数组的常用方法，帮助你在处理和操作数组时游刃有余。废话不多说，让我们直接进入正题吧……
1. 数组的创建和初始化
对数组进行操作时我们得先创建和初始化一个数组，以下是常用的方式：
1.1 使用字面量创建和初始化数组：
使用字面量是创建和初始化数组的最常见和简单的方式。你可以直接在代码中使用方括号 [] 来定义一个数组，并在方括号内使用逗号 , 分隔每个元素。
// 创建一个空数组
var emptyArray = [];
// 创建并初始化一个包含多个元素的数组
var fruits = ['apple', 'banana', 'orange'];
// 创建并初始化一个多维数组
var matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
1.2. 使用构造函数创建和初始化数组：
除了使用字面量，你还可以使用数组的构造函数 Array() 来创建和初始化数组。构造函数接受可选的参数来指定数组的长度或初始化数组的元素。
// 使用构造函数创建一个空数组
var emptyArray = new Array();
// 使用构造函数创建并初始化一个数组
var numbers = new Array(1, 2, 3, 4, 5);
// 使用构造函数创建指定长度的数组
var lengthArray = new Array(5); // 创建一个长度为 5 的空数组
// 创建一个长度为1的数组，并将数组的元素值填充为5
var lengthArray = new Array(1).fill(5);
console.log(lengthArray); // [5]
// 创建并初始化一个多维数组
var matrix = new Array([1, 2, 3], [4, 5, 6], [7, 8, 9]);
2.数组的基本操作
2.1：获取数组的长度：
var fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 输出：3
2.2：访问数组元素：
var fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // 输出：'apple'
console.log(fruits[1]); // 输出：'banana'
console.log(fruits[2]); // 输出：'orange'
2.3：添加元素：
var fruits = ['apple', 'banana', 'orange'];
fruits.push('grape');
console.log(fruits); // 输出：['apple', 'banana', 'orange', 'grape']
2.4： 删除元素：
var fruits = ['apple', 'banana', 'orange'];
var lastFruit = fruits.pop();
console.log(fruits); // 输出：['apple', 'banana']
console.log(lastFruit); // 输出：'orange'
var fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1);
console.log(fruits); // 输出：['apple', 'orange']
3.数组的遍历和迭代
3.1：forEach() 方法
3.1.1：forEach() 是一个用于遍历数组的方法，它接受一个回调函数作为参数，并且在数组的每个元素上调用该回调函数。回调函数接受三个参数：当前元素的值、当前元素的索引和正在遍历的数组本身。
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((value, index) => {
console.log(`元素值：${value}，索引：${index}`);
});
3.1.2：使用场景：
- 当你只需要遍历数组而不需要返回新的数组或修改原数组时，
forEach()是一个不错的选择。 - 它适用于需要对数组中的每个元素执行某个操作或进行某种副作用的情况，比如打印元素或更新 DOM。
3.2：map() 方法
3.2.1：map() 方法创建一个新数组，其中包含对原始数组中的每个元素应用回调函数的结果。回调函数接受三个参数：当前元素的值、当前元素的索引和正在遍历的数组本身。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((value) => value * 2);
console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]
3.2.2：使用场景：
- 当你需要对数组中的每个元素进行某种操作，并且返回这个元素经过操作之后的值所组成的一个新的数组时，
map()是非常有用的。 - 它适用于需要通过对原始数组的每个元素应用某种转换来创建一个新数组的情况。
3.3：filter() 方法
3.3.1：filter() 方法创建一个新数组，其中包含满足某个条件的原始数组中的元素。回调函数接受三个参数：当前元素的值、当前元素的索引和正在遍历的数组本身。回调函数应返回一个布尔值，指示是否应将当前元素包含在结果数组中。
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((value) => value % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]
3.3.2：使用场景：
- 当你需要从数组中筛选出满足特定条件的元素，并将它们组成一个新的数组时，
filter()是非常有用的。 - 它适用于需要根据某个条件过滤数组的情况，比如筛选出所有偶数或满足某个特定条件的元素。
3.4：reduce() 方法
3.4.1：reduce() 方法对数组中的所有元素执行一个归约操作，并返回一个最终结果。它接受一个回调函数作为参数，该函数接受四个参数：累加器、当前元素的值、当前元素的索引和正在遍历的数组本身。回调函数通过累加器参数来迭代计算最终的结果。
//1.求和
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, value) => accumulator + value, 0);
console.log(sum); // 输出: 15
//2.求最大值
let numbers = [1, 2, 3, 4, 5];
let max = numbers.reduce((max, current) => Math.max(max, current), 0);
##
console.log(max); // 输出：5
//3.拼接字符串
let words = ['Hello', ' ', 'world', '!'];
let sentence = words.reduce((sentence, word) => sentence + word);
console.log(sentence); // 输出：'Hello world!'
3.4.2：使用场景：
- 当你需要将数组中的所有元素归约为单个值时，
reduce()是非常有用的。 - 它适用于计算数组元素之和、查找最大/最小值、拼接字符串等需要对数组进行归约操作的情况。
4.数组的排序和搜索
4.1：sort() 方法
4.1.1：sort() 方法用于对数组进行排序。它会原地修改数组，将其按升序重新排列。默认情况下，sort() 方法会将数组元素转换为字符串，并按照 Unicode 编码进行排序。
//1.默认升序排序
const fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.sort();
console.log(fruits); // 输出: ['apple', 'banana', 'grape', 'orange']
//2.要按照其他标准进行排序（例如数字大小或自定义逻辑），可以使用比较函数作为 `sort()` 的参数。
const numbers = [10, 5, 8, 2, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出: [2, 3, 5, 8, 10]
4.1.2：使用场景： sort() 方法适用于对数组进行排序，无论是按照默认的 Unicode 编码排序，还是根据自定义的比较函数进行排序。
4.2：reverse() 方法
4.2.1：reverse() 方法用于反转数组的顺序。它会原地修改数组，将其元素顺序颠倒。
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // 输出: [5, 4, 3, 2, 1]
4.2.2：使用场景： reverse() 方法适用于需要反转数组元素顺序的情况。
4.3：indexOf() 方法
4.3.1：indexOf() 方法用于查找数组中给定元素的索引。如果找到了匹配的元素，则返回其第一次出现的索引；如果数组中不存在该元素，则返回 -1。
const fruits = ['apple', 'banana', 'orange', 'grape'];
const index = fruits.indexOf('orange');
console.log(index); // 输出: 2
4.3.2：使用场景：indexOf() 方法适用于查找数组中特定元素的索引，以确定其是否存在于数组中。
4.4：find() 方法
4.4.1：find() 方法用于查找数组中满足给定条件的第一个元素。它接受一个回调函数作为参数，该函数应返回一个布尔值来表示是否满足条件。如果找到满足条件的元素，则返回该元素；否则返回 undefined。
const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find((value) => value % 2 === 0);
console.log(evenNumber); // 输出: 2
4.4.2：使用场景：find() 方法适用于查找满足特定条件的数组元素，以获取第一个匹配的元素。
5.数组的转换和连接
5.1：将数组转换为字符串
在将数组转换为字符串时，可以使用数组的 join() 方法。该方法将数组中的所有元素连接成一个字符串，并使用指定的分隔符进行分隔。
const fruits = ['apple', 'banana', 'orange'];
const joinedString = fruits.join(', ');
console.log(joinedString); // 输出: "apple, banana, orange"
在上述示例中，fruits.join(', ') 将数组 fruits 中的元素用逗号和空格进行连接，生成一个字符串 “apple, banana, orange”。
5.2：将字符串拆分为数组
要将字符串拆分为数组，可以使用字符串的 split() 方法。split() 方法根据指定的分隔符将字符串拆分为子字符串，并将它们存储在一个新数组中。
const fruitsString = "apple, banana, orange";
const fruitsArray = fruitsString.split(', ');
console.log(fruitsArray); // 输出: ["apple", "banana", "orange"]
在上述示例中，fruitsString.split(', ') 将字符串 fruitsString 按逗号和空格进行拆分，并生成一个新的数组 fruitsArray，其中包含拆分后的子字符串。
5.3：连接多个数组
要连接多个数组，可以使用数组的 concat() 方法。concat() 方法将多个数组连接成一个新数组，并返回这个新数组。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = array1.concat(array2);
console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6]
在上述示例中，array1.concat(array2) 将数组 array1 和 array2 连接起来，生成一个新的数组 combinedArray，其中包含了两个数组的所有元素。
此外，还可以使用扩展运算符 (...) 来连接多个数组，它提供了一种更简洁的语法。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6]
在上述示例中，[...array1, ...array2] 使用扩展运算符将 array1 和 array2 连接成一个新数组 combinedArray。
6.数组的切片和拼接
6.1：切片（Slice）
数组的切片操作可以用来提取数组中的一部分，形成一个新的子数组。切片操作使用 slice() 方法，该方法接受两个参数，起始索引和结束索引（不包括结束索引本身）。
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // 输出: ["banana", "orange", "grape"]
在上述示例中，fruits.slice(1, 4) 提取了索引为 1 到 3 的元素（不包括索引为 4 的元素），生成一个新的子数组 slicedFruits。
6.2：拼接（Concatenation）
数组的拼接操作可以将多个数组合并成一个新数组。拼接操作使用 concat() 方法，该方法接受一个或多个数组作为参数，并返回一个新的合并后的数组。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = array1.concat(array2);
console.log(concatenatedArray); // 输出: [1, 2, 3, 4, 5, 6]
在上述示例中，array1.concat(array2) 将数组 array1 和 array2 合并成一个新数组 concatenatedArray。
6.3：原数组修改 vs. 新数组生成
需要注意的是，切片和拼接操作都会生成一个新的数组，而不会修改原始数组。原始数组保持不变。
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // 输出: ["banana", "orange", "grape"]
console.log(fruits); // 输出: ['apple', 'banana', 'orange', 'grape', 'kiwi']
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = array1.concat(array2);
console.log(concatenatedArray); // 输出: [1, 2, 3, 4, 5, 6]
console.log(array1); // 输出: [1, 2, 3]
console.log(array2); // 输出: [4, 5, 6]
7.数组的变形和去重
7.1：去重
去重操作可以移除数组中的重复元素，以保留唯一的元素。可以使用 Set 数据结构或 filter() 方法来实现去重。
7.1.1：使用 Set 数据结构：
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
7.1.2：使用 filter() 方法：
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
7.2：去除空值
去除数组中的空值（如 null、undefined、空字符串等）是常见的操作。可以使用 filter() 方法来过滤掉空值。
const array = [1, null, 2, undefined, '', 3];
const filteredArray = array.filter(value => value !== null && value !== undefined && value !== '');
console.log(filteredArray); // 输出: [1, 2, 3]
在上述示例中，array.filter(value => value !== null && value !== undefined && value !== '') 使用 filter() 方法过滤掉数组中的空值，其回调函数排除了 null、undefined 和空字符串。
7.3：数组扁平化
数组扁平化是将多维数组转换为一维数组的操作。可以使用递归、reduce() 方法或扩展运算符 (...) 来实现数组扁平化。
7.3.1：使用递归和reduce() 方法：
const array = [1, [2, [3, 4], 5]];
function flattenArray(arr) {
return arr.reduce((acc, cur) => {
return Array.isArray(cur) ? [...acc, ...flattenArray(cur)] : [...acc, cur];
}, []);
}
const flattenedArray = flattenArray(array);
console.log(flattenedArray); // 输出: [1, 2, 3, 4, 5]
7.3.2：使用扩展运算符 (...)：
const array = [1, [2, [3, 4], 5]];
const flattenedArray = [].concat(...array);
console.log(flattenedArray); // 输出: [1, 2, 3, 4, 5]
扩展运算符 (...)通过将数组放入空数组中，并使用扩展运算符 (...) 展开数组，可以将多维数组转换为一维数组。
8.数组的判断和验证
8.1：判断一个值是否为数组
要判断一个值是否为数组，可以使用 Array.isArray() 方法或 instanceof 运算符。
8.1.1：使用 Array.isArray() 方法：
const value1 = [1, 2, 3];
const value2 = 'Hello';
console.log(Array.isArray(value1)); // 输出: true
console.log(Array.isArray(value2)); // 输出: false
8.1.1：使用 instanceof 运算符：
const value1 = [1, 2, 3];
const value2 = 'Hello';
console.log(value1 instanceof Array); // 输出: true
console.log(value2 instanceof Array); // 输出: false
在上述示例中，Array.isArray(value) 方法接受一个值作为参数，并返回一个布尔值，指示该值是否为数组。instanceof 运算符用于检查一个对象是否属于特定类或构造函数的实例。通过检查值是否为 Array 类的实例，可以判断一个值是否为数组。
8.2：验证数组中的元素是否满足特定条件
要验证数组中的元素是否满足特定条件，可以使用 every() 或 some() 方法。
8.2.1：使用 every() 方法：
const array = [1, 2, 3, 4, 5];
const allEven = array.every(value => value % 2 === 0);
console.log(allEven); // 输出: false
8.2.1：使用 some() 方法：
const array = [1, 2, 3, 4, 5];
const containsEven = array.some(value => value % 2 === 0);
console.log(containsEven); // 输出: true
在上述示例中，every() 方法对数组中的每个元素应用回调函数，只有当所有元素都满足条件时才返回 true，否则返回 false。some() 方法对数组中的每个元素应用回调函数，只要有一个元素满足条件就返回 true，否则返回 false。
结语：
掌握 JavaScript 数组方法是成为一个出色的 JavaScript 开发者的关键一步。小编在本文中介绍的常用数组方法只是冰山一角，JavaScript 还提供了更多强大的方法和技巧来处理和操作数组。通过不断学习和实践，你将能够灵活运用这些方法，为你的项目带来更高效、更简洁的代码。希望本文对你在 JavaScript 数组操作方面的学习和进步提供了帮助，祝你在 JavaScript 的世界中取得更大的成就！
最后给大家推荐一下MDN (Mozilla Developer Network) 开发者文档，他旨在为开发者提供高质量、准确和实用的文档，帮助我们了解和使用 Web 技术。里面包含了数组的众多方法及其样例：
developer.mozilla.org/zh-CN/docs/…
原文链接：https://juejin.cn/post/7346460401830494245 作者：Kaihao_Huang
