JavaScript 数组方法
基本数组方法
JavaScript 数组长度
length 属性返回数组的长度（大小）。
JavaScript 数组 toString()
JavaScript 方法 toString() 将数组转换为一个由（逗号分隔的）数组值组成的字符串。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
结果
JavaScript 数组 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 的值，而不是对象的最后一个属性。
ES2022 引入了 at() 方法来解决这个问题。
JavaScript 数组 join()
join() 方法也将所有数组元素连接成一个字符串。
它的行为与 toString() 类似，但此外您还可以指定分隔符。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
结果
弹出和推入
当您使用数组时，很容易删除元素并添加新元素。
这就是弹出和推入的意思
从数组中弹出项目，或将项目推入数组。
JavaScript 数组 pop()
pop() 方法删除数组中的最后一个元素。
pop() 方法返回“弹出”的值。
JavaScript 数组 push()
push() 方法向数组添加一个新元素（在末尾）。
push() 方法返回新的数组长度。
移位元素
移位相当于弹出，但作用于第一个元素而不是最后一个元素。
JavaScript 数组 shift()
shift() 方法删除第一个数组元素，并将所有其他元素“移位”到较低的索引。
shift() 方法返回“移位”的值。
JavaScript 数组 unshift()
unshift() 方法向数组添加一个新元素（在开头），并“反移”旧元素。
unshift() 方法返回新的数组长度。
更改元素
数组元素使用它们的索引号访问。
数组索引从 0 开始。
[0] 是第一个数组元素。
[1] 是第二个。
[2] 是第三个……
JavaScript 数组长度
length 属性提供了一种简单的方法来将新元素附加到数组中。
JavaScript 数组 delete()
警告！
使用 delete() 会在数组中留下 undefined 空洞。
请改用 pop() 或 shift()。
合并数组（连接）
在编程语言中，连接表示将字符串首尾相连。
连接“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() 方法创建一个新数组，并将子数组元素连接到指定的深度。
浏览器支持
自 2020 年 1 月起，所有现代浏览器都支持 JavaScript 数组 flat()。
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| 2018 年 9 月 | 2020 年 1 月 | 2018 年 9 月 | 2018 年 9 月 | 2018 年 9 月 |
JavaScript 数组 flatMap()
ES2019 将 Array flatMap() 方法添加到 JavaScript 中。
flatMap() 方法首先映射数组的所有元素，然后通过扁平化数组创建一个新数组。
浏览器支持
自 2020 年 1 月起，所有现代浏览器都支持 JavaScript 数组 flatMap()。
| 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() 方法。
搜索数组
本教程的下一章将介绍搜索数组。
排序数组
排序数组介绍了用于排序数组的方法。
迭代数组
迭代数组介绍了对所有数组元素进行操作的方法。
