JavaScript数组操作函数汇总


Posted in Javascript onAugust 05, 2016

js中数组操作函数还是非常多的,今天忽然想到来总结一下,也算是温故而知新吧。不过不会针对每个办法都进行一下总结,只是针对一些比较常用的做个备注一下。
这里总结到的 js 数组操作函数有:push,pop,join,shift,unshift,slice,splice,concat
(1)push 和 pop
这两个函数都是对数组从尾部进行压入或弹出操作。push(arg1,arg2,...)可以每次压入一个或多个元素,并返回更新后的数组长度。注意如果参数也是数组的话,则是将全部数组当做一个元素压入到原本的数组里面去。pop() 函数则每次只会弹出结尾的元素,并返回弹出的元素,若是是对空组数调用 pop() 则返回undefined。
示例:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))//这里只会将[5,6]当做一个元素来策画,返回更新后的数组长度5
此时 oldArr = [1,2,3,4,[5,6]]
oldArr.pop()//这里弹出最后一个元素[5,6],而不是6
此时 oldArr = [1,2,3,4]
oldArr.pop()-->4
oldArr.pop()-->3
oldArr.pop()-->2
oldArr.pop()-->1
alert(oldArr.pop())-->undefined(空数组弹出)

(2)unshift 和 shift
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。
请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。另外在 Internet Explorer 浏览器中 unshift() 无法执行!
如下示例,我们将创建一个数组,并把一个元素添加到数组的开头,并返回数组的新长度:

<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr.join())
</script>

输出:
George,John,Thomas
4
William,George,John,Thomas
shift() 用于将数组的第一个元素从原数组中删除,并返回第一个元素的值(即被删除的元素的值)。
注意:若数组是空的,那么 shift() 将不进行任何操纵,直接返回 undefined 值。另外该方法也不创建新数组,而是直接修改原有的 arrayObject。
示例:在本例中,我们将创建一个数组,并删除数组的第一个元素:

<script type="text/javascript">
var arr = new Array
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr.join())
</script>

输出:
George,John,Thomas
George
John,Thomas

(3)join()
作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。其作用和toString()相同。
语法
arrayObject.join(separator)
参数 separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
示例:

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())

输出
George,John,Thomas

(4)slice()
该方法可从已有的数组中返回选定的元素
语法
arrayObject.slice(start,end)
返回值
返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
注意:您可使用负值从数组的尾部选取元素。如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
示例:

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr.join())
</script>

输出:
George,John,Thomas
John,Thomas
George,John,Thomas

(5)splice()
该方法用于插入、删除或替换数组的元素。
语法
arrayObject.splice(index,howmany,element1,.....,elementX)
返回值
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
说明
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。需要注意的是 splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。
示例:
例子 1
在本例中,我们将创建一个新数组,并向其添加一个元素:

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,0,"William")
document.write(arr.join() + "<br />")
</script>

输出:
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
例子 2
在本例中我们将删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素:

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,1,"William")
document.write(arr.join())
</script>

输出:
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin
例子 3
在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素:

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,3,"William")
document.write(arr.join())
</script>

输出:
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

(6)contact()
该方法用于连接两个或多个数组。它不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
示例:
例子 1
在本例中,我们将把 concat() 中的参数连接到数组 a 中:

<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>

输出:
1,2,3,4,5
例子 2
在本例中,我们创建了两个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>

输出:
George,John,Thomas,James,Adrew,Martin
例子 3
在本例中,我们创建了三个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
document.write(arr.concat(arr2,arr3))
</script>

输出:
George,John,Thomas,James,Adrew,Martin,William,Franklin

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
Jquery获取当前城市的天气信息
Aug 05 #Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 #Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 #Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 #Javascript
同步文本框内容JS代码实现
Aug 04 #Javascript
JS打印组合功能
Aug 04 #Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
PHP中基本符号及使用方法
2010/03/23 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP chr()函数讲解
2019/02/11 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
教师自我评价范文
2013/12/16 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python