向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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
Vue实现选择城市功能
May 27 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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的无限分类实现想法~
2007/01/02 PHP
php 将excel导入mysql
2009/11/09 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
js选项卡的实现方法
2015/02/09 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
JSONP基础知识详解
2017/03/19 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
经管应届生求职信
2013/11/17 职场文书
大学三年的自我评价
2013/12/25 职场文书
超市重阳节活动方案
2014/02/10 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
首都博物馆观后感
2015/06/05 职场文书
工商行政处罚决定书
2015/06/24 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
4种方法python批量修改替换列表中元素
2022/04/07 Python