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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 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
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
JavaScript 私有成员分析
2009/01/13 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
使用impress.js制作幻灯片
2015/09/09 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
python交互模式基础知识点学习
2020/06/18 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
python的dict判断key是否存在的方法
2020/12/09 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
儿科护士自我鉴定
2013/10/14 职场文书
资料员的岗位职责
2013/11/20 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
留学推荐信怎么写
2015/03/26 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
合同纠纷调解书
2015/05/20 职场文书