数组是值的有序集合。是最常见的数据类型之一。本篇文章总结了数组的创建和基本用法，可以细分为如下几类：

1. 数组的创建

创建数组有两种基本方式：

let arr = new Array(); //使用内置的Array构造函数。

let arr = [];//使用数组字面量。

大多数情况下我们使用第二种方法。原因很简单第二种代码少，哈哈。此外，由于JavaScript的高度动态特性，无法阻止修改内置的Array构造函数，也就意味着new Array()创建的不一定是数组。因此，推荐坚持使用数组字面量。

• 初始化数组fruits

let fruits = ["Apple","Orange","Plum"];

数组元素从0开始编号，我们可以通过方括号中的数字获取元素：

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits[0] ); // Apple

alert( fruits[1] ); // Orange

alert( fruits[2] ); // Plum

• 可以替换元素或者新增一个元素：

fruits[2] = 'Pear'; // 现在变成了 ["Apple", "Orange", "Pear"]

fruits[3] = 'Lemon'; // 现在变成 ["Apple", "Orange", "Pear", "Lemon"]

• length属性的值是数组中元素的总个数：

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits.length ); // 3

• 数组可以存储任何类型的元素：

// 混合值

let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];

// 获取索引为 1 的对象然后显示它的 name

alert( arr[1].name ); // John

// 获取索引为 3 的函数并执行

arr[3](); // hello

2. 使用 “at” 获取最后一个元素

现在我们有这样一个场景：假设我们需要获取数组的最后一个元素。 我们可以显示地计算最后一个元素的索引，然后访问它：fruits[fruits.length - 1].

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits[fruits.length-1] ); // Plum

有点麻烦，不是吗？我们需要写两次变量名。 幸运的是，这里有一个更简短的语法fruits.at(-1):

let fruits = ["Apple", "Orange", "Plum"];

// 与 fruits[fruits.length-1] 相同

alert( fruits.at(-1) ); // Plum

换句话说，arr.at(i)：

• 如果i>0,则与arr[i]完全相同；
• 对于i是负数的情况，它则从数组的尾部向前数。

3. 在数组两端添加、删除元素

我们从以下简单为数组添加、删除元素的方法开始。

作用于数组末端的方法：

• push：在数组末尾添加元素(可添加多个元素)

let fruits = ["Apple", "Orange"];

fruits.push("Pear");

alert( fruits ); // Apple, Orange, Pear

调用 fruits.push(...) 与 fruits[fruits.length] = ... 是一样的。

• pop：在数组末尾删除元素

取出并返回数组的最后一个元素

let fruits = ["Apple", "Orange", "Pear"];

alert( fruits.pop() ); // 移除 "Pear" 然后 alert 显示出来

alert( fruits ); // Apple, Orange

fruits.pop() 和 fruits.at(-1) 都返回数组的最后一个元素，但 fruits.pop() 同时也删除了数组的最后一个元素，进而修改了原数组。

作用于数组末端的方法：

• unshift：在数组开头添加元素(可添加多个元素)

let fruits = ["Orange", "Pear"];

fruits.unshift('Apple');

alert( fruits ); // Apple, Orange, Pear

• shift：在数组开头删除元素

let fruits = ["Apple", "Orange", "Pear"];

alert( fruits.shift() ); // 移除 Apple 然后 alert 显示出来

alert( fruits ); // Orange, Pear

• 性能

pop 和 push 方法只影响数组最后一个元素：pop 移除最后一个元素，push 在数组末尾增加元素。shift 和 unshift 方法修改第一个元素，之后的每一个元素的索引都需要调整。因此，pop 和 push 方法比 shift 和 unshift 要快很多，非特殊情况不建议使用 shift 和 unshift 方法。

4. 在数组任意位置添加、删除元素

splice

方法可以说是处理数组的瑞士军刀。它可以做所有事情：添加，删除和插入元素。

语法是：

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

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

让我们从删除开始：

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

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

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

// 当只填写了splice的start参数时候，将删除从索引start开始的所有数组项

下面的例子，我们删除了3个元素，并且用另外两个元素替换他们：

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

// 删除数组的前三项，并使用其他内容代替它们

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

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

在这里我们可以看到splice返回了被删除的元素所组成的数组：

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

// 删除前两个元素

let removed = arr.splice(0, 2);

alert( removed ); // "I", "study" <-- 被从数组中删除了的元素

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

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

// 从索引 2 开始

// 删除 0 个元素

// 然后插入 "complex" 和 "language"

arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

