二维码
搜索 ×

JavaScript 数组方法

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

JavaScript 数组方法

数组方法如下
String length String trim()
String slice() String trimStart()
String substring() String trimEnd()
String substr() String padStart()
String replace() String padEnd()
String replaceAll() String charAt()
String toUpperCase() String charCodeAt()
String toLowerCase() String split()
String concat()

这些方法按照它们在本教程页面中出现的顺序列出

JavaScript Array length

length属性返回数组的长度（大小）：

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
let size = fruits.length;

JavaScript Array toString()

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

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

join()方法还将所有数组元素联接到一个字符串中。

它的行为与toString()类似 ，但除此之外，您还可以指定分隔符：

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

弹出和推动

当您使用数组时，很容易删除元素并添加 新元素。

这就是弹出和推动的内容：

从数组中弹出项目，或推送 项添加到数组中。

JavaScript Array pop()

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

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.pop();

pop()方法返回“弹出”的值：

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
let fruit = fruits.pop();

JavaScript Array push()

push()方法将一个新元素添加到数组中（在末尾）：

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.push("Kiwi");

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

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
let length = fruits.push("Kiwi");

移动元素

移位等同于弹出，但处理第一个元素而不是 最后一个。

JavaScript Array shift()

shift()方法删除第一个数组元素并“移动”所有 其他元素添加到较低的索引。

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.shift();

shift()方法返回“移出”的值：

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
let fruit = fruits.shift();

JavaScript Array unshift()

unshift()方法将一个新元素添加到数组中（在开头），并“取消移位” 较旧的元素：

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

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

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

更改元素

数组元素使用其索引号进行访问：

数组索引以 0 开头：

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

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits[0] = "Kiwi";

JavaScript Array length

length属性提供了一种将新元素追加到数组的简单方法：

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits[fruits.length] = "Kiwi";

JavaScript Array delete()

警告！

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

使用delete会在数组中出现undefined。

请改用 pop()或 shift()。

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
delete fruits[0];

合并（连接）数组

concat()方法通过合并（连接）创建一个新数组 现有阵列：

:合并两个数组 
1
2
3
4
const myGirls = ["Cecilie", "Lone"];  
const myBoys = ["Emil", "Tobias", "Linus"];  

const myChildren = myGirls.concat(myBoys);

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

concat()方法可以接受任意数量的数组参数：

:合并三个数组 
1
2
3
4
const arr1 = ["Cecilie", "Lone"];  
const arr2 = ["Emil", "Tobias", "Linus"];  
const arr3 = ["Robin", "Morgan"];  
const myChildren = arr1.concat(arr2, arr3);

concat()方法还可以将字符串作为参数：

:将数组与值合并 
1
2
const arr1 = ["Emil", "Tobias", "Linus"];  
const myChildren = arr1.concat("Peter"); 

平展数组

扁平化数组是降低数组维数的过程。

flat（） 方法创建一个新数组，其中包含连接到指定深度的子数组元素。

1
2
const myArr = [[1,2],[3,4],[5,6]];  
const newArr = myArr.flat();

浏览器支持

自2020年1月起，所有现代浏览器都支持 JavaScript Array flat()：
Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

拼接和切片阵列

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

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

JavaScript Array splice()

splice()方法可用于向数组添加新项：

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数 （2） 定义应添加****（拼接）新元素的位置。

第二个参数 （0） 定义应删除****的元素数。

其余参数（“Lemon”、“Kiwi”）定义要添加的新元素。

splice()方法返回一个包含已删除项的数组：

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.splice(2, 2, "Lemon", "Kiwi");

使用 splice()删除元素

通过巧妙的参数设置，您可以使用 splice() 删除元素，而不会在数组中留下“洞”：

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.splice(0, 1);

第一个参数 （0） 定义应添加（拼接）新元素的位置。

第二个参数 （1） 定义应删除****的元素数。

其余参数将被省略。不会添加任何新元素。

JavaScript Array slice()

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

此示例从数组元素 1 开始切出数组的一部分 （“橙色”）：

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

注意

slice()方法创建一个新数组。

slice()方法不会从源数组中删除任何元素。

此示例从数组元素 3 开始切出数组的一部分 （“苹果”）：

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

slice()方法可以接受两个参数，例如slice(1, 3)。

然后，该方法从 start 参数中选择元素，直到 （但不是 包括）结束参数。

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

如果省略了end参数（如在第一个示例中所示），则slice()方法将切除数组的其余部分。

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

自动 toString()

当需要原始值时，JavaScript 会自动将数组转换为逗号分隔的字符串。

当您尝试输出数组时，总是会出现这种情况。

这两个示例将产生相同的结果：

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

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

注意

所有 JavaScript 对象都有一个 toString()方法。

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

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

您将在下一个学习如何解决此问题 本教程的章节。

对数组进行排序

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

推荐教程