向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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
js中的面向对象入门
2017/03/06 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
深入理解react 组件类型及使用场景
2019/03/07 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python使用chardet判断字符编码
2015/05/09 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Python属性和内建属性实例解析
2020/01/14 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python求凸包及多边形面积教程
2020/04/12 Python
python实现五子棋程序
2020/04/24 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python 字符串池化的前提
2020/07/03 Python
集体备课反思
2014/02/12 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
python 闭包函数详细介绍
2022/04/19 Python