允许负向索引

在这里和其他的数组方法中，负向索引都是被允许的。他们从数组末尾计算位置，如下所示：

let arr = [1, 2, 5];

// 从索引 -1（尾端前一位）

// 删除 0 个元素，

// 然后插入 3 和 4

arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5

slice

slice方法会返回一个新数组，将所有从索引start到end（不包含end）的数组项复制到一个新的数组。start和end都可以是负数，在这种情况下从末尾计算索引。该方法的语法是：

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

例如:

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s（复制从位置 1 到位置 3 的元素）

alert( arr.slice(-2) ); // s,t（复制从位置 -2 到尾端的元素）

我们也可以不带参数地调用它，arr.slice()会创建一个arr的副本。通常用于获取副本，以进行不影响原始数组的进一步转换。

concat

arr.concat 创建一个新数组，其中包含来自于其他和其他项的值。

语法：

arr.concat(arg1, arg2...)

它接收任意数量的参数---数组或者值都可以。

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

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

例如：

let arr = [1, 2];

// 从 arr 和 [3,4] 创建一个新数组

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

// 从 arr、[3,4] 和 [5,6] 创建一个新数组

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

// 从 arr、[3,4]、5 和 6 创建一个新数组

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

5. 遍历：forEach

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

语法：

arr.forEach(function(item, index, array) {

// ... do something with item

});

例如，下面这个程序显示了数组的每个元素：

// 对每个元素调用 alert

["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

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

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {

alert(`${item} is at index ${index} in ${array}`);

});

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

6. 在数组中搜索

现在，我们来看一下数组中进行搜索的方法。

indexOf/lastIndexOf/includes

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

• arr.indexOf(item, from) —— 从索引 from 开始搜索 item，如果找到则返回索引，否则返回 -1。

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

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

例如：

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1

alert( arr.indexOf(false) ); // 2

alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

请注意，indexOf 和 includes 使用严格相等 === 进行比较。所以，如果我们搜索 false，它会准确找到 false 而不是数字 0。

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

方法 arr.lastIndexOf 与 indexOf 相同，但从右向左查找。

let fruits = ['Apple', 'Orange', 'Apple'];

alert( arr.indexOf('Apple') ); // 0（第一个 Apple）

alert( arr.lastIndexOf('Apple') ); // 2（最后一个 Apple）

• 方法 includes 可以正确的处理 NaN

方法 includes 的一个次要但值得注意的特性是，它可以正确处理 NaN，这与 indexOf 不同：

const arr = [NaN];

alert( arr.indexOf(NaN) ); // -1（错，应该为 0）

alert( arr.includes(NaN) );// true（正确）

这是因为 includes 是在比较晚的时候才被添加到 JavaScript 中的，并且在内部使用了更新了的比较算法。

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 的那个用户：

let users = [

{id: 1, name: "John"},

{id: 2, name: "Pete"},

{id: 3, name: "Mary"}

];

let user = users.find(item => item.id == 1);

alert(user.name); // John

在现实生活中，对象数组是很常见的，所以 find 方法非常有用。

注意在这个例子中，我们传给了 find 一个单参数函数 item => item.id == 1。这很典型，并且 find 方法的其他参数很少使用。

arr.findIndex 方法（与 arr.find）具有相同的语法，但它返回找到的元素的索引，而不是元素本身。如果没找到，则返回 -1。

arr.findLastIndex 方法类似于 findIndex，但从右向左搜索，类似于 lastIndexOf。

这是一个例子：

let users = [

{id: 1, name: "John"},

{id: 2, name: "Pete"},

{id: 3, name: "Mary"},

{id: 4, name: "John"}

];

// 寻找第一个 John 的索引

alert(users.findIndex(user => user.name == 'John')); // 0

// 寻找最后一个 John 的索引

alert(users.findLastIndex(user => user.name == 'John')); // 3

filter

find 方法搜索的是使函数返回 true 的第一个（单个）元素。

如果需要匹配的有很多，我们可以使用 arr.filter(fn)。

语法与 find 大致相同，但是 filter 返回的是所有匹配元素组成的数组：

let results = arr.filter(function(item, index, array) {

// 如果 true item 被 push 到 results，迭代继续

// 如果什么都没找到，则返回空数组

});

例如：

let users = [

{id: 1, name: "John"},

{id: 2, name: "Pete"},

{id: 3, name: "Mary"}

];

// 返回前两个用户的数组

let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

6. 数组转换

让我们继续学习进行数组转换和重新排序的方法。

map

