文章目录
- 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数组方法(上)的使用,如有问题欢迎私信和评论