javascript数组操作总结

最近看完了《JavaScript高级程序设计》这本书的数组类型的数据结构部分,在这里简单总结我所学到的知识。

一、数组的创建

数组的创建有两种方法,一种是通过字面量,另一种是通过Array构造函数。
1.字面量

var num1 = [1,2,3];

值得注意的是,利用字面量创建数组时,不可在最后一个数组元素添加“,”,因为在老版本的浏览器中,会出现bug。如下面的例子,在num2中,会创建一个包含1,2,3,undefined四个项或包含1,2,3三个项的数组。

var num2 = [1,2,3,];//不推荐的写法

2.Array构造函数

var num3 = new Array();//空数组

Array()可接收包含项作为参数,这时,会创建包含传入项的数组,如num4。

也可接收一个类型为number的数字作为参数,这时,会创建数组长度为该数字的数组,如num5。

var num4 = new Array("1","2","3");//相当于["1","2","3"]
var num5 = new Array(3);//length为3,元素均为undefined的数组
二、数组的转换

关于数组的转换,这里只提数组转换成字符串的两种方法。分别是toString()和join()。
1.toString()
该方法会返回数组各个项以逗号隔开的字符串。在使用alert(array)方法打印数组时,会隐性调用toString()方法。

var num6 = [1,2,3];
var num6Str = num6.toString();//"1,2,3"
alert(num6);//"1,2,3"

2.join()
join()只接收一个参数,该参数为数组中各项拼接的字符串,若不传参,默认为用“,”作为分隔符,效果相当于toString()方法。

var num7 = [1,2,3];
num7.join("$");//"1$2$3"
num7.join();//"1,2,3"
三、栈方法

栈是一种先进先出的数据结构,而数组提供的push()和pop()方法类似栈的行为,所以叫栈方法。
1.push()
push()方法可以接收多个参数,把它们依次添加至数组末尾,并返回修改后数组长度。

var num8 = [1,2,3];
var num8Length = num8.push(4,5);
alert(num8);//1,2,3,4,5
alert(num8Length);//5

2.pop()
pop()方法是将数组的最后一项移除,并返回移除项。

var num9 = [1,2,3];
var last = num9.pop();//3
四、队列方法

1.shift()
shift()方法是将数组的第一项移除,并返回移除项。

var num10 = [1,2,3];
var first = num10.shift();//1

2.unshift()
unshift()方法与shift()方法用途相反,该方法可以接收多个参数,将参数依次加入数组的前端,并返回修改后数组的长度。

var num11 = [1,2,3];
var addArray = num11.unshift("-1","0");//5
五、重排序方法

1.reverse()
reverse()方法是使数组中的项进行反转,并返回经过排序后的数组。

var num12 = [1,2,3];
num12.reverse();//[3,2,1]

2.sort()
sort()方法是默认为按照ASCII码进行顺序排序。在使用sort()方法时,会先隐性调用toString()方法将数组中的每一项进行字符串转化,实际上是进行字符串ASCII进行排序,并返回排序后的数组。

对于数组项中均为number类型的数据,我们可以在sort()中传入一个比较函数,该比较函数接收两个参数,第一个参数为前一项,第二个参数为后一项。将两个参数进行对比,若return的值>0,则将两个对比项进行调换位置,调换位置的项,再与较前的一项进行对比,依次类推,直到return值返回为0或者<0为止。

在比较函数中,return值>0,数组项调换位置;return值<0,数组项不调换位置;return值=0,意味着两项相等,数组项不调换位置。

var num13 = [3,2,7,14,111,0];
num13.sort(function(value1,value2){
    return value1-value2;
});
alert(num13);//0,2,3,7,14,111
六、操作方法

1.concat()
concat()方法是将数组与数组进行连结或者将数组项添加至数组末尾。

concat()会创建当前数组的一个副本,然后将接收到的参数依次添加到这个副本的末尾。如果没有传入参数,则返回的是当前数组的副本,相当于数组的复制;如果传入一个或多个数组参数,则会在副本的末尾依次添加数组参数中的每一个项;如果传入的是一个或多个非数组类型的数据,则这些值会依次被添加至副本的末尾。

注:可利用concat()方法返回一个新数组的特性用于数组的复制。

var num14 = [1,2,3];
var num15 = num14.concat([4,5],[6,7]);
alert("参数为多个数组时:"+num15);//1,2,3,4,5,6,7
var num16 = num14.concat(4,5);
alert("参数为非数组时:"+num16);//1,2,3,4,5

2.slice()
slice()可以基于当前数组中的一个或多个项创建一个新的数组,并返回新的数组。

