前言
-
数组方法那么多,你是否也会经常忘记或者搞混其中某个参数或者某个方法返回值?
-
玩转数组方法是成为js大神的前提,没错,我就是那位js大神经常玩弄的人
-
不用放心,下面会帮你重新再搞混一下,负负得正!
js数组常用实例方法
整合一下常用的数组方法,介绍每个方法的每个参数(带有简单使用代码举例)
方法列表(常用)
(ps:👇点击即可跳转目标方法说明,点击方法标题回到列表目录,开袋即食,方便食用,入口即化~)
更新:markDown编辑器内可以跳转锚点,但是发布文章后PC端跳转不了,手机端可以正常跳转锚点
- join()
- push()
- pop()
- shift()
- unshift()
- sort()
- reverse()
- concat()
- slice()
- splice()
- reduce() (ES5新增)
- indexOf() (ES5新增)
- lastIndexOf() (ES5新增)
- forEach() (ES5新增)
- map() (ES5新增)
- filter() (ES5新增)
- every() (ES5新增)
- some() (ES5新增)
- find() (ES6新增)
- findIndex() (ES6新增)
- includes() (ES6新增)
- flat() (ES6新增)
- flatMap() (ES6新增)
1. join(separator) 👈点击方法回到目录(pc端跳转不了),下同
- 参数:
separator
(可选) - 一个字符串,用于分隔数组中的每个元素,默认是逗号,
。 - 使用场景: 需要将数组中的元素以特定分隔符转换为字符串时。
示例:
const arr = ['Hello', 'World'];
const str = arr.join(' '); // "Hello World"
2. push(element1, ..., elementN)
- 参数:
element1, ..., elementN
- 要添加到数组末尾的元素,可以是多个。 - 使用场景: 需要在数组末尾添加元素时。
示例:
const arr = [1, 2, 3];
arr.push(4, 5); // arr = [1, 2, 3, 4, 5]
3. pop()
- 参数: 无。
- 返回值: 被删除的元素。如果数组为空,返回
undefined
。 - 使用场景: 需要从数组末尾删除元素时。
示例:
const arr = [1, 2, 3];
const last = arr.pop(); // last = 3, arr = [1, 2]
4. shift()
- 参数: 无。
- 返回值: 被删除的元素。如果数组为空,返回
undefined
。 - 使用场景: 需要从数组开头删除元素时。
示例:
const arr = [1, 2, 3];
const first = arr.shift(); // first = 1, arr = [2, 3]
5. unshift(element1, ..., elementN)
- 参数:
element1, ..., elementN
- 要添加到数组开头的元素,可以是多个。 - 返回值: 新数组的长度。
- 使用场景: 需要在数组开头添加元素时。
示例:
const arr = [2, 3];
arr.unshift(1); // arr = [1, 2, 3]
6. sort(compareFunction)
-
参数:
compareFunction
(可选) - 一个用于排序的比较函数,接受两个参数,返回值决定它们的顺序:- 小于 0:
a
在b
前面 - 大于 0:
b
在a
前面 - 等于 0:保持原顺序
- 小于 0:
-
使用场景: 需要对数组进行排序时。
注意点: 使用 sort()
时,如果不提供比较函数,可能不会按预期排序。
示例:
const arr = [3, 1, 2];
arr.sort(); // arr = [1, 2, 3] (按字符串排序)
arr.sort((a, b) => a - b); // arr = [1, 2, 3] (按数字排序)
7. reverse()
- 参数: 无。
- 返回值: 反转后的数组。
- 使用场景: 需要反转数组时。
示例:
const arr = [1, 2, 3];
arr.reverse(); // arr = [3, 2, 1]
8. concat(value1, ..., valueN)
- 参数:
value1, ..., valueN
- 要合并到数组中的值,可以是数组或单个值。 - 返回值: 新数组,包含合并后的所有元素。
- 使用场景: 需要连接数组时。
示例:
const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2, 5); // newArr = [1, 2, 3, 4, 5]
9. slice(start, end)
-
参数:
start
(可选) - 开始索引,包含。默认为 0。end
(可选) - 结束索引,不包含。默认为数组长度。
-
返回值: 新数组,包含从
start
到end
(不包括end
)的元素。 -
使用场景: 需要获取数组的部分元素时。
示例:
const arr = [1, 2, 3, 4];
const newArr = arr.slice(1, 3); // newArr = [2, 3]
10. splice(start, deleteCount, item1, ..., itemN)
-
参数:
start
- 要修改的起始索引。deleteCount
- 要删除的元素个数。item1, ..., itemN
(可选) - 要添加的新元素。
-
返回值: 被删除的元素数组(如果没有删除元素,则返回空数组)。
-
使用场景: 需要在数组中添加或删除元素时。
示例:
const arr = [1, 2, 3];
const removed = arr.splice(1, 1, 4); // arr = [1, 4, 3], removed = [2]
11. reduce(callback(accumulator, currentValue, index, array), initialValue)
-
参数:
-
callback: 执行累积计算的函数,接受以下参数:
- accumulator: 累加器,累计计算的结果,或为
initialValue
。 - currentValue: 当前正在处理的数组元素。
- index (可选): 当前正在处理元素的索引。
- array (可选): 调用
reduce
的原始数组。
- accumulator: 累加器,累计计算的结果,或为
-
initialValue (可选): 指定第一次调用
callback
时,accumulator
的初始值。
-
-
使用场景: 当需要对数组进行累加、汇总或转换为其他数据结构时,使用
reduce
是非常合适的。
示例:
-
计算数组总和:
const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue; }, 0); // initialValue 为 0 console.log(sum); // 输出: 15
-
将数组转换为对象:
const fruits = ['apple', 'banana', 'orange']; const fruitCount = fruits.reduce((accumulator, currentValue) => { accumulator[currentValue] = (accumulator[currentValue] || 0) + 1; return accumulator; }, {}); // initialValue 为一个空对象 console.log(fruitCount); // 输出: { apple: 1, banana: 1, orange: 1 }
-
数组扁平化:
const nestedArray = [[1, 2], [3, 4], [5]]; const flatArray = nestedArray.reduce((accumulator, currentValue) => { return accumulator.concat(currentValue); }, []); // initialValue 为一个空数组 console.log(flatArray); // 输出: [1, 2, 3, 4, 5]
-
统计数组元素的出现频率:
const names = ['Alice', 'Bob', 'Alice', 'Charlie', 'Bob']; const nameCount = names.reduce((accumulator, currentValue) => { accumulator[currentValue] = (accumulator[currentValue] || 0) + 1; return accumulator; }, {}); // initialValue 为一个空对象 console.log(nameCount); // 输出: { Alice: 2, Bob: 2, Charlie: 1 }
注意事项
- 如果未提供
initialValue
,reduce()
将以数组的第一个元素作为初始值,并从第二个元素开始执行。 - 当数组为空且未提供
initialValue
时,会抛出TypeError
。
12. indexOf(searchElement, fromIndex)
-
参数:
searchElement
- 要查找的元素。fromIndex
(可选) - 开始查找的索引,默认为 0。
-
返回值: 元素的索引,如果未找到则返回 -1。
-
使用场景: 需要查找元素位置时。
示例:
const arr = [1, 2, 3];
const index = arr.indexOf(2); // index = 1
13. lastIndexOf(searchElement, fromIndex)
-
参数:
searchElement
- 要查找的元素。fromIndex
(可选) - 从该索引向前查找,默认为数组长度减一。
-
返回值: 元素的最后一个索引,如果未找到则返回 -1。
-
使用场景: 需要查找元素最后出现的位置时。
示例:
const arr = [1, 2, 3, 2];
const index = arr.lastIndexOf(2); // index = 3
14. forEach(callback(currentValue, index, array))
-
参数:
callback
- 一个函数,接受三个参数:currentValue
- 当前处理的元素。index
(可选) - 当前处理元素的索引。array
(可选) - 调用forEach
的数组。
-
返回值: 无。
-
使用场景: 需要遍历数组时。
示例:
const arr = [1, 2, 3];
arr.forEach((element, index) => {
console.log(`Index ${index}: ${element}`); // 输出每个元素及其索引
});
15. map(callback(currentValue, index, array))
-
参数:
callback
- 一个函数,接受三个参数:currentValue
- 当前处理的元素。index
(可选) - 当前处理元素的索引。array
(可选) - 调用map
的数组。
-
返回值: 新数组,包含
callback
返回值的结果。 -
使用场景: 需要对数组中的每个元素进行转换时。
示例:
const arr = [1, 2, 3];
const newArr = arr.map((element) => element * 2); // newArr = [2, 4, 6]
16. filter(callback(currentValue, index, array))
-
参数:
callback
- 一个函数,接受三个参数:currentValue
- 当前处理的元素。index
(可选) - 当前处理元素的索引。array
(可选) - 调用filter
的数组。
-
返回值: 新数组,包含所有通过测试的元素。
-
使用场景: 需要根据条件过滤数组元素时。
示例:
const arr = [1, 2, 3, 4];
const newArr = arr.filter((element) => element > 2); // newArr = [3, 4]
17. every(callback(currentValue, index, array))
-
参数:
callback
- 一个函数,接受三个参数:currentValue
- 当前处理的元素。index
(可选) - 当前处理元素的索引。array
(可选) - 调用every
的数组。
-
返回值: 如果数组中的所有元素都通过测试,则返回
true
,否则返回false
。 -
使用场景: 需要检查数组所有元素是否满足条件时。
示例:
const arr = [1, 2, 3];
const allEven = arr.every((element) => element % 2 === 0); // allEven = false
18. some(callback(currentValue, index, array))
-
参数:
callback
- 一个函数,接受三个参数:currentValue
- 当前处理的元素。index
(可选) - 当前处理元素的索引。array
(可选) - 调用some
的数组。
-
返回值: 如果数组中至少有一个元素通过测试,则返回
true
,否则返回false
。 -
使用场景: 需要检查数组是否有符合条件的元素时。
示例:
const arr = [1, 2, 3];
const hasEven = arr.some((element) => element % 2 === 0); // hasEven = true
19. find(callback(currentValue, index, array))
-
参数:
callback
- 一个函数,接受三个参数:currentValue
- 当前处理的元素。index
(可选) - 当前处理元素的索引。array
(可选) - 调用find
的数组。
-
返回值: 返回第一个满足条件的元素,如果没有找到则返回
undefined
。 -
使用场景: 需要找到第一个符合条件的元素时。
示例:
const arr = [1, 2, 3];
const found = arr.find((element) => element > 1); // found = 2
20. findIndex(callback(currentValue, index, array))
-
参数:
callback
- 一个函数,接受三个参数:currentValue
- 当前处理的元素。index
(可选) - 当前处理元素的索引。array
(可选) - 调用findIndex
的数组。
-
返回值: 返回第一个满足条件的元素的索引,如果没有找到则返回 -1。
-
使用场景: 需要找到第一个符合条件的元素的索引时。
示例:
const arr = [1, 2, 3];
const index = arr.findIndex((element) => element > 1); // index = 1
21. includes(searchElement, fromIndex)
-
参数:
searchElement
- 要查找的元素。fromIndex
(可选) - 从该索引开始查找,默认为 0。
-
返回值: 如果数组包含指定元素,则返回
true
,否则返回false
。 -
使用场景: 需要检查数组中是否有特定元素时。
示例:
const arr = [1, 2, 3];
const hasTwo = arr.includes(2); // hasTwo = true
22. flat(depth)
- 参数:
depth
(可选) - 要“拍平”的嵌套数组的深度,默认为 1,填入Infinity表示完全扁平化。 - 返回值: 新数组,包含所有元素,嵌套数组被“拍平”。
- 使用场景: 需要将多维数组转换为一维数组时。
示例:
const arr = [1, [2, [3, 4]]];
const flatArr = arr.flat(); // flatArr = [1, 2, [3, 4]]
const fullyFlat = arr.flat(2); // fullyFlat = [1, 2, 3, 4]
const arr = [1, [2, [3, [4, [5]]]]];
const flattened = arr.flat(Infinity);
console.log(flattened); // 输出: [1, 2, 3, 4, 5]
23. flatMap(callback(currentValue, index, array))
-
参数:
callback
- 一个函数,接受三个参数:currentValue
- 当前处理的元素。index
(可选) - 当前处理元素的索引。array
(可选) - 调用flatMap
的数组。
-
返回值: 新数组,包含
callback
返回值的结果,且自动“拍平”一层。 -
使用场景: 需要对数组进行映射并拍平结果时。
示例:
const arr = [1, 2, 3];
const flatMapped = arr.flatMap((element) => [element, element * 2]); // flatMapped = [1, 2, 2, 4, 3, 6]