JavaScript 数组方法


目录

    显示目录

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

Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()

JavaScript 数组长度

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

JavaScript 数组 toString()

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

例子

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

结果 :

Banana,Orange,Apple,Mango

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

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

</body>
</html>

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

它的行为就像 toString(),但此外您还可以指定分隔符:

例子

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

结果 :

Banana * Orange * Apple * Mango

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>

<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>

<p id="demo"></p>

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

</body>
</html>

弹出和推送

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

这就是弹出和推送:

从数组中弹出项目,或推送项目 将项目放入数组中。



JavaScript 数组 pop()

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method returns the value that was "popped out":</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

JavaScript 数组 push()

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push() method appends a new element to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The push() Method</h2>

<p>The push() method returns the new array length:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

移动元素

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


JavaScript 数组 shift()

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>

<p>The shift() method removes the first element of an array (and "shifts" the other elements to the left):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method returns the element that was shifted out.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

JavaScript 数组 unshift()

unshift() 方法向数组添加一个新元素(在开头),并“unshifts” 旧元素:

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method adds new elements to the beginning of an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method returns the length of the new array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

改变元素

使用索引号访问数组元素:

数组索引从0开始:

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>Array elements are accessed using their index number:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

JavaScript 数组长度

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

JavaScript 数组 delete()

警告 !

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

使用删除会在未定义中留下漏洞 大批。

请改用 pop() 或 shift()。

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The delete Method</h2>

<p>Deleting elements leaves undefined holes in an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>

</body>
</html>

合并(串联)数组

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

示例(合并两个数组)

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

const myChildren = myGirls.concat(myBoys);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

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

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

示例(合并三个数组)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];

const myChildren = array1.concat(array2, array3); 

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

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

示例(将数组与值合并)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method can merge string values to arrays:</p>

<p id="demo"></p>

<script>
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter"); 
document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

展平数组

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

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

<p id="demo"></p>

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

浏览器支持

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

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

拼接和切片数组

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

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


JavaScript 数组 splice()

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

第二个参数 (0) 定义有多少个元素 已删除

其余参数(“Lemon”、“Kiwi”)定义新元素 已添加

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed; 
</script>

</body>
</html>

使用 splice() 删除元素

通过巧妙的参数设置,您可以使用 splice() 删除元素而不离开 数组中的“洞”:

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() methods can be used to remove array elements:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(0, 1);
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

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

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


JavaScript 数组 slice()

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

此示例从数组元素 1 开始切出数组的一部分 (“橙子”):

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 1 ("Orange"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

笔记

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

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

此示例从数组元素 3 开始切出数组的一部分 (“苹果”):

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 3 ("Apple")</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

slice() 方法可以采用两个参数,例如 slice(1, 3)

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>When the slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) the end argument:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

如果省略结束参数(如第一个示例中所示),则 slice() 方法切出数组的其余部分。

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 2 ("Lemon"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

自动toString()

JavaScript 会在以下情况下自动将数组转换为逗号分隔的字符串: 原始值是预期的。

当您尝试输出数组时,情况总是如此。

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

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

</body>
</html>

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>JavaScript automatically converts an array to a comma separated string when a simple value is expected:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>

</body>
</html>

笔记

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


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

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

您将在接下来的内容中了解如何解决这个问题 本教程的章节。


数组排序

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

完整的数组参考

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

完整的 JavaScript 数组参考。

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