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

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)–[]

(0)

相关推荐

  • js数组与字符串的相互转换方法

    熟悉js的朋友很多都遇到过js的数组与字符串相互转换的情况,本文就此作一简单介绍,示例如下: 一.数组转字符串 需要将数组元素用某个字符连接成字符串,示例代码如下: var a, b; a = new Array(0,1,2,3,4); b = a.join("-"); 二.字符串转数组 实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回,示例代码如下: var s = "abc,abcd,aaa"; ss = s.split(","

  • javascript数据结构之串的概念与用法分析

    本文实例讲述了javascript数据结构之串的概念与用法.分享给大家供大家参考,具体如下: 串是由零个或多个字符组成的有限序列.串中字符的个数称为串的长度. 串中任意个连续的字符组成的子序列称为该串的子串.包含子串的串相应地称为主串.通常称字符在序列中的序号为该字符在串中的位置.子串的首字符在主串中首次出现的位置定义为子串在主串中的位置. 串的逻辑结构和线性表十分相似,区别仅仅在于串的数据对象约束为字符集.然而两者的基本操作有很大差别.线性表中,基本以单个元素来进行操作:而串中多半以串的整体也

  • JavaScript队列的应用实例详解【经典数据结构】

    本文实例讲述了JavaScript队列的应用.分享给大家供大家参考,具体如下: 和前面介绍的栈相反,队列是一种先进先出的线性表,它只允许在表的一端进行插入,而在另一端进行删除.JavaScript自己提供了两个队列方法shift和push方法,分别是出队和入队,其原理就是将元素插入数组最后一个和删除第一个元素. 这里需要注意一点,就是unshift方法的效率比push的效率要低很多.因为它要将入队之前的数组全部往前移动一位.这里我们就不用代码再次演示了. 和线性表类似,队列也分为顺序队列和链队列

  • JavaScript数据结构之数组的表示方法示例

    本文实例讲述了JavaScript数据结构之数组的表示方法.分享给大家供大家参考,具体如下: 数组类似于线性表.基本上每种语言都会讲数组作为固有类型.这里主要讲一下二维数组.我们可以把二维数组看成这样一个定长线性表:它的每个数据元素也是一个定长的线性表.数组一旦被定义,它的维数和维界就不再改变.因此,除了结构的初始化和销毁之外,数组只有存取元素和修改元素值的操作(这里注意和JavaScript中的array类型做出区分,这里说的是数据结构,而不是某一种单独语言的语法). 由于数组一般不作插入或者

  • javascript编程实现栈的方法详解【经典数据结构】

    本文实例讲述了javascript编程实现栈的方法.分享给大家供大家参考,具体如下: 栈是限定仅在表尾进行插入或删除操作的线性表,栈是先进后出的.栈的表尾称为栈顶(top),而表头端称为栈底(bottom). 和线性表类似,栈也有两种存储表示方法,顺序栈和链栈. 这里讲一下顺序栈,设置指针top指示栈顶元素在顺序栈中的位置.通常的做法就是以top=0表示空栈.base为栈底指针,top为栈顶指针. 如果base为null,则表示栈结构不存在,如果top=base则表示空栈.每当插入一个新的元素,

  • javascript数组去重常用方法实例分析

    本文实例讲述了javascript数组去重常用方法.分享给大家供大家参考,具体如下: 数组去除重复值是面试常考内容,也是很容易用到的一个技巧,下面就几种去重的方法进行介绍. 首先是最常见的方法,也就是添加一个临时数组,将原数组遍历,加入临时数组,每次加入时判断待加入的元素是否存在于临时数组中,代码如下: // 对数组进行去重操作,只考虑数组中元素为数字或字符串,返回一个去重后的数组 //第一种方法,遍历,将没有的插入临时数组 function uniqArray1(arr) { var n=[]

  • js数组循环遍历数组内所有元素的方法

    例,for(){}遍历数组 复制代码 代码如下: <script type="text/javascript"> <!--var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){ arr[i] = arr[i]/2.0;}alert(arr); //--> </script> 例,for in循环遍历数组 复制代码 代码如下: <html><body>

  • js二维数组定义和初始化的三种方法总结

    方法一:直接定义并且初始化,这种遇到数量少的情况可以用 var _TheArray = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]] 方法二:未知长度的二维数组 var tArray = new Array(); //先声明一维 for(var k=0;k<i;k++){ //一维长度为i,i为变量,可以根据实际情况改变 tArray[k]

  • JavaScript数据结构中栈的应用之表达式求值问题详解

    本文实例讲述了JavaScript数据结构中栈的应用之表达式求值问题.分享给大家供大家参考,具体如下: 下面来谈一个比较经典的表达式求值问题,这个问题主要是设计到操作符的优先级.我们通常看到的表达式都是中缀表达式,存在很多优先级差别,而后缀表达式则没有这些优先级问题.下面先看看两种表达式的区别. 中缀表达式:a*b+c*d-e/f      后缀表达式:ab*cd*+ef/- 从中缀表达式转换到后缀表示式是很难实现的,我们这里可以通过栈的思想来实现.下面进行详细的介绍是什么样的思想: 在对一个中

  • JavaScript数据结构中串的表示与应用实例

    本文实例讲述了JavaScript数据结构中串的表示与应用.分享给大家供大家参考,具体如下: 类似于线性表的顺序存储结构,用一组地址连续的存储单元存储串值的字符序列.下面我们以串联接为例,讲解一下这种存储结构时串的操作.JavaScript自带有concat方法,该方法返回字符串值,该值包含了两个或多个提供的字符串的连接. 其实思路很简单,就是将第二个串拼接在第一个串后面,代码如下 <!DOCTYPE html> <html> <head> <meta chars

  • JS简单实现数组去重的方法示例

    本文实例讲述了JS简单实现数组去重的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>JS数组去重</title> <meta http-equiv=&

  • JavaScript数组实现数据结构中的队列与堆栈

    一.队列和堆栈的简单介绍 1.1.队列的基本概念 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 如下图所示: 1.2.堆栈的基本概念 堆栈:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出! 如下图所示: 二. 在JavaScript中实现队列和堆栈 在JavaScript中实现队列和数组主要是通过数组,js数组中提供了以下几个方法可以让我们很方便实现队列和堆栈: •shift:从数组中把第一个元素删除,并返回这个元素的值. •unshift: 在数组

  • javascript数据结构中栈的应用之符号平衡问题

    本文实例讲述了javascript数据结构中栈的应用之符号平衡问题.分享给大家供大家参考,具体如下: 由于栈先进后出的结构,我们可以将其作为有用的工具,下面就介绍一下栈的应用. 首先是符号的平衡问题.有一串字符串,我们需要判断其中固定的字符是否成对出现,比如<> {} [] () 等.当然实现的方法有很多,但是采用栈的实现会相对更加简单. 实现上述算法的JavaScript代码如下 <!DOCTYPE html> <html> <head> <meta

随机推荐