slice()可以接收一个或两个参数,即要返回项的起始位置和结束位置。当只有一个参数时,会返回从该参数指定的位置开始到数组的末尾位置;传入两个参数时,会返回从起始位置到结束位置前一项的数组项。

注:可利用slice(0)方法返回一个新数组的特性用于数组的复制。

var num17 = [1,2,3];
num17.slice(1);//[2,3]
num17.slice(1,2);//[2]

3.splice()
splice()方法是比较强大的数组操作方法。因为可以利用该方法对数组进行删除,插入和替换操作。
删除:splice(index,number),只需要传入两个参数,index为删除的第一项位置,number为删除的项数。
插入:splice(index,0,value1,value2,...),需要至少传入三个参数,index为从位置index处插入value1,value2...。
替换:splice(index,number,value1,value2...),需要至少传入三个参数,index为开始替换的位置,number为替换的项数,value1,value2等是替换的项。
返回值:splice()方法返回的始终是一个数组,若有删除项,则返回含有所有被删除项的数组,若没有删除项,这返回空数组。

var num18 = [1,2,3];
//删除操作
num18.splice(0,2);//返回[1,2],此时num18 = [3]
//插入操作
num18.splice(1,0,4,5,6);//返回[],此时num18 =[3,4,5,6]
//替换操作
num18.splice(2,2,3,3);//返回[5,6],此时num18 = [3,4,3,3]
七、位置方法

位置方法包含了两种方法,分别为indexOf()和lastIndexOf(),两个方法都接收两个参数,第一个参数为查找项,第二个参数(可选)为查找的起始位置,都返回查找项所出现的第一个位置,没有找到则返回-1。查找项和数组中的每一项进行比较时,使用使用的是全等操作符===,故需要值和数据类型一致。

1.indexOf()
indexOf(value)该方法是从数组的开头开始查找值为value的项。
indexOf(value,index)该方法是从下标为index的项开始查找值为value的项。

var num19 = [1,2,3];
num19.indexOf(1);//返回0
num19.indexOf(3,1);//返回2

2.lastIndexOf()
lastIndexOf(value)该方法是从数组的末尾开始查找值为value的项。
lastIndexOf(value,index)该方法是从数组末尾开始往前(从0开始)index的项开始向数组开头查找值为value的项。

var num20 = [1,2,3];
num20.lastIndexOf(1);//返回0
num20.lastIndexOf(1,1);//返回0
八、迭代方法

1.every()
every(function(item,index,array){reutrn...;})对数组的每一项都传入给定函数,如该函数对每一项都返回true,则返回true,否则为false。(类似且操作符)

var num21 = [1,2,3];
var every = num21.every(function(item,index,array){
    return (item>0);
});//true
var every1 = num21.every(function(item,index,array){
    return (item>2)
});//false

2.some()
some(function(item,index,array){return...})对数组的每一项都传入给定函数,如函数对某一项返回true,则返回true,否则为false。(类似或操作符)

var num22 = [1,2,3];
var some= num21.some(function(item,index,array){
    return (item>2);
});//true
var some1= num22.some(function(item,index,array){
    return (item>6)
});//false

3.forEach()
forEach(function(item,index,array){})对数组的每一项都传入给定函数,没有返回值。(类似for循环)

var num23 = [1,2,3];
num23.forEach(function(item,index,array){
    console.log(item);
});

4.map()
map(function(item,index,array){})对数组的每一项都传入给定函数,返回值为对数组操作后的数组。

var num24 = [1,2,3];
num24.map(function(item,index,array){
    return item+2;
});//[3,4,5]

5.filter()
filter(function(item,index,array){})对数组的每一项都传入给定函数,返回值为给定函数返回为true的项组成的数组。

var num25 = [1,2,3];
num25.filter(function(item,index,array){
    return (item>2);
});//[3]
九、归并方法

归并方法有两个,分别为reduce()和reduceRight()。该两个方法接收两个参数,分别为给定函数和pre初始值(可选)。均迭代数组的每一项传入给定函数,并构造一个最终返回值。

1.reduce()
reduce(function(pre,cur,index,array){return...})从第一项开始,迭代时,会将给定函数返回的值作为pre参数给到下一次迭代,直到最后。cur指当前项,index为当前项下标,array为调用的数组。

var num26 = [1,2,3];
//只传给定函数
num26.reduce(function(pre,cur,index,array){
    return pre+cur;
});//6
//传入给定函数和pre初始值
num26.reduce(function(pre,cur,index,array){
    return pre+cur;
},4);//10

2.reduceRight()
reduceRight()和reduce()方法除了从数组的末尾还是开始开始遍历不同外,其他都一致。reduceRight()是从数组末尾开始遍历。

对于javascript的数组操作总结就到这里了。若有什么错误的地方请大家指正,谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352

推荐阅读更多精彩内容