向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 模式设计之工厂模式学习心得
Apr 27 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
js预加载图片方法汇总
Jun 15 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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
第四章 php数学运算
2011/12/30 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
JavaScript运算符小结
2015/06/03 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python中字符串的处理技巧分享
2016/09/17 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Tensorflow累加的实现案例
2020/02/05 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
大学生在校学习的自我评价
2014/02/18 职场文书
敬老院活动总结
2014/04/28 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android