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']