arr.map 方法是最有用和经常使用的方法之一。

它对数组的每个元素都调用函数，并返回结果数组。

语法：

let result = arr.map(function(item, index, array) {

// 返回新值而不是当前元素

})

例如,在这里我们将每个元素转换为它的字符串长度：

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);

alert(lengths); // 5,7,6

sort(fn)

arr.sort 方法对数组进行 原位（in-place） 排序，更改元素的顺序。(译注：原位是指在此数组内，而非生成一个新数组。)

它还返回排序后的数组，但是返回值通常会被忽略，因为修改了 arr 本身。

语法：

let arr = [ 1, 2, 15 ];

// 该方法重新排列 arr 的内容

arr.sort();

alert( arr ); // 1, 15, 2

你有没有注意到结果有什么奇怪的地方？

顺序变成了 1, 15, 2。不对，但为什么呢？

这些元素默认情况下被按字符串进行排序。

从字面上看，所有元素都被转换为字符串，然后进行比较。对于字符串，按照词典顺序进行排序，实际上应该是 "2" > "15"。

要使用我们自己的排序顺序，我们需要提供一个函数作为 arr.sort() 的参数。

该函数应该比较两个任意值并返回：

function compare(a, b) {

if (a > b) return 1; // 如果第一个值比第二个值大

if (a == b) return 0; // 如果两个值相等

if (a < b) return -1; // 如果第一个值比第二个值小

}

例如，按数字进行排序：

function compareNumeric(a, b) {

if (a > b) return 1;

if (a == b) return 0;

if (a < b) return -1;

}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

alert(arr); // 1, 2, 15

现在结果符合预期了。

我们思考一下这儿发生了什么。arr 可以是由任何内容组成的数组，对吗？它可能包含数字、字符串、对象或其他任何内容。我们有一组 一些元素。要对其进行排序，我们需要一个 排序函数 来确认如何比较这些元素。默认是按字符串进行排序的。

arr.sort(fn) 方法实现了通用的排序算法。我们不需要关心它的内部工作原理（大多数情况下都是经过 快速排序 或 Timsort 算法优化的）。它将遍历数组，使用提供的函数比较其元素并对其重新排序，我们所需要的就是提供执行比较的函数 fn。

顺便说一句，如果我们想知道要比较哪些元素 —— 那么什么都不会阻止 alert 它们：

[1, -2, 15, 2, 0, 8].sort(function(a, b) {

alert( a + " <> " + b );

return a - b;

});

该算法可以在此过程中，将一个元素与多个其他元素进行比较，但是它会尝试进行尽可能少的比较。

比较函数可以返回任何数字

实际上，比较函数只需要返回一个正数表示“大于”，一个负数表示“小于”。

通过这个原理我们可以编写更短的函数：

let arr = [ 1, 2, 15 ];

arr.sort(function(a, b) { return a - b; });

alert(arr); // 1, 2, 15

箭头函数最好

你还记得箭头函数吗？这里使用箭头函数会更加简洁：

arr.sort( (a, b) => a - b );

这与上面更长的版本完全相同。

使用 localeCompare for strings

你记得字符串比较算法吗？默认情况下，它通过字母的代码比较字母。

对于许多字母，最好使用 str.localeCompare 方法正确地对字母进行排序，例如 Ö。

例如，让我们用德语对几个国家/地区进行排序：

let countries = ['Österreich', 'Andorra', 'Vietnam'];

alert( countries.sort( (a, b) => a > b ? 1 : -1) ); // Andorra, Vietnam, Österreich（错的）

