Javascript中數(shù)組方法匯總(推薦)
Array.prototype中定義了很多操作數(shù)組的方法,下面介紹ECMAScript3中的一些方法
1.Array.join()方法
該方法將數(shù)組中的元素都轉(zhuǎn)化為字符串并按照指定符號(hào)連接到一起,返回最后生成的字符串,可以包含一個(gè)參數(shù),為連接數(shù)組元素的符號(hào),默認(rèn)為逗號(hào)。
var ay = [1,2,3]; ay.join(); // =>"1,2,3" ay.join("+"); // => "1+2+3" ay.join(" "); // =>"1 2 3" ay.join(""); // =>"123" var by = new Array(10) //新建一個(gè)長(zhǎng)度為10的空數(shù)組 by.join("-"); //=> "---------" 連接10個(gè)空元素
2.Array.reverse()方法
該方法將數(shù)組中的元素顛倒順序,返回逆序的數(shù)組,該方法會(huì)改變當(dāng)前數(shù)組,不會(huì)創(chuàng)建新數(shù)組。
var a = [1,2,3];
a.reverse().join(); //=>"3,2,1" ,此時(shí)a=[3,2,1]
3.Array.sort()方法
該方法將數(shù)組中的元素排序并返回排序后的數(shù)組。當(dāng)sort()方法不帶參數(shù)時(shí),數(shù)組按照字母表順序排序,如果數(shù)組包含undefined元素,會(huì)排到數(shù)組尾部。
var as = ["banana","cherry","apple"];
as.sort();
as.join("+ "); //=>"apple+ banana+ cherry"
我們也可以給sort()方法傳入一個(gè)比較函數(shù)作為參數(shù),讓數(shù)組以指定的比較函數(shù)進(jìn)行排序。比較函數(shù)返回值小于0,則第一個(gè)參數(shù)在前,相反返回值大于0,則第二個(gè)參數(shù)在前,兩個(gè)參數(shù)值相等,則返回0
var sy = [1111,222,4,33];
sy.sort(); //=>"1111,222,33,4"
sy.sort(function(a,b){
return a-b;
}); //=> "4,33,222,1111"
注:這里使用匿名函數(shù)最合適,因?yàn)橹徽{(diào)用一次,無(wú)需指定函數(shù)名稱
4.Array.concat()方法
該方法創(chuàng)建并返回一個(gè)新數(shù)組,連接原數(shù)組元素和方法中每個(gè)元素,組成一個(gè)新數(shù)組。該方法不會(huì)遞歸調(diào)用方法中的參數(shù)。
var a = [1,2,3];
a.concat(4,5); //=>"1,2,3,4,5"
a.concat([4,5]); //=>"1,2,3,4,5"
a.concat([4,5],[6,7]); //=>"1,2,3,4,5,6,7"
a.concat(4,[5,[6,7]]); //=>"1,2,3,4,5,[6,7]"
5.Array.slice()方法
該方法返回指定數(shù)組的一個(gè)片段或子數(shù)組,該方法可以有兩個(gè)參數(shù),分別制定片段的開(kāi)始和結(jié)束位置,返回的數(shù)組包含第一個(gè)參數(shù)指定的元素和所有到但不包含第二個(gè)參數(shù)指定的位置的數(shù)組元素。如果只有一個(gè)參數(shù),則包含從指定開(kāi)始位置到數(shù)組末尾,參數(shù)可以為負(fù)值,表示相對(duì)于數(shù)組中最后一個(gè)元素的位置。該方法不會(huì)修改被調(diào)用的數(shù)組。
var d =[1,2,3,4,5];
d.slice(1,2); //=>"2"
d.slice(1,-1); //=>"2,3,4"
d.slice(3); //=>"4,5"
d.slice(-3,-1); //=>"3,4"
6.Array.splice()方法
該方法是在數(shù)組中插入或刪除元素的通用方法,該方法會(huì)修改原始數(shù)組。該方法可以包含多個(gè)參數(shù),第一個(gè)參數(shù)指定要在數(shù)組中插入或刪除的起始位置,第二個(gè)參數(shù)制定了刪除元素的個(gè)數(shù),若不指定則將起始位置以及后面元素全部刪除,兩個(gè)參數(shù)之后的參數(shù)指定了插入數(shù)組的元素,該方法返回由刪除元素組成的數(shù)組。
var e = [1,2,3,4,5,6]; e.splice(4); //=> 返回[5,6] ; e是[1,2,3,4] e.splice(1,2); //=> 返回[2,3] ; e是[1,4] var f = [1,2,3,4,5]; f.splice(2,0,"a","b"); //=>返回[]; f是[1,2,a,b,3,4,5] f.splice(2,2,[6,7],3); //=>返回[a,b]; f是[1,2,[6,7],3,4,5]
7.push()和pop()方法
這兩個(gè)方法將數(shù)組當(dāng)做棧使用,push()方法是在數(shù)組尾部添加一個(gè)或多個(gè)元素,并返回?cái)?shù)組的長(zhǎng)度。pop()方法是刪除數(shù)組的最后一個(gè)元素,減少數(shù)組長(zhǎng)度并返回刪除的值。
8.unshift()方法和shift()方法
這兩個(gè)方法是在數(shù)組頭部進(jìn)行添加刪除操作,unshift()方法是在數(shù)組頭部添加一個(gè)或多個(gè)元素,返回?cái)?shù)組長(zhǎng)度。shift()方法是刪除數(shù)組第一個(gè)元素并返回。
var a=[]; //[] a.push(1,2); //[1,2] a.pop(); //[1] a.unshift(2,3); //[2,3,1] a.shift(); //[3,1]
9.toString()和toLocaleString()方法
這兩個(gè)方法是將數(shù)組每個(gè)元素轉(zhuǎn)化為字符串,toString()是將每個(gè)元素轉(zhuǎn)化為字符串并且輸出用逗號(hào)隔開(kāi)。toLocaleString()方法是數(shù)組每個(gè)元素調(diào)用toLocaleString()轉(zhuǎn)化為字符串,并使用本地化分隔符連接。
下面在介紹幾個(gè)ECMAScript5中特有的數(shù)組方法,在介紹方法之前首先做一個(gè)大致了解。大多數(shù)方法的第一個(gè)參數(shù)接受一個(gè)函數(shù),并且對(duì)數(shù)組每個(gè)元素調(diào)用一次這個(gè)函數(shù),如果說(shuō)稀疏數(shù)組,不存在的元素不調(diào)用函數(shù)。大多數(shù)情況下,調(diào)用的函數(shù)使用三個(gè)參數(shù):數(shù)組元素,元素的索引以及數(shù)組本身。
1.forEach()方法
該方法從頭到尾遍歷數(shù)組,數(shù)組每個(gè)元素都調(diào)用指定的函數(shù)。該方法在遍歷完所有數(shù)組元素之前不會(huì)終止。若想提前終止,必須將forEach()放到try塊中,并可以拋出異常。
var data=[1,2,3,4,5] var sum = 0; data.forEach(function(value){ //=>value為數(shù)組元素 sum+=value; }) //=>15 data.forEach(function(value,i,a){ //=>三個(gè)參數(shù)分別指代數(shù)組元素,元素索引和數(shù)組 a[i] = v+1; }) //=>data=[2,3,4,5,6]
2.map()方法
該方法將數(shù)組的每個(gè)元素傳遞給指定的函數(shù),并返回一個(gè)新數(shù)組,該數(shù)組包含了數(shù)組元素調(diào)用函數(shù)對(duì)應(yīng)的返回值。如果是稀疏數(shù)組,返回的新數(shù)組也是同樣結(jié)構(gòu)的系數(shù)數(shù)組。
var a=[1,2,3]; var b=a.map(function(v){ return v*v; }) //=> b=[1,4,9]
3.filter()方法--類(lèi)似于條件篩選
該方法返回的是原始數(shù)組的一個(gè)子集,傳遞的函數(shù)用來(lái)做邏輯判定,返回true或false,如果返回的值為true或可以轉(zhuǎn)化為true,則當(dāng)前數(shù)組元素就是子集的成員,添加到返回的數(shù)組中。該方法會(huì)跳過(guò)稀疏數(shù)組的空元素。
var a=[5,4,3,2,1] var smalla=a.filter(function(v){ return v<3; }) //=>返回[2,1] var everya=a.filter(function(v,i){ //=>i表示元素索引 return i%2==0; }) //=>返回[5,3,1]
4.every()和some()方法
這兩個(gè)方法是對(duì)數(shù)組進(jìn)行邏輯判定,對(duì)數(shù)組每個(gè)元素運(yùn)用指定函數(shù)進(jìn)行判定返回true或false。
every()方法是當(dāng)且僅當(dāng)數(shù)組中所有元素調(diào)用判定函數(shù)都返回true,才返回true,否則返回false。
some()方法是當(dāng)數(shù)組中至少有一個(gè)元素調(diào)用判定函數(shù)返回true,就返回true,否則返回false。
這兩個(gè)方法都是一旦確認(rèn)返回值后就不在遍歷數(shù)組元素了。
5.reduce()和reduceRight()方法
這兩個(gè)方法使用指定的函數(shù)將數(shù)組元素進(jìn)行組合,生成單個(gè)值。
reduce()需要兩個(gè)參數(shù),第一個(gè)是執(zhí)行化簡(jiǎn)組合的操作函數(shù),第二個(gè)是組合的初始值。和前面幾個(gè)方法不同的是,常見(jiàn)的三個(gè)參數(shù)(數(shù)組元素、元素索引和數(shù)組本身)會(huì)作為操作函數(shù)的2~4個(gè)參數(shù)傳遞給函數(shù),第一個(gè)參數(shù)是到目前為止進(jìn)行計(jì)算組合的結(jié)果。
如果是針對(duì)空數(shù)組,并不指定初始值時(shí)調(diào)用reduce()方法會(huì)導(dǎo)致類(lèi)型錯(cuò)誤異常。
reduceRight()方法和reduce()方法的工作原理相同,不同的是其按數(shù)組索引從高到低進(jìn)行處理(即從右到左進(jìn)行合并處理)
6.indexOf()和lastIndexOf()方法
這兩個(gè)方法都是用于在整個(gè)數(shù)組中搜索具體給定的值,并返回第一個(gè)匹配元素的索引值,若沒(méi)有則返回-1.indexOf()方法是從頭到尾進(jìn)行搜索,而lastIndexOf()是從尾到頭進(jìn)行搜索。
- JavaScript數(shù)組方法大全(推薦)
- JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
- js 定義對(duì)象數(shù)組(結(jié)合)多維數(shù)組方法
- 數(shù)組方法解決JS字符串連接性能問(wèn)題有爭(zhēng)議
- javascript中FOREACH數(shù)組方法使用示例
- js數(shù)組方法reduce經(jīng)典用法代碼分享
- js數(shù)組方法擴(kuò)展實(shí)現(xiàn)數(shù)組統(tǒng)計(jì)函數(shù)
- 基于JavaScript Array數(shù)組方法(新手必看篇)
- JavaScript基礎(chǔ)進(jìn)階之?dāng)?shù)組方法總結(jié)(推薦)
- 可能被忽略的一些JavaScript數(shù)組方法細(xì)節(jié)
相關(guān)文章
JavaScript實(shí)現(xiàn)加密與解密詳解
這篇文章介紹了JavaScript實(shí)現(xiàn)加密與解密詳解的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06JS Loading功能的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了JS Loading功能的簡(jiǎn)單實(shí)現(xiàn)。這個(gè)功能原理是很簡(jiǎn)單的,就是一個(gè)DIV遮蓋當(dāng)前頁(yè)面,然后Loading就在遮蓋DIV層上展示出來(lái)2013-11-11微信小程序開(kāi)發(fā)之麥克風(fēng)動(dòng)畫(huà) 幀動(dòng)畫(huà) 放大 淡出
本篇文章主要介紹了微信小程序開(kāi)發(fā)之麥克風(fēng)動(dòng)畫(huà):幀動(dòng)畫(huà)、放大、淡出的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04谷歌瀏覽器不支持showModalDialog模態(tài)對(duì)話框的解決方法
谷歌瀏覽器不支持showModalDialog模態(tài)對(duì)話框和無(wú)法返回returnValue,這個(gè)問(wèn)題,想必很多朋友都有遇到過(guò)吧,解決方法很簡(jiǎn)單,下面的思路,大家可以看看2014-09-09利用JScript中運(yùn)算符"||"和"&&"的特殊特性實(shí)現(xiàn)代碼精
利用JScript中運(yùn)算符"||"和"&&"的特殊特性實(shí)現(xiàn)代碼精簡(jiǎn)...2007-03-03JavaScript實(shí)現(xiàn)的字符串replaceAll函數(shù)代碼分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的字符串replaceAll函數(shù)代碼分享,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04Javascript 創(chuàng)建類(lèi)并動(dòng)態(tài)添加屬性及方法的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇Javascript 創(chuàng)建類(lèi)并動(dòng)態(tài)添加屬性及方法的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10uniapp實(shí)現(xiàn)app檢查更新與升級(jí)詳解(uni-upgrade-center)
UniApp是一個(gè)跨平臺(tái)的開(kāi)發(fā)框架,可以同時(shí)開(kāi)發(fā)iOS和Android應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)app檢查更新與升級(jí)(uni-upgrade-center)的相關(guān)資料,需要的朋友可以參考下2023-11-11