JS数组学习之如何在头部或尾部插入元素?
时间:2021-08-28
来源:互联网
标签:
今天PHP爱好者给大家带来JS数组学习之如何在头部或尾部插入元素的方法,在上一篇文章《JS数组学习之一维和二维数组的创建和访问》中,我们介绍了数组创建的多种方法。既然有了数组,我们就要操作数组,而最常见的操作就是添加或删除数组元素。这次我们先来给大家介绍插入数组元素的几种方式,之后再给大家介绍删除数组元素的方法。希望对大家有所帮助。
添加数组元素有多种方式:可以在数组开头或末尾添加,也可以根据数组下标在任意位置添加。今天我们就先来给大家介绍一下如何在数组开头或末尾插入元素。
在数组开头插入元素
在JavaScript中,我们可以使用unshift()函数来在数组开头插入元素,该函数能够把一个或多个参数值附加到数组的头部:
array.unshift(元素1, 元素2, ..., 元素X)
第 1 个参数 元素1
为数组新的元素 0,第 2 个参数 元素2
为新的元素 1,以此类推,最后返回添加元素后的数组长度。
我们通过下面的例子来具体看看:
var a = [0]; //定义数组
console.log(a); //返回[0]
a.unshift(1,2); //一次性增加两个元素
console.log(a); //返回[1,2,0]
var a = [0];
a.unshift(1); //增加元素1
a.unshift(2); //增加元素2
console.log(a); //返回[2,1,0]
可以看出:我们使用a.unshift(1,2)
来在a数组的开头按顺序插入两个数值1、2;使用a.unshift(1)在a数组的开头插入数值1,又在此基础上使用a.unshift(2)
在开头(即数值1前)插入数值2。因此输出结果为:
在数组末尾插入元素
在JavaScript中,我们可以使用push()或者concat() 方法来在数组尾部插入元素。下面一一介绍一下:
1、使用push()方法
push()方法能够把一个或多个参数值附加到数组的尾部,并返回添加元素后的数组长度。
array.push(元素1, 元素2, ..., 元素X)
我们通过下面的例子来具体看看:
var a = [0]; //定义数组
console.log(a); //返回[0]
a.push(1,2); //一次性增加两个元素
console.log(a); //返回[0,1,2]
var a = [0];
a.push(1); //增加元素1
a.push(2); //增加元素2
console.log(a); //返回0,1,2]
可以看出:我们使用a.push(1,2)
在a数组的尾部按顺序插入两个数值1、2;使用a.push(1)
在a数组的尾部插入数值1,又在此基础上使用a.push(2)
在尾部(即数值1后)插入一个数值2。因此输出结果为:
2、使用concat() 方法
1)、concat() 方法可以连接两个或多个数组,会将作为参数的一个或多个数组的元素添加到指定数组的尾部。
var a = [1,2,3];
var b = [4, 5, 6];
var c = [7,8];
var d = a.concat(b,c);
console.log(d);
concat() 方法会把作为参数的一维数组打散,分别作为单独的元素连接到数组的尾部。因此输出结果为:
但concat() 方法不能够全部打散二维数组,只能将二维数组包含的一维元素连接到数组的尾部
var a = [1,2,3,4,5];
var b = [[1,2,3], [4,5]];
var c = [[1,2,3], 3];
var d = a.concat(b,c);
console.log(d);
2)concat() 方法也可以插入给定的一个或多个元素,能够把传递的所有参数按顺序添加到数组的尾部。
var a = [1,2,3,4,5]; //定义数组
var b = a.concat(6,7,8); //为数组a连接3个元素
console.log(b); //返回[1,2,3,4,5,6,7,8]
输出结果为:
说明:concat() 方法将创建并返回一个新数组,而不是在原来的基础上添加新元素;但unshift()方法会在原数组基础上添加元素。
以上就是JS数组学习之如何在头部或尾部插入元素?的详细内容,更多请关注php爱好者其它相关文章!
-
如何注册谷歌账号(谷歌账号注册方法) 怎么跳过手机验证 时间:2025-09-29
-
access数据库8个经典实例 时间:2025-09-29
-
mmc.exe是什么进程 mmc.exe应用程序错误的原因及解决方法 时间:2025-09-29
-
4种基本的编程命名规范介绍(匈牙利命名法、驼峰式命名法、帕斯卡命名法、下划线命名法) 时间:2025-09-29
-
Ghostscript下载、安装教程 Ghostscript命令参数详解 时间:2025-09-29
-
Linux中内存管理NUMA架构详解 时间:2025-09-29
今日更新
-
揭秘网络四大梗:爆笑名场面背后的神转折,一次看懂全网热梗来龙去脉!
阅读:18
-
四大狗贼是什么梗?揭秘网络热词背后的爆笑真相,看完秒懂!
阅读:18
-
四大虐梗是什么梗?揭秘网络最扎心四大名场面,看完泪崩!
阅读:18
-
全境封锁手游需要什么配置-全境封锁手机配置
阅读:18
-
恋与制作人2025中秋节福利情报-登录可获得中秋赠礼
阅读:18
-
燕云十六声跑图长鸣玉获得方法-快速积攒长鸣玉
阅读:18
-
第五人格第四十赛季精华1时装囚徒黎明赋格设计公布
阅读:18
-
元梦之星美团皮肤怎么获取-圆梦美团皮肤获取
阅读:18
-
华夏绘世录中秋活动金秋献瑞明日开启-参与得奖励
阅读:18
-
QQ飞车T车孙悟空有什么特性-孙悟空赛车技能
阅读:18