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