前端必知必会-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数组方法(上)的使用,如有问题欢迎私信和评论

相关推荐
秦jh_37 分钟前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2131 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy1 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪2 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞2 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-2 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与2 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun2 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
前端郭德纲2 小时前
浏览器是加载ES6模块的?
javascript·算法