JavaScript 数组方法
基本数组方法
JavaScript 数组长度
length 属性返回数组的长度（大小）。
JavaScript 数组 toString()
JavaScript 方法 toString() 将数组转换为由（逗号分隔的）数组值组成的字符串。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
结果
JavaScript Array at() 方法
ES2022 引入了数组方法 at()
示例
使用 at() 获取 fruits 的第三个元素
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
自己动手试一试 »
使用 [] 获取 fruits 的第三个元素
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];
自己动手试一试 »
at() 方法返回数组中指定索引的元素。
at() 方法返回与 [] 相同的结果。
at() 方法自 2022 年 3 月起在所有现代浏览器中受支持
| Chrome 92 | Edge 92 | Firefox 90 | Safari 15.4 | Opera 78 |
| 2021 年 4 月 | 2021 年 7 月 | 2021 年 7 月 | 2022 年 3 月 | 2021 年 8 月 |
注意
许多语言允许使用 负括号索引，例如 [-1]，来访问对象/数组/字符串末尾的元素。
这在 JavaScript 中是不可能的，因为 [] 用于访问数组和对象。obj[-1] 指的是键 -1 的值，而不是对象的最后一个属性。
at() 方法在 ES2022 中引入，旨在解决此问题。
JavaScript 数组 join()
join() 方法也将所有数组元素连接成一个字符串。
它的行为与 toString() 完全相同，但此外您还可以指定分隔符。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
结果
弹出和推入
在处理数组时，可以轻松地删除元素和添加新元素。
这就是弹出和推入的含义。
将项 **弹出** 数组，或将项 **推入** 数组。
JavaScript 数组 pop()
pop() 方法删除数组的最后一个元素。
pop() 方法返回被“弹出”的值。
JavaScript 数组 push()
push() 方法将一个新元素添加到数组（末尾）。
push() 方法返回新的数组长度。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");
自己动手试一试 »移动元素
移动（shift）等同于弹出（pop），但操作的是第一个元素而不是最后一个。
JavaScript 数组 shift()
shift() 方法删除第一个数组元素，并将其他所有元素“向左移”（索引降低）。
shift() 方法返回被“移出”的值。
JavaScript 数组 unshift()
unshift() 方法将一个新元素添加到数组（开头），并将旧元素“向右移”（索引增加）。
unshift() 方法返回新的数组长度。
更改元素
数组元素通过其 **索引号** 进行访问。
数组 **索引** 从 0 开始。
[0] 是第一个数组元素。
[1] 是第二个。
[2] 是第三个 ...
JavaScript 数组长度
length 属性提供了一种简单的方法来在数组末尾追加一个新元素。
JavaScript 数组 delete()
警告！
使用 delete() 会在数组中留下 undefined 的空位。
请改用 pop() 或 shift()。
合并数组（连接）
在编程语言中，连接（concatenation）意味着将字符串首尾相连。
连接 "snow" 和 "ball" 得到 "snowball"。
连接数组意味着将数组首尾相连。
JavaScript 数组 concat()
concat() 方法通过合并（连接）现有数组来创建一个新数组。
示例（合并两个数组）
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
自己动手试一试 »
注意
concat() 方法不会更改现有数组。它始终返回一个新数组。
concat() 方法可以接受任意数量的数组参数。
示例（合并三个数组）
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
自己动手试一试 »
concat() 方法也可以接受字符串作为参数。
示例（合并一个数组和一些值）
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");
自己动手试一试 »
数组 copyWithin()
copyWithin() 方法将数组元素复制到数组中的另一个位置。
示例
复制到索引 2，复制索引 0 开始的所有元素。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
自己动手试一试 »
复制到索引 2，复制索引 0 到 2 的元素。
const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.copyWithin(2, 0, 2);
自己动手试一试 »
注意
copyWithin() 方法会覆盖现有值。
copyWithin() 方法不会向数组添加项目。
copyWithin() 方法不会改变数组的长度。
展平数组
展平数组是将数组的维度降低的过程。
当您想将多维数组转换为一维数组时，展平很有用。
JavaScript 数组 flat() 方法
ES2019 引入了 Array flat() 方法。
flat() 方法创建一个新数组，将子数组元素展平到指定的深度。
浏览器支持
JavaScript 数组 flat() 自 2020 年 1 月起在所有现代浏览器中均受支持
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| 2018 年 9 月 | 2020 年 1 月 | 2018 年 9 月 | 2018 年 9 月 | 2018 年 9 月 |
JavaScript Array flatMap()
ES2019 在 JavaScript 中添加了 Array flatMap() 方法。
flatMap() 方法首先映射数组的所有元素，然后通过展平数组创建一个新数组。
浏览器支持
JavaScript Array flatMap() 自 2020 年 1 月起在所有现代浏览器中都受支持
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| 2018 年 9 月 | 2020 年 1 月 | 2018 年 9 月 | 2018 年 9 月 | 2018 年 9 月 |
拼接和切片数组
splice() 方法向数组添加新项。
slice() 方法从数组中提取一部分。
JavaScript 数组 splice()
splice() 方法可用于向数组添加新项。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
自己动手试一试 »
第一个参数（2）定义了 **添加** 新元素（拼接）的位置。
第二个参数（0）定义了 **删除** 多少个元素。
其余参数（"Lemon" , "Kiwi"）定义了要 **添加** 的新元素。
splice() 方法返回一个包含已删除项目的数组。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
自己动手试一试 »
使用 splice() 删除元素
通过巧妙的参数设置，您可以使用 splice() 删除元素，而不会在数组中留下“空位”。
第一个参数（0）定义了 **添加** 新元素（拼接）的位置。
第二个参数（1）定义了 **删除** 多少个元素。
其余参数被省略。不会添加新元素。
JavaScript 数组 toSpliced()
ES2023 添加了 Array toSpliced() 方法，作为一种安全地拼接数组而不改变原始数组的方法。
新的 toSpliced() 方法与旧的 splice() 方法的区别在于，新方法创建一个新数组，使原始数组保持不变，而旧方法则改变了原始数组。
JavaScript 数组 slice()
slice() 方法将数组的一部分切片到一个新数组中。
示例
从数组元素 1（"Orange"）开始切片一部分数组。
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
自己动手试一试 »
注意
slice() 方法创建一个新数组。
slice() 方法不会从源数组中删除任何元素。
示例
从数组元素 3（"Apple"）开始切片一部分数组。
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
自己动手试一试 »
slice() 方法可以像 slice(1, 3) 一样接受两个参数。
然后，该方法选择从开始参数开始，到（但不包括）结束参数的元素。
示例
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
自己动手试一试 »
如果像第一个示例一样省略了结束参数，slice() 方法会切片数组的其余部分。
示例
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
自己动手试一试 »
自动 toString()
当需要原始值时，JavaScript 会自动将数组转换为逗号分隔的字符串。
当您尝试输出数组时，总是会发生这种情况。
这两个示例将产生相同的结果：
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
自己动手试一试 »
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
自己动手试一试 »
注意
所有 JavaScript 对象都有一个 toString() 方法。
搜索数组
本教程的下一章将介绍 数组搜索。
排序数组
数组排序 涵盖了用于排序数组的方法。
迭代数组
数组迭代 涵盖了操作所有数组元素的方法。
