Js数组的操作push,pop,shift,unshift等⽅法详细介绍
js中针对数组操作的⽅法还是⽐较多的,今天突然想到来总结⼀下,也算是温故⽽知新吧。不过不会针对每个⽅法进⾏讲解,我只是选择其中的⼀些来讲。
⾸先来讲⼀下push和pop⽅法,这两个⽅法只会对数组从尾部进⾏压⼊或弹出,⽽且是在原数组进⾏操作,任何的改动都是会影响到操作的数组。push(args)可以每次压⼊多个元素,并返回更新后的数组长度。pop()函数每次只会弹出最后⼀个结尾的元素,并返回弹出的元素,如果是对空组数调⽤pop()则返回undefined。如果参数是数组则是将整个数组当做⼀个元素压⼊到原来的数组当中。并不会产⽣类似concat合并数组时产⽣的“拆分现象”,下⾯看例⼦
:
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
:
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如果为负数不做删除,因为不可能删除负个元素。
好了解释就到这边现在看⼀下例⼦,通过例⼦或许可以更好的理解
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,这个⽅法⽤来连接两个或多个数组,该数组不会改变原来的数组只会返回新的⼀个数组。连接的时候参数如果为数组,则连接的是数组中的元素。因为⽐较简单直接开始例⼦
:
var oldArr4=[1,2];
下⾯来讲数组中的排序⽅法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则表⽰不不会交换左右元素。现在来看⼀下例⼦
:
按照数字从⼤到⼩排列原有数组
复制代码代码如下:
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){
js合并两个数组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)–[]

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。