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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python中的heapq模块源码详析
2019/01/08 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python getopt模块使用实例解析
2019/12/18 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
python中with用法讲解
2020/02/07 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
房产公证书范本
2014/04/10 职场文书
入股协议书范本
2014/04/14 职场文书
竞选部长演讲稿
2014/04/26 职场文书
法定代表人证明书
2014/11/28 职场文书
质检员岗位职责
2015/02/03 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
关于 Python json中load和loads区别
2021/11/07 Python