向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[js]获取url参数的代码
Oct 17 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
php-msf源码详解
2017/12/25 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
通过实例学习Python Excel操作
2020/01/06 Python
python随机模块random使用方法详解
2020/02/14 Python
python手写均值滤波
2020/02/19 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
关于python中remove的一些坑小结
2021/01/04 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
数据库笔试题
2013/05/09 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python