目录

JavaScript 数组方法

数组长度
数组 toString()
数组弹出()
数组推送()
数组移位()
数组取消移位()
数组连接()
数组删除()
数组连接()
数组平展()
数组拼接()
数组切片()
这些方法按照它们在本教程页面中出现的顺序列出

JavaScript 数组长度

这个length属性返回数组的长度(大小):

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
亲自试一试 »

JavaScript Array toString()

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
亲自试一试 »

弹出和推送

使用数组时,删除元素和添加新元素很容易。

这就是弹出和推送:

弹出项目出去数组,或推送项目进入数组。



JavaScript Array pop()

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

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
亲自试一试 »

这个pop()方法返回 "popped out" 的值:

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();
亲自试一试 »

JavaScript 数组推送()

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

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
亲自试一试 »

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

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");
亲自试一试 »

移动元素

移动相当于弹出,但处理第一个元素而不是最后一个元素。


JavaScript 数组移位()

这个shift()方法将第一个数组元素和 "shifts" 所有其他元素删除到较低的索引。

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
亲自试一试 »

这个shift()方法返回 "shifted out" 的值:

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();
亲自试一试 »

JavaScript Array unshift()

这个unshift()方法将一个新元素添加到数组(在开头)和 "unshifts" 旧元素:

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
亲自试一试 »

这个unshift()方法返回新的数组长度:

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
亲自试一试 »

改变元素

数组元素可以使用它们来访问索引号

数组索引从 0 开始:

[0] 是第一个数组元素
[1] 是第二个
[2] 第三...

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
亲自试一试 »

JavaScript 数组长度

这个length属性提供了一种将新元素附加到数组的简单方法:

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
亲自试一试 »

JavaScript 数组删除()

警告 !

可以使用 JavaScript 运算符删除数组元素delete

使用delete树叶undefined阵列中的孔。

请改用 pop() 或 shift()。

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
亲自试一试 »

合并(串联)数组

这个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"); 
亲自试一试 »

展平数组

展平数组是减少数组维数的过程。

flat() 方法创建一个新数组,其中子数组元素连接到指定深度。

示例

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
亲自试一试 »

浏览器支持

JavaScript 数组flat()自 2020 年 1 月起所有现代浏览器均支持:

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

拼接和切片数组

这个splice()方法将新项目添加到数组中。

这个slice()方法切出数组的一部分。


JavaScript 数组拼接()

这个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()删除元素而不在数组中留下"holes":

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
亲自试一试 »

第一个参数 (0) 定义新元素的位置添加(拼接进去)。

第二个参数 (1) 定义多少元素应该是已删除

其余参数省略。不会添加新元素。


JavaScript 数组切片()

这个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);
亲自试一试 »

如果省略 end 参数,就像在第一个示例中一样,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() 方法。


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

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

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


数组排序

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

完整的数组参考

有关完整的数组参考,请访问我们的:

完整的 JavaScript 数组参考.

该参考包含所有数组属性和方法的描述和示例。

通过练习测试一下

练习:

使用正确的数组方法删除最后一项fruits数组。

const fruits = ["Banana", "Orange", "Apple"];
;

开始练习