JavaScript中常用的数组方法总结
目录
- forEach()函数
- map()函数
- filter()函数
- reduce()函数
- find()函数
- some()和every()
- sort()函数
- includes()和indexOf()函数
- slice()和splice()函数
- concat()和join()函数
forEach()函数
forEach()函数是JavaScript数组提供的一个用于遍历数组的方法。它接受一个回调函数作为参数，并且对数组中的每个元素依次调用该回调函数。
forEach()函数的语法如下：
array.forEach(callback(currentValue, index, array), thisArg)
参数说明：
- callback: 必须，表示在每个数组元素上执行的回调函数。
- currentValue: 必须，表示当前遍历到的元素的值。
- index: 可选，表示当前遍历到的元素的索引。
- array: 可选，表示正在被遍历的数组。
- thisArg: 可选，表示在执行回调函数时使用的this值。
在回调函数中，我们可以对每个数组元素进行任何操作，例如打印元素的值、修改元素的值等。
比如下面的这段代码就使用forEach()函数来遍历数组：
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number, index) {
console.log(`第 ${index} 个元素的值是：${number}`);
});
运行程序，控制台输出结果如下：
第 0 个元素的值是：1
第 1 个元素的值是：2
第 2 个元素的值是：3
第 3 个元素的值是：4
第 4 个元素的值是：5
注意，forEach()函数在遍历数组时会按照数组的顺序依次调用回调函数，但并不保证回调函数的执行顺序。如果需要按照特定的顺序执行操作，可以使用其他方法，如for循环。
map()函数
map()函数用于对数组中的每个元素执行指定的操作，并返回一个新的数组，新数组的元素由原数组的每个元素经过操作得到。
当我们想要对数组中的每个元素执行相同的操作，并返回一个新的数组时，可以使用map()函数。它会遍历数组中的每个元素，并将每个元素传递给回调函数进行处理，最后将处理后的结果组成一个新的数组返回。
map()函数接受一个回调函数作为参数，回调函数可以接受三个参数：当前元素的值、当前元素的索引和数组本身。回调函数对每个元素执行操作，并将返回的值添加到新数组中。
map()函数的语法如下：
array.map(callback(currentValue[, index[, array]])[, thisArg])
参数说明：
callback：一个函数，用于对每个元素进行处理。接受三个参数：currentValue：当前正在处理的元素。index（可选）：当前元素的索引。array（可选）：原始数组。
thisArg（可选）：执行回调函数时使用的this值。
下面是的这段代码使用map()函数将数组中的每个元素都转换成大写：
const fruits = ['apple', 'banana', 'orange'];
const upperCaseFruits = fruits.map((fruit) => fruit.toUpperCase());
console.log(upperCaseFruits); // 输出: ['APPLE', 'BANANA', 'ORANGE']
filter()函数
filter()函数用于筛选数组中满足指定条件的元素，并返回一个新的数组。该方法不会改变原始数组，而是根据条件创建一个新的数组。
filter()函数接受一个回调函数作为参数，回调函数用于定义筛选条件。回调函数可以接受三个参数：当前元素、当前索引和原始数组。它应该返回一个布尔值，true表示该元素满足条件，将会被包含在新的数组中，false表示不满足条件，将会被过滤掉。
filter()函数的语法如下：
array.filter(callback(element[, index[, array]])[, thisArg])
其中，array是要进行过滤的数组，callback是一个回调函数，在每个数组元素上被调用。回调函数接受三个参数：element表示当前正在被处理的数组元素，index表示当前元素的索引（可选），array表示正在被处理的数组（可选）。
回调函数返回一个布尔值，如果返回true，则表示当前元素符合条件，将被包含在新数组中。如果返回false，则表示当前元素不符合条件，将被过滤掉。
thisArg参数是可选的，用于指定回调函数中的this值。
下面这段代码我们使用filter()函数来筛选数组元素：
const numbers = [1, 2, 3, 4, 5, 6];
// 使用filter()函数筛选出所有大于3的元素
const filteredNumbers = numbers.filter(function(number) {
return number > 3;
});
console.log(filteredNumbers); // 输出 [4, 5, 6]
除了使用匿名函数作为回调函数，我们还可以使用箭头函数来简化代码。
const numbers = [1, 2, 3, 4, 5, 6];
// 使用箭头函数筛选出所有大于3的元素
const filteredNumbers = numbers.filter(number => number > 3);
console.log(filteredNumbers); // 输出 [4, 5, 6]
reduce()函数
reduce()函数是JavaScript数组的一个强大的方法，它可以对数组中的元素进行累加、累乘、字符串连接等操作。它接收一个回调函数作为参数，并且可以传递一个初始值。回调函数接受四个参数：累加器（accumulator）、当前值（current value）、当前索引（current index）和原始数组（array）。
reduce()函数的语法如下：
array.reduce(callback[, initialValue])
其中，callback是回调函数，它可以接受四个参数：accumulator、currentValue、currentIndex和array。initialValue是可选的，用于设置初始值。
下面这段代码使用reduce()函数对数组进行累加操作：
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 输出：15
除了累加，reduce()函数还可以用于累乘、字符串连接等操作。
const numbers = [1, 2, 3, 4, 5];
const product = numbers.reduce((accumulator, currentValue) => {
return accumulator * currentValue;
}, 1);
console.log(product); // 输出：120
find()函数
find()函数会遍历数组中的每个元素，并返回第一个满足给定条件的元素。如果没有找到满足条件的元素，则返回undefined。当我们想要在一个数组中查找满足特定条件的第一个元素时，可以使用JavaScript的find()函数。
find()函数的语法如下：
array.find(callback(element[, index[, array]])[, thisArg])
参数说明：
array：要在其中查找元素的数组。- callback：回调函数，接收三个参数：
element：当前正在被处理的数组元素。index（可选）：当前正在被处理的元素的索引。array（可选）：调用find()函数的数组。
thisArg（可选）：在执行回调函数时，用作this关键字的对象。
find()函数的工作原理是，它会从数组的第一个元素开始依次遍历，当找到第一个满足条件的元素时，就会停止遍历并返回该元素。如果没有找到满足条件的元素，则返回undefined。
下面的代码使用find()函数查找数组中第一个大于10的元素：
const numbers = [5, 8, 12, 3, 15, 7];
const foundNumber = numbers.find(function(element) {
return element > 10;
});
console.log(foundNumber); // 输出：12
注意，回调函数中的条件可以是任何JavaScript表达式。根据需要，您可以根据元素的属性、索引或其他条件来定义自己的条件。
some()和every()
some()和every()函数是用于判断数组中的元素是否满足特定条件的方法。
some()函数用于判断数组中是否存在满足给定条件的元素。它会遍历数组中的每个元素，当有任意一个元素满足条件时，即返回true。如果没有找到满足条件的元素，则返回false。
some()函数的语法如下：
array.some(callback(element[, index[, array]])[, thisArg])
参数说明：
array：要在其中进行元素检查的数组。- callback：回调函数，接收三个参数：
element：当前正在被处理的数组元素。index（可选）：当前正在被处理的元素的索引。array（可选）：调用some()函数的数组。
thisArg（可选）：在执行回调函数时，用作this关键字的对象。
some()函数的工作原理是，它会从数组的第一个元素开始依次遍历，当找到满足条件的元素时，就会停止遍历并返回true。如果数组中所有元素都不满足条件，则返回false。
下面的代码使用some()函数判断数组中是否存在大于10的元素：
const numbers = [5, 8, 12, 3, 15, 7];
const hasGreaterThan10 = numbers.some(function(element) {
return element > 10;
});
console.log(hasGreaterThan10); // 输出：true
every()函数用于判断数组中的所有元素是否都满足给定条件。它会遍历数组中的每个元素，当所有元素都满足条件时，返回true。如果存在不满足条件的元素，则返回false。
every()函数的语法如下：
array.every(function(currentValue, index, array) {
// 执行某些操作
}, thisArg);
参数说明：
-
function(currentValue, index, array)： 必需。这是一个回调函数，用于指定要对每个元素执行的操作。它接收三个参数：
currentValue: 当前元素的值。index: 当前元素的索引。array: 调用every()函数的数组。
-
thisArg（可选）：指定在回调函数中使用的this值。
every()函数会对数组中的每个元素都调用一次回调函数，如果回调函数对所有元素都返回true，则every()函数最终返回true。如果回调函数对任何一个元素返回false，则every()函数立即返回false，不再对剩余元素进行检查。
下面的代码使用every()函数判断数组中的所有元素是否都小于20：
const numbers = [5, 8, 12, 3, 15, 7];
const allLessThan20 = numbers.every(function(element) {
return element < 20;
});
console.log(allLessThan20); // 输出：true
sort()函数
sort()函数用于对数组元素进行排序。它会按照默认的排序顺序将数组元素重新排列，并返回排序后的数组。
sort()函数会通过将数组的元素转换为字符串，然后比较字符串的Unicode编码值来进行排序。默认情况下，sort()函数会将元素转换为字符串进行排序，即使数组中的元素是数字类型。
sort()函数的语法如下：
array.sort(compareFunction)
参数说明：
compareFunction是一个可选的回调函数，用于定义排序规则。它接收两个参数（通常被称为a和b），表示要进行比较的两个元素。compareFunction需要返回一个负数、零或正数，具体取决于a和b的相对顺序。
如果返回负数，表示a应该在b之前；如果返回零，表示a和b相等；如果返回正数，表示a应该在b之后。
下面的代码使用sort()函数对数组进行排序：
// 数字数组排序
const numbers = [5, 1, 3, 2, 4];
numbers.sort();
console.log(numbers); // 输出：[1, 2, 3, 4, 5]
// 字符串数组排序
const fruits = ['banana', 'apple', 'orange', 'grape'];
fruits.sort();
console.log(fruits); // 输出：['apple', 'banana', 'grape', 'orange']
// 对象数组排序
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 20 },
{ name: 'Charlie', age: 30 }
];
persons.sort((a, b) => a.age - b.age);
console.log(persons);
// 输出：
// [
// { name: 'Bob', age: 20 },
// { name: 'Alice', age: 25 },
// { name: 'Charlie', age: 30 }
// ]
在以上示例中，我们首先使用sort()函数对数字数组numbers进行排序，由于没有提供比较函数，所以它按照默认的排序顺序（使用字符串比较）进行排序。对于字符串数组fruits，同样也是按照默认的排序顺序进行排序。在最后对象数组的排序中，我们使用比较函数对对象数组persons按照age属性进行排序，从小到大排列。
注意，sort()函数会直接修改原始数组，并返回排序后的数组。
includes()和indexOf()函数
当我们需要查找数组中是否包含指定元素时，可以使用JavaScript给我们提供的两个常用的函数：includes()和indexOf()。
includes()函数用于判断数组中是否包含指定元素，并返回一个布尔值。如果数组中包含指定元素，则返回true；如果数组中不包含指定元素，则返回false。
indexOf()函数用于查找指定元素在数组中的索引位置，并返回该索引值。如果数组中包含指定元素，则返回该元素的第一次出现的索引；如果数组中不包含指定元素，则返回-1。
下面的代码使用includes()和indexOf()函数查找数组中是否包含指定的元素：
const fruits = ['apple', 'banana', 'orange', 'grape'];
// 使用includes()函数判断数组中是否包含指定元素
console.log(fruits.includes('apple')); // 输出: true
console.log(fruits.includes('mango')); // 输出: false
// 使用indexOf()函数查找指定元素在数组中的索引位置
console.log(fruits.indexOf('banana')); // 输出: 1
console.log(fruits.indexOf('watermelon')); // 输出: -1
在上面的代码中，我们使用includes()函数判断数组中是否包含'apple'和'mango'两个元素，分别返回了true和false。然后使用indexOf()函数查找'banana'和'watermelon'两个元素在数组中的索引位置，分别返回了1和-1。
需要注意的是，includes()函数和indexOf()函数都是区分大小写的，即'apple'和'Apple'是不同的元素。如果需要忽略大小写进行查找，可以先将数组中的元素转换为小写或大写，然后再进行查找。
slice()和splice()函数
slice()和splice()都可以用于截取和删除数组的元素，但有一些重要的区别。
slice()函数用于从数组中截取出指定范围的元素，并返回一个新数组，原数组不会被修改。slice()函数接受两个参数，即开始截取的索引和结束截取的索引（不包含在截取范围内）。如果只传递一个参数，则从该索引开始截取到数组的末尾。
下面的代码使用slice()函数来截取数组：
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // 输出: ['banana', 'orange', 'grape']
const slicedFruits2 = fruits.slice(2);
console.log(slicedFruits2); // 输出: ['orange', 'grape', 'kiwi']
splice()函数用于删除数组中的元素，并可以在删除的位置插入新的元素。splice()函数接受三个参数，即开始删除的索引、要删除的元素数量和可选的要插入的元素。如果只传递两个参数，则只删除指定数量的元素。
下面的代码使用splice()函数来删除数组元素：
const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1);
console.log(numbers); // 输出: [1, 2, 4, 5]
numbers.splice(1, 2, 6, 7);
console.log(numbers); // 输出: [1, 6, 7, 5]
注意：splice()函数会修改原始数组，而slice()函数不会修改原始数组，而是返回一个新的数组。
slice()函数用于截取数组的元素并返回新数组，而splice()函数用于删除数组的元素并可以插入新元素。
concat()和join()函数
当我们需要合并数组或将数组元素连接为字符串时，可以使用JavaScript中的concat()和join()函数。
concat()函数用于合并两个或多个数组，并返回一个新的合并后的数组，而不修改原始数组。它接受任意数量的参数，每个参数可以是数组或值。
下面的代码使用concat()函数来合并数组：
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let mergedArray = arr1.concat(arr2, arr3);
console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
在上面的代码中，我们使用concat()函数将上面定义的三个数组合并为一个新数组mergedArray。
注意：concat()函数不会修改原始数组，而是返回一个新的合并后的数组。
join()函数用于将数组的所有元素连接成一个字符串。它接受一个可选的参数separator，用于指定连接元素的分隔符，默认为逗号。join()函数返回一个字符串。
下面的代码使用join()函数将数组元素连接为字符串：
let arr = ['Hello', 'World', '!'];
let joinedString = arr.join(' ');
console.log(joinedString); // 'Hello World !'
注意：join()函数不会修改原始数组，而是返回一个新的字符串。