数组方法 | 柯洛小站

记录一些 JavaScript 常用的数组方法，以及参考例子。

splice

语法

1	arr.splice(start[, deleteCount, elem1, ..., elemN])

start ：起始下标（负数时表示负向索引

deleteCount：删除的数量

elem：插入的元素

它从索引 start 开始修改 arr：删除 deleteCount 个元素并在当前位置插入 elem1, ..., elemN。最后返回被删除的元素所组成的数组。

例子

从删除开始：

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // 从索引 1 开始删除 1 个元素

alert( arr ); // ["I", "JavaScript"]

删除元素并替换元素，获取被删除元素的数组：

let arr = ["I", "study", "JavaScript", "right", "now"]; // 删除数组的前三项，并使用其他内容代替它们

let remove = arr.splice(0, 3);

alert( remove ); // ["I", "study", "JavaScript"]

arr.splice(0, 3, "Let's", "dance");

alert( arr ); // 现在 ["Let's", "dance", "right", "now"]

可以将 deleteCount 设置为 0，splice 方法就能够插入元素而不用删除任何元素：

let arr = ["V", "Me", "50"];

arr.splice(2, 0, "Eat", "KFC");

alert( arr ); // ['V', 'Me', '50', 'Eat', 'KFC']

允许负向索引，譬如当 deleteCount 设置为 -1 时，会从数组末尾开始计算，譬如：

let arr = ["V", "Me", "KFC"];

arr.splice(-1, 0, "50", "Eat");

alert( arr ) // ['V', 'Me', 'KFC', '50', 'Eat']

slice

语法

1	arr.slice([start], [end])

它会返回一个新的数组，将所有从下标 start 到 end （不包括 end）的数组项复制到一个新数组。start 和 end 都可以是负数。

譬如：

let arr = ["V", "Me", "50", "!"];

alert( arr.slice(0, 3) ) // V, Me, 50

alert( arr.slice(-3) ) // Me, 50, !

不带参数地调用它：arr.slice() 会创建一个 arr 的副本，这是一个浅拷贝。

concat

语法

1	arr.concat(arg1, arg2...)

它接受任意数量的参数 —— 数组或值都可以。

结果是一个包含来自于 arr，然后是 arg1，arg2 的元素的新数组。

如果参数 argN 是一个数组，那么其中的所有元素都会被复制。否则，将复制参数本身。

譬如：

let arr = [1, 2];

alert( arr.concat([3, 4]) ); // 1, 2, 3, 4

alert( arr.concat([3, 4], [5]) ); // 1, 2, 3, 4, 5

alert( arr.concat([3, 4], 5, 6) ); // 1, 2, 3, 4, 5, 6

通常，它只复制数组中的元素。其他对象，即使它们看起来像数组一样，但仍然会被作为一个整体添加：

let arr = [1, 2];

let arrayLike = { 0: "something", length: 1 };

alert( arr.concat(arrayLike) ); // 1,2,[object Object]

但如果类数组对象具有 Symbol.isConcatSpreadable 属性，那么它就会被 concat 当作一个数组来处理，此对象中的元素将被添加：

let arr = [1, 2];

let arrayLike = {
	0: "something",
	1: "else",
	[Symbol.isConcatSpreadable]: true,
	length: 2 
};
	
alert( arr.concat(arrayLike) ); // 1,2,something,else

forEach：遍历

arr.forEach 方法允许为数组的每个元素都运行一个函数。

语法

1
2
3

arr.forEach(function(item, index, array) {
	// ... do something with item
});

譬如下面这个程序 alert 了每个元素：

1	['星期四啦', '速速', 'V我50！'].forEach(alert);

而这段代码更详细地介绍了它们在目标数组中的位置：

1
2
3

['爽爽', '蛋蛋', '鸿鸿'].forEach((item, index, array) => {
	alert(`${item} 是第 ${index} 个位于 ${array} 中 `)
})

该函数的结果（如果它有返回）会被抛弃和忽略。

数组搜索

接着就是数组中进行搜索的方法。

indexOf / lastIndexOf 和 includes

arr.indexOf 和 arr.includes 方法语法相似，并且作用基本上也与字符串的方法相同，只不过这里是对数组元素而不是字符进行操作：

arr.indexOf(item, from) —— 从索引 from 开始搜索 item，如果找到则返回索引，否则返回 -1。
arr.includes(item, from) —— 从索引 from 开始搜索 item，如果找到则返回 true（译注：如果没找到，则返回 false）。

通常使用这些方法时只会传入一个参数：传入 item 开始搜索。默认情况下，搜索是从头开始的。

const arr = [1, 2, false]  
  
alert(arr.indexOf(2)) // 1  
alert(arr.indexOf(0)) // -1
alert(arr.indexOf(false)) // 2  
  
alert(arr.includes(1)) // true  
alert(arr.includes(0)) // false

注意，indexOf 和 includes 使用的是严格相等 === 进行比较，所以搜索 false 时，会准确找到 false 而不是 0。

如果想检查数组中是否包含元素 item，并且不需要知道其准确索引，那么 arr.includes 是首选。

arr.lastIndexOf 与 arr.indexOf 相同，但是从右往左查找。

const arr = ['爽爽', '蛋蛋', '鸿鸿']  
  
alert(arr.indexOf('爽爽')) // 0  
alert(arr.lastIndexOf('爽爽')) // 2

find 和 findIndex / findLastIndex

想象一下，我们有一个对象数组。我们如何找到具有特定条件的对象？

这时可以用 arr.find 方法。

语法如下：

let result = arr.find(function(item, index, array) {
	// 如果返回 true，则返回 item 并停止迭代
	// 对于假值（falsy）的情况，则返回 undefined 
});

依次对数组中的每个元素调用该函数：

item 是元素。
index 是它的索引。
array 是数组本身。

如果它返回 true，则搜索停止，并返回 item。如果没有搜索到，则返回 undefined。

例如，我们有一个存储用户的数组，每个用户都有 id 和 name 字段。让我们找到 id == 1 的那个用户：

const users = [  
  { id: 1, name: '爽爽' },  
  { id: 2, name: '蛋蛋' },  
  { id: 3, name: '鸿鸿' }  
]  
  
const user = users.find(item => item.id === 1)  
  
alert(user.name) // 爽爽

本文作者：Kiro

本文链接： https://www.kiro.cc/2022/08/array-methods/

更新于 2023-04-27