前端必知必会-JavaScript数组方法（上）

文章目录

JavaScript数组方法
- [JavaScript 数组长度](#JavaScript 数组长度)
- [JavaScript 数组 toString()](#JavaScript 数组 toString())
- [JavaScript 数组 at()](#JavaScript 数组 at())
- [JavaScript 数组 join()](#JavaScript 数组 join())
- 弹出和推送
- - [JavaScript 数组 pop()](#JavaScript 数组 pop())
  - [JavaScript 数组 push()](#JavaScript 数组 push())
- 移动元素
- - [JavaScript 数组 shift()](#JavaScript 数组 shift())
  - [JavaScript 数组 unshift()](#JavaScript 数组 unshift())
- 更改元素
- [JavaScript 数组长度](#JavaScript 数组长度)
- [JavaScript 数组 delete()](#JavaScript 数组 delete())
- 合并数组（连接）
- [JavaScript 数组 concat()](#JavaScript 数组 concat())
总结

JavaScript数组方法

JavaScript 数组长度

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

示例

html 复制代码

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

JavaScript 数组 toString()

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

示例

html 复制代码

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

结果：

Banana,Orange,Apple,Mango

JavaScript 数组 at()

ES2022 引入了数组方法 at()：

示例

使用 at() 获取水果的第三个元素：

html 复制代码

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

使用 [] 获取水果的第三个元素：

html 复制代码

const fruit = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruit[2];

at() 方法从数组返回索引元素。

at() 方法返回与 [] 相同的结果。

自 2022 年 3 月起，所有现代浏览器均支持 at() 方法：

注意

许多语言允许使用负括号索引（如 [-1]）从对象/数组/字符串的末尾访问元素。

这在 JavaScript 中是不可能的，因为 [] 用于访问数组和对象。 obj[-1] 指的是键 -1 的值，而不是对象的最后一个属性。

ES2022 中引入了 at() 方法来解决这个问题。

JavaScript 数组 join()

join() 方法还将所有数组元素合并为一个字符串。

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

示例

html 复制代码

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

结果：

Banana * Orange * Apple * Mango

弹出和推送

使用数组时，可以轻松删除元素并添加新元素。

弹出和推送就是这样：

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

JavaScript 数组 pop()

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

示例

html 复制代码

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

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

示例

html 复制代码

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

JavaScript 数组 push()

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

示例

html 复制代码

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

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

示例

html 复制代码

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

移动元素

移动相当于弹出，但作用于第一个元素而不是最后一个元素。

JavaScript 数组 shift()

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

示例

html 复制代码

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

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

示例

html 复制代码

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

JavaScript 数组 unshift()

unshift() 方法将新元素添加到数组（在开头），并"取消移位"旧元素：

示例

html 复制代码

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

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

示例

html 复制代码

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

更改元素

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

数组索引从 0 开始：

[0] 是第一个数组元素

[1] 是第二个

[2] 是第三个...

示例

html 复制代码

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

JavaScript 数组长度

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

示例

html 复制代码

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

JavaScript 数组 delete()

警告！

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

请改用 pop() 或 shift()。

示例

html 复制代码

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

合并数组（连接）

在编程语言中，连接意味着将字符串首尾相连。

将"snow"和"ball"连接起来得到"snowball"。

连接数组意味着将数组首尾相连。

JavaScript 数组 concat()

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

示例（合并两个数组）

html 复制代码

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

const myChildren = myGirls.concat(myBoys);

注意

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

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

示例（合并三个数组）

html 复制代码

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

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

示例（将数组与值合并）

html 复制代码

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

总结

本文介绍了JavaScript数组方法（上）的使用，如有问题欢迎私信和评论