JavaScript 数组方法

JavaScript 数组内置了很多属性和方法帮我们方便的操作数组,比如添加或删除元素、返回子数组、转为字符串等。

JavaScript 数组内置了很多属性和方法帮我们方便的操作数组,比如添加或删除元素、返回子数组、转为字符串等。

将数组转换为字符串

JavaScript 方法 toString() 将数组转换为逗号分隔的字符串。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

结果:

Banana,Orange,Apple,Mango

join() 方法还将所有数组元素连接成一个字符串。它和 toString() 很想,但可以指定分隔符。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

结果:

Banana * Orange * Apple * Mango

弹出 pop()

pop() 方法从数组中删除最后一个元素。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // 删除了 "Mango"

pop() 方法返回删除的值。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let x = fruits.pop(); // x = "Mango"

添加 push()

push() 方法向数组在末尾添加一个新元素:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // 在数组末尾添加了 "Kiwi"

push() 方法返回新的数组长度:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let x = fruits.push("Kiwi"); //  x = 5

删除第一个数组元素 shift()

shift() 方法删除第一个数组元素并将所有其他元素索引向前移动 1 位。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // 删除第一个元素 "Banana"

shift() 方法返回删除的元素值:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let x = fruits.shift(); // x = "Banana"

在数组头部添加元素 unshift()

unshift() 方法向数组开头添加一个或多个新元素:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Adds "Lemon" to fruits

unshift() 方法返回新的数组长度。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Returns 5

删除元素 delete

由于 JavaScript 数组是对象,因此可以使用 JavaScript 的 delete 运算符删除元素:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // 将第一个元素改为 **undefined**

使用delete可能会在数组中留下未定义的空洞。

修改数组 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() 删除元素而不在数组中留下“空洞”:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // 删除第一个元素

合并数组 concat()

concat() 方法通过合并(连接)现有数组来创建一个新数组:

合并 2 个数组

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

// 合并 myGirls 和 myBoys 
const myChildren = myGirls.concat(myBoys);

concat() 方法不会更改现有数组,它总是返回一个新数组。

concat() 方法可以采用任意数量的数组参数:

合并 3 个数组

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");

切片数组

slice() 方法将数组的一部分切出到一个新数组中。

此示例从数组元素索引位置 1(“Orange”)开始切出数组的一部分:

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

slice() 方法创建一个新数组。它不会从源数组中删除任何元素。

此示例从数组元素索引位置 3(“Apple”)开始切出数组的一部分:

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

slice() 方法可以采用两个参数:开始索引和结束索引(不包括),返回由开始索引到结束索引(不包括)之间的元素组成的新数组。

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

在数组中查找最大值和最小值

没有用于在 JavaScript 数组中查找最高或最低值的内置函数。

您将在本教程的下一章中了解如何解决此问题。

排序数组

本教程的下一章将介绍排序数组。