Js数组的操作push,pop,shift,unshift等方法详细介绍


Posted in Javascript onDecember 28, 2012

js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧。不过不会针对每个方法进行讲解,我只是选择其中的一些来讲。

首先来讲一下push和pop方法,这两个方法只会对数组从尾部进行压入或弹出,而且是在原数组进行操作,任何的改动都是会影响到操作的数组。push(args)可以每次压入多个元素,并返回更新后的数组长度。pop()函数每次只会弹出最后一个结尾的元素,并返回弹出的元素,如果是对空组数调用pop()则返回undefined。 如果参数是数组则是将整个数组当做一个元素压入到原来的数组当中。并不会产生类似concat合并数组时产生的“拆分现象”,下面看例子

例1:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))?>5(这里只会将[5,6]当做一个元素来计算,返回更新后的数组长度5)
此时oldArr?>[1,2,3,4,[5,6]]
alert(oldArr.pop())?>[5,6](这里弹出最后一个元素[5,6],而不是6)
此时oldArr?>[1,2,3,4]
oldArr.pop()?>4
oldArr.pop()?>3
oldArr.pop()?>2
oldArr.pop()?>1
oldArr.pop()?>undefined(空数组弹出)
现在讲完push和pop再来看一下unshift和shift
这两个方法都是通过对数组的头部进行的操作,其他基本跟push和pop类似,但是在IE中unshift方法返回的是undefined

例2:
var oldArr2=[1,2];
oldArr2.unshift(3)?>undefined
此时oldArr2为?>[3,1,2]
oldArr2.shift()?>3
此时oldArr2为[1,2]
接下来看一下功能强大一点的splice,利用其可以进行数组随意位置的元素添加,删除 ,其操作也是在原有

数组上修改
splice(start,deleteCnt,args) 中的start表示开始操作下标,deleteCnt表示从开始下标开始(包括该元素)要删除的元素个数,删除操作返回删除的元素。args表示用来替换删除掉的那些元素(可以有多个参数),start和deleteCnt必须为数字,如果不是数字尝试转换,转换失败当做0来处理。splice必须至少有一个start元素,否则不做任何操作。deleteCnt不存在表示删除start及后面的全部元素(IE下,取0不做删除)。start可以为负数,表示从数组右边结尾处开始计算。deleteCnt如果为负数不做删除,因为不可能删除负个元素。
好了解释就到这边现在看一下例子,通过例子或许可以更好的理解

例3
var oldArr3=[1,2];
oldArr3.splice()?>”"(返回空的字符串,不做任何操作,操作后oldArr3?>[1,2])
oldArr3.splice(“”)?>[1,2](“”尝试转换为数字失败返回0,所以删除1,2,操作后oldArr3?>[],但是IE下有点恶心,不做任何操作)
oldArr3.splice(“1a”)?>同上
odlArr3.splice(0,2)?>[1,2](“从下标0的元素开始,删除两个元素1,2因此删除后oldArr3?>[])
oldArr3.splice(0,-1)?>”"(从0下标开始删除-1个元素,故等于没做任何操作,操作后oldArr3?>[1,2])
oldArr3.splice(1,1)?>2(从下标1 开始删除1个元素,即删除2,所以删除后oldArr3?>[1])
oldArr3.splice(1,4)?>2(从下标1 开始删除4个元素,1开始只有1个元素,故删除2,所以删除后oldArr3?>[1])
oldArr3.splice(-1,0,3)?>”"(从下标-1即2元素开始删除0个元素,然后添加元素3,所以操作后oldArr3?>[1,3,2])
oldArr3.splice(-1,1,3)?>2(从小标-1即2元素开始删除1个元素,然后添加元素3,操作后为oldArr3?>[1,3])
OK接下来开始讲concat,这个方法用来连接两个或多个数组,该数组不会改变原来的数组只会返回新的一个数组。连接的时候参数如果为数组,则连接的是数组中的元素。因为比较简单直接开始例子

例4:
var oldArr4=[1,2];
oldArr4.concat(3,4)?>[1,2,3,4]
oldArr4.concat(3,4,[5,6])?>[1,2,3,4,5,6](这边添加的是[5,6]中的元素5和元素6)
oldArr4.concat(3,[4,[5,6]])?>[1,2,3,4,[5,6]](这边最里层的元素[5,6]整个用来添加,而不是拆开)
下面来讲数组中的排序方法sort
sort(function)是针对原数组进行的排序,不会生成新的数组。默认sort()不带参数时按照数组中的元素转换成字符串进行比较,比较的时候按照字符在字符编码中的顺序进行排序,每个字符都有一个唯一的编码与其对应。

且看下面例子
var oldArr5=[3,1,5,7,17] 看这个一般观念上以为对oldArr5排序时oldArr5.sort()会按照数字从小到大排序即返回[1,3,5,7,17],但是看一下结果其实不然返回的是[1,17,3,5,7] 因为比较的时候都被转成字符串。然后对字符串进行一个个的比较如果第一个字符相同则比较第二个,否则直接返回比较结果,因为”17″<”3″所以可想而知排序的结果就不是一般印象中的那个结果了。

sort(function)方法除了默认的无参外还可以传入自定义的排序方法,这样排序的结果完全可以由自己来控制了,想怎么排就怎么排,是不是很爽啊,呵呵。 一般自定义的function比较函数,包含两个参数分别代表用来比较的左元素和右元素。然后通过一定方式返回一个结果,如果返回值大于0表示交换左右元素,如果返回值小于0或等于0则表示不不会交换左右元素。现在来看一下例子

例5:
按照数字从大到小排列原有数组

var oldArr5=[3,1,5,7,17]; //初始数组 
function mySort(left,right){ 
if(left<right){ 
return 1;}//如果左边元素小于右边元素则交换两数 
else{ 
return -1;}//如果左边元素大于等于右边元素不做交换 
}

当然上面的方法可以简化为funaction mySort(left,right){ return right-left;}
//按照偶数在前奇数在后排序 
var oldArr6=[3,6,7,18];//初始数组 
function mySort2(left,right){ 
if(left%2==0)return -1;//如果左边元素为偶数则不交换 
if(right%2==0)return 1; //如果右边元素为偶数则交换 
return 0; //不交换 
}

最后的slice不多讲,只是用来截取原数组中的部分元素,返回一个新的数组,原数组不会改变,其操作方式跟string的slice类似
var oldArr7=[1,2,3,4]; 
oldArr7.slice(0)?>[1,2,3,4] 
oldArr7.slice(0,2)?>[1,2] 
oldArr7.slice(0,0)?>[] 
oldArr7.slice(0,-1)?>[1,2,3] 
oldArr7.slice(-3,-1)?>[2,3] 
oldArr4.slice(-1,-3)?[]
Javascript 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 #Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 #Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 #Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 #Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 #Javascript
JS声明变量背后的编译原理剖析
Dec 28 #Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
js控制input输入字符解析
2013/12/27 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
js读取本地文件的实例
2017/12/22 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Python如何实现FTP功能
2020/05/28 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
合伙购房协议样本
2014/10/06 职场文书
2014年团支书工作总结
2014/11/14 职场文书
后勤工作个人总结
2015/02/28 职场文书
清明节主题班会
2015/08/14 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS