向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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 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+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
js验证表单第二部分
2006/11/25 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
详解Python的Lambda函数与排序
2016/10/25 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
儿童编程python入门
2018/05/08 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
Python3的socket使用方法详解
2020/02/18 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
机械制造毕业生求职信
2014/03/03 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python