在上一篇文章《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。因此输出结果为:

1.png

在数组末尾插入元素

在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.png

3、使用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() 方法会把作为参数的一维数组打散,分别作为单独的元素连接到数组的尾部。因此输出结果为:

5.png

但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);

6.png

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]

输出结果为:

4.png

说明:concat() 方法将创建并返回一个新数组,而不是在原来的基础上添加新元素;但unshift()方法会在原数组基础上添加元素。

好了,就说到这里了,有需要的可以看:javascript高级教程

以上就是JS数组学习之如何在头部或尾部插入元素?的详细内容,更多请关注亿码酷站其它相关文章!


JS数组学习之如何在头部或尾部插入元素?
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除

下载声明:
  • 本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压;
  • 本站资源来源于用户分享、互换、购买以及网络收集等渠道,本站不提供任何技术服务及有偿服务,资源仅提供给大家学习研究请勿作它用。
  • 赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持,如果你喜欢该程序,请购买正版!
  • 版权声明:
  • 下载本站资源学习研究的默认同意本站【版权声明】若本站提供的资源侵犯到你的权益,请提交版权证明文件至邮箱ymkuzhan#126.com(将#替换为@)站长将会在三个工作日内为您删除。
  • 免责声明:
  • 您好,本站所有资源(包括但不限于:源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来,并未取得原始权利人授权,因此禁止一切商用行为,仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除,一切因下载人使用所引起的法律相关责任,包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读,理解、同意以上内容,如对以上内容持有异议,请勿下载,谢谢配合!支持正版,人人有责,如不慎对您的合法权益构成侵犯,请联系我们对相应内容进行删除,谢谢!