向JavaScript的数组中添加元素的方法小结


Posted in Javascript onOctober 24, 2015

在数组的开头添加新元素 - unshift()
源代码:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to add elements to the array.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>

<p><b>Note:</b> The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be <em>undefined</em>.</p>

</body>
</html>

测试结果:

Lemon,Pineapple,Banana,Orange,Apple,Mango

在数组的第2位置添加一个元素 - splice()
源代码:

<!DOCTYPE html>
<html>
<body>
​
<p id="demo">Click the button to add elements to the array.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
​
</body>
</html>

测试结果:

Banana,Orange,Lemon,Kiwi,Apple,Mango

数组的末尾添加新的元素 - push()
源代码:

<!DOCTYPE html>
<html>
<body>
​
<p id="demo">Click the button to add a new element to the array.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
​
function myFunction()
{
fruits.push("Kiwi")
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
​
</body>
</html>

测试结果:

Banana,Orange,Apple,Mango,Kiwi

下面就提供一下上文中的一些函数

数组的创建

var arrayObj = new Array(); //创建一个数组
var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值

要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。

数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。

数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值
数组元素的删除
arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向
arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向

数组元素的排序

arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址
arrayObj.sort(); //对数组元素排序,返回数组地址

Javascript 相关文章推荐
javascript与CSS复习(三)
Jun 29 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 #Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 #Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 #Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 #Javascript
js判断日期时间有效性的方法
Oct 24 #Javascript
JavaScript中日期的相关操作方法总结
Oct 24 #Javascript
JavaScript中Date对象的常用方法示例
Oct 24 #Javascript
You might like
Protoss建筑一览
2020/03/14 星际争霸
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
jquery 图片轮换效果
2010/07/29 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
幼师自荐信范文
2013/10/06 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
2022年四月新番
2022/03/15 日漫
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
HDFS免重启挂载新磁盘
2022/04/06 Servers
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang