js中数组的常用处理方法
1.归纳
| 方法 | 作用 | 说明 | 返回值 | 是否修改原数组 |
|---|---|---|---|---|
| forEach | 遍历数组 | 遍历数组并对每一个元素进行操作 | 无/undefined | 视具体处理而定 |
| filter | 过滤数组 | 返回一个满足筛选条件的新数组 | 新数组 | 否 |
| map | 映射数组 | 按照规则对原数组的元素进行映射 | 新数组 | 否 |
| reduce | 累计器 | 返回累计处理的结果,常用于求和 | 一般为一个数 | 否 |
| join | 元素拼接 | 将数组元素拼接为字符串 | 字符串 | 否 |
| find | 查找元素 | 返回符合条件的第一个数组元素值 | 原数组的某一项/undefined | 否 |
| findIndex | 查找索引 | 返回符合条件的第一个数组元素的索引 | 索引或undefined | 否 |
| every | 检测判断 | 判断数组中是否每一个元素都满足给定的条件 | true/false | 否 |
| some | 检测判断 | 判断数组中是否至少存在一个元素满足给定的条件 | true/false | 否 |
| concat | 数组合并 | 合并两个数组,返回新生成的数组 | 新数组 | 否 |
| sort | 数组排序 | 对数组内的元素按照升序或降序的方式排序 | 排序后的原数组 | 是 |
| splice | 删除/替换 | 根据输入的索引将原数组中的元素抽出为一个新数组 | 新数组 | 是 |
| reverse | 翻转数组 | 将原数组元素顺序进行倒序 | 无/undefined | 是 |
| from | 对象转换数组 | 将要转换为数组的对象转换为数组 | 新数组 |
2.使用
2.1 forEach
forEach 方法接受一个回调函数作为参数，并在数组的每个元素上调用该回调函数。回调函数接受三个参数：当前元素的值、当前元素的索引和当前整个数组。回调函数在每个元素上执行时，无法通过返回值来改变原始数组。
const array = [1, 2, 3, 4, 5];
array.forEach((element, index) => {
console.log(`Element at index ${index}: ${element}`);
});
// 输出：
// Element at index 0: 1
// Element at index 1: 2
// Element at index 2: 3
// Element at index 3: 4
// Element at index 4: 5
2.2 filter
filter 方法接受一个回调函数作为参数，并对数组中的每个元素调用该回调函数。回调函数需要返回一个布尔值，用于指示元素是否应该包含在新数组中。如果回调函数返回 true，则元素将包含在新数组中；如果回调函数返回 false，则元素将被过滤掉。filter 方法会返回一个新的数组，其中包含满足过滤条件的元素
const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(element => element % 2 === 0);
console.log(filteredArray); // [2, 4]
2.3 map
map() 方法会接受一个函数作为参数，该函数会在数组的每个元素上被调用。这个函数会接收三个参数：元素值、元素索引和原始数组。函数可以返回一个新的值，该值将被放入新的数组中。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function (number) {
return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
2.4 reduce
reduce() 方法接受两个参数：一个回调函数和一个可选的初始值。回调函数在数组中的每个元素上执行，并将前一个回调的结果和当前元素作为参数。它返回一个经过聚合处理的单个值，该值会在下一次迭代中作为前一个回调的结果。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15
2.5 join
join() 方法接受一个可选的分隔符作为参数，该分隔符将用于连接数组的元素。如果没有提供分隔符，则默认使用逗号作为分隔符。
const fruits = ['apple', 'banana', 'orange'];
const result = fruits.join(', ');
console.log(result); // 'apple, banana, orange'
2.6 find
find() 方法接受一个回调函数作为参数，该回调函数用于定义查找的条件。回调函数会对数组中的每个元素进行调用，并传入三个参数：当前元素、当前索引和整个数组。在回调函数中，你可以使用逻辑表达式或其他操作来定义查找的条件。
const numbers = [1, 2, 3, 4, 5];
const result = numbers.find((element) => element > 3);
console.log(result); // 4
2.7 findIndex
findIndex() 方法接受一个回调函数作为参数，该回调函数用于定义查找的条件。回调函数会对数组中的每个元素进行调用，并传入三个参数：当前元素、当前索引和整个数组。在回调函数中，你可以使用逻辑表达式或其他操作来定义查找的条件。
const numbers = [1, 2, 3, 4, 5];
const result = numbers.findIndex((element) => element > 3);
console.log(result); // 3
2.8 every
every() 方法接受一个回调函数作为参数，该回调函数用于定义检测条件。回调函数会对数组中的每个元素进行调用，并传入三个参数：当前元素、当前索引和整个数组。在回调函数中，你可以使用逻辑表达式或其他操作来定义检测的条件。
const numbers = [1, 3, 5, 7, 9];
const result = numbers.every((element) => element % 2 !== 0);
console.log(result); // true
2.9 some
some() 方法接受一个回调函数作为参数，该回调函数用于定义检测条件。回调函数会对数组中的每个元素进行调用，并传入三个参数：当前元素、当前索引和整个数组。在回调函数中，你可以使用逻辑表达式或其他操作来定义检测的条件。
const numbers = [5, 8, 12, 3, 9];
const result = numbers.some((element) => element > 10);
console.log(result); // true
2.10 concat
concat() 方法可以接受任意数量的参数，每个参数可以是一个数组或一个值。这些参数会按照传入的顺序依次合并到新数组中。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);
console.log(newArray); // [1, 2, 3, 4, 5, 6]
2.11 sort
sort() 方法根据元素比较的结果，对数组进行排序。排序是在原始数组上进行的，也就是说，会修改原始数组，并返回排序后的数组。
我们提供了一个箭头函数作为参数，指定了如何比较两个数字。比较函数接受两个参数 a 和 b，如果 a 小于 b，则返回一个负数；如果 a 大于 b，则返回一个正数；如果 a 等于 b，则返回 0。通过这个比较函数，sort 方法会按照数字的大小对元素进行排序。
const numbers = [10, 2, 7, 5, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出 [1, 2, 5, 7, 10]
2.12 splice
splice 是数组的一个方法，用于修改数组，可以删除、插入或替换数组的元素。splice 方法会直接修改原始数组，并返回被删除的元素组成的新数组。
删除
const fruits = ['apple', 'banana', 'pear', 'orange'];
const deleted = fruits.splice(1, 2);
console.log(fruits); // 输出 ["apple", "orange"]
console.log(deleted); // 输出 ["banana", "pear"]
插入
const fruits = ['apple', 'banana', 'pear'];
fruits.splice(1, 0, 'orange', 'kiwi');
console.log(fruits); // 输出 ["apple", "orange", "kiwi", "banana", "pear"]
替换
const fruits = ['apple', 'banana', 'pear'];
fruits.splice(1, 1, 'orange', 'kiwi');
console.log(fruits); // 输出 ["apple", "orange", "kiwi"]
2.13 reverse
reverse() 方法会将原始数组中的元素按照相反的顺序重新排列，并将修改后的数组返回。
const array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
2.14 from
Array.from 方法接受两个参数：第一个参数是要被转换为数组的对象，第二个参数是一个可选的映射函数，用于对数组中的每个元素进行转换。
// 使用字符串创建数组
const str = 'Hello';
const array = Array.from(str);
console.log(array); // ['H', 'e', 'l', 'l', 'o']