alert( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,Österreich,Vietnam（对的！）

reverse

arr.reverse 方法用于颠倒 arr 中元素的顺序。

例如：

let arr = [1, 2, 3, 4, 5];

arr.reverse();

alert( arr ); // 5,4,3,2,1

它也会返回颠倒后的数组 arr。

split/join

举一个现实生活场景的例子。我们正在编写一个消息应用程序，并且该人员输入以逗号分隔的接收者列表：John, Pete, Mary。但对我们来说，名字数组比单个字符串舒适得多。怎么做才能获得这样的数组呢？

str.split(delim) 方法可以做到。它通过给定的分隔符 delim 将字符串分割成一个数组。

在下面的例子中，我们用“逗号后跟着一个空格”作为分隔符：

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {

alert( `A message to ${name}.` ); // A message to Bilbo（和其他名字）

}

split 方法有一个可选的第二个数字参数 —— 对数组长度的限制。如果提供了，那么额外的元素会被忽略。但实际上它很少使用：

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

拆分为字母

调用带有空参数 s 的 split(s)，会将字符串拆分为字母数组：

let str = "test";

alert( str.split('') ); // t,e,s,t

arr.join(glue) 与 split 相反。它会在它们之间创建一串由 glue 粘合的 arr 项。

例如：

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 使用分号 ; 将数组粘合成字符串

alert( str ); // Bilbo;Gandalf;Nazgul

reduce/reduceRight

当我们需要遍历一个数组时 —— 我们可以使用 forEach，for 或 for..of。

当我们需要遍历并返回每个元素的数据时 —— 我们可以使用 map。

arr.reduce 方法和 arr.reduceRight 方法和上面的种类差不多，但稍微复杂一点。它们用于根据数组计算单个值。

语法是：

let value = arr.reduce(function(accumulator, item, index, array) {

// ...

}, [initial]);

该函数一个接一个地应用于所有数组元素，并将其结果“搬运（carry on）”到下一个调用。

参数：

accumulator —— 是上一个函数调用的结果，第一次等于 initial（如果提供了 initial 的话）。

• item —— 当前的数组元素。

• index —— 当前索引。

• arr —— 数组本身。

应用函数时，上一个函数调用的结果将作为第一个参数传递给下一个函数。

因此，第一个参数本质上是累加器，用于存储所有先前执行的组合结果。最后，它成为 reduce 的结果。

听起来复杂吗？

掌握这个知识点的最简单的方法就是通过示例。

在这里，我们通过一行代码得到一个数组的总和：

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

传递给 reduce 的函数仅使用了 2 个参数，通常这就足够了。

让我们看看细节，到底发生了什么。

1. 在第一次运行时，sum 的值为初始值 initial（reduce 的最后一个参数），等于 0，current 是第一个数组元素，等于 1。所以函数运行的结果是 1。

2. 在第二次运行时，sum = 1，我们将第二个数组元素（2）与其相加并返回。

3. 在第三次运行中，sum = 3，我们继续把下一个元素与其相加，以此类推……

计算流程：

或者以表格的形式表示，每一行代表的是对下一个数组元素的函数调用：

	sum	current	result
第1次调用	0	1	1
第2次调用	1	2	3
第3次调用	3	3	6
第4次调用	6	4	10

在这里，我们可以清楚地看到上一个调用的结果如何成为下一个调用的第一个参数。

我们也可以省略初始值：

let arr = [1, 2, 3, 4, 5];

// 删除 reduce 的初始值（没有 0）

let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

结果是一样的。这是因为如果没有初始值，那么 reduce 会将数组的第一个元素作为初始值，并从第二个元素开始迭代。

计算表与上面相同，只是去掉第一行。

但是这种使用需要非常小心。如果数组为空，那么在没有初始值的情况下调用 reduce 会导致错误。

例如：

let arr = [];

// Error: Reduce of empty array with no initial value

// 如果初始值存在，则 reduce 将为空 arr 返回它（即这个初始值）。

arr.reduce((sum, current) => sum + current);

所以建议始终指定初始值。

arr.reduceRight 和 arr.reduce 方法的功能一样，只是遍历为从右到左。

7. 数组类型判断（Array.isArray）

数组是基于对象的，不构成单独的语言类型。

所以 typeof 不能帮助从数组中区分出普通对象：

alert(typeof {}); // object

alert(typeof []); // object（相同）

……但是数组经常被使用，因此有一种特殊的方法用于判断：Array.isArray(value)。如果 value 是一个数组，则返回 true；否则返回 false。

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

8. 注意事项

关于 length

当我们修改数组的时候，length 属性会自动更新。准确来说，它实际上不是数组里元素的个数，而是最大的数字索引值加一。

例如，一个数组只有一个元素，但是这个元素的索引值很大，那么这个数组的 length 也会很大：

let fruits = [];

fruits[123] = "Apple";

alert( fruits.length ); // 124

要知道的是我们通常不会这样使用数组。

length 属性的另一个有意思的点是它是可写的。

如果我们手动增加它，则不会发生任何有趣的事儿。但是如果我们减少它，数组就会被截断。该过程是不可逆的，下面是例子：

let arr = [1, 2, 3, 4, 5];

arr.length = 2; // 截断到只剩 2 个元素

alert( arr ); // [1, 2]

arr.length = 5; // 又把 length 加回来

alert( arr[3] ); // undefined：被截断的那些数值并没有回来

所以，清空数组最简单的方法就是：arr.length = 0;。