2. JavaScript Array

此文章用于歸納Array的所有方法


在JavaScript中,除了Object,用得最多的可能就是數組Array了。下面我們將一起來總結一下數組Array的所有方法。

首先總結一下Array的屬性:

  • Array.length:返回數組的長度。

然后總結一下Array的方法:

  • Array.from(arrayLike ,function):此方法接受2個參數,第一個參數接受一個類數組對象,第二個參數接受一個映射函數。該方法是將arrayLike轉換成真正的數組,如果有第二個參數,將會把第一個參數里的每一個元素在function中作用一遍,并返回結果,構成一個新數組,然后返回該數組。具體操作如下:
function arr(){
 return  Array.from(arguments, function(num){return num*2});   
}
arr(1,2,3,4);//[2, 4, 6, 8]
  • Array.isArray(obj):確定輸入的值是否是一個數組,如果是,返回true如果不是,返回false
  • Array.of():是創建數組的一種方法,它接受的每一個參數都將作為新構成數組的一個元素。該方法返回構建完成的數組。和Array()創建數組有稍微不同,具體如下:
Array.of(2);       // [2] 
Array.of(1, 2, 3); // [1, 2, 3]
Array(2);          // [ , ]或者[undefined × 2]
Array(1, 2, 3);    // [1, 2, 3]

最后總結Array實例的方法,也就是array.prototype的方法:

  • concat():該方法用于合并2個或多個數組,不會改變原數組,返回一個新數組。
var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1.concat(arr2);//["a", "b", "c", "d", "e", "f"]
arr1.concat(1,2,3)//["a", "b", "c", 1, 2, 3]
  • copyWithin(target, start = 0, end = this.length):該方法接受3個參數,其中第一個參數為目標位置(必選),第二個是起始位置(可選),第三個是結束位置(可選)。該方法的作用是將指定的一部分元素復制到同一個數組指定的位置替換掉,并返回數組。具體代碼如下:
//從第3個位置開始替換倒數第2個到倒數第1個元素,即5
[1,2,3,4,5,6].copyWithin(3,-2,-1)//[1,2,3,5,5,6]
//從第0個位置開始替換第2到第4的元素,即3,4
[1,2,3,4,5,6].copyWithin(0,2,4)//[3,4,3,4,5,6]
  • entries():將輸入的數組變為迭代器對象,可使用next()或者for of循環。具體代碼如下:
var a = ['a', 'b', 'c'];
var iterator = a.entries();
console.log(iterator.next()); //Object {value: Array(2), done: false}
for (let e of iterator) {
  console.log(e);
}
// [1, 'b']
// [2, 'c']
  • every(function):該方法接受一個函數作為參數,該函數可以有3個參數,第一個參數是當前正在處理的數組的元素,第二個參數為當前元素的索引,第三個參數為該數組本身。該方法主要的作用是遍歷每一個元素,看是否每一個元素都能通過function的測試,如果都通過,返回true,只要有一個沒通過,返回false。具體代碼如下:
[1,2,3,4,5,6].every(function(item,index){
   return item>5
})//false
[1,2,3,4,5,6].every(function(item,index){
   return item>0
})//true
  • some(function):與 every(function)類似。只要有一個元素滿足條件,返回true,沒有一個元素滿足條件,返回false
[1,2,3,4,5,6].some(function(item,index){
   return item>5
})//true
[1,2,3,4,5,6].some(function(item,index){
   return item>9
})//false
  • fill(value, start = 0, end = this.length):該方法接受3個參數,第一個參數為填充的值,第二個參數和第3個參數與copyWithin()類似。具體代碼如下:
//用3替換倒數第2個到倒數第1個元素,即5
[1,2,3,4,5,6].fill(3,-2,-1)//[1,2,3,4,3,6]
//用0替換第2到第4的元素,即3,4
[1,2,3,4,5,6].fill(0,2,4)//[1,2,0,0,5,6]
  • filter(function):該方法的function參數與every類似,不同的地方在于,該方法返回一個通過function測試的元素組成的新數組。具體代碼如下:
[1,2,3,4,5,6].filter(function(item,index){
   return item>5
})//[6]
[1,2,3,4,5,6].filter(function(item,index){
   return item>2
})//[3,4,5,6]
  • find(function):該方法的function參數與every類似,不同的地方在于,該方法返回第一個通過function測試的元素,如果都沒通過,返回undefined。具體代碼如下:
[1,2,3,4,5,6].find(function(item,index){
   return item>5
})//6
[1,2,3,4,5,6].find(function(item,index){
   return item>2
})//3
  • findIndex(function):該方法的function參數與every類似,不同的地方在于,該方法返回第一個通過function測試的元素的索引,如果都沒通過,返回-1。具體代碼如下:
[1,2,3,4,5,6].findIndex(function(item,index){
   return item>5
})//5
[1,2,3,4,5,6].findIndex(function(item,index){
   return item>2
})//2
  • forEach(function):該方法的function參數與every類似,不同的地方在于,該方法沒有返回值,只是將數組中每一個元素在函數中作用一遍。具體代碼如下:
var arr = [];
[1,2,3,4,5,6].forEach(function(item,index){
  if(item>2){ arr.push(item); }
})
console.log(arr)//[3, 4, 5, 6]
  • includes(element,fromIndex = 0):該方法接受2個參數,第一個參數是需要尋找的元素,第二參數可選,為從什么位置開始尋找。如果找到了,返回true,如果沒找到,返回false具體代碼如下:
var arr = [1,2,3]
arr.includes(2);//true
arr.includes(5);//false
arr.includes(2,2)//false
  • indexOf(element,fromIndex = 0):該方法接受2個參數,第一個參數是需要尋找的元素,第二參數可選,表示從什么位置開始尋找。找到了返回當前元素的位置,如果沒找到,返回-1具體代碼如下:
var arr = [1,2,3]
arr.indexOf(2);//1
arr.indexOf(5);//-1
arr.indexOf(2,2)//-1
  • lastIndexOf(element,fromIndex = 0):該方法接受2個參數,第一個參數是需要尋找的元素,第二參數可選,表示從什么位置開始尋找。如果找到了,返回給定的元素最后一次出現的位置,如果沒找到,返回-1具體代碼如下:
var arr = [1,2,3,1]
arr.lastIndexOf(2);//3
arr.lastIndexOf(5);//-1
arr.lastIndexOf(2,2)//-1
  • join(separator = ','):該方法接受1個參數(可選),將數組的所有元素以separator連接為字符串,并返回該字符串。具體代碼如下:
var a = ['a', 'b', 'c'];
a.join();      // 'a,b,c'
a.join(', ');  // 'a, b, c'
a.join(' + '); // 'a + b + c'
a.join('');    // 'abc'
  • keys():該方法作用于entries()類似,將對象變為可迭代的對象,但還是有所不同。具體代碼如下:
var a = ['a', 'b', 'c'];
var iterator = a.keys();
console.log(iterator.next()); //Object {value: 0, done: false}
for (let e of iterator) {
console.log(e);
}
//1
//2
  • map(function):該方法的function參數與every類似,不同的地方在于該方法返回一個由function作用之后的新數組,該方法。具體代碼如下:
[1,2,3,4,5,6].map(function(item,index){
return item*2
})//[2, 4, 6, 8, 10, 12]
  • pop():該方法會刪除最后一個元素并返回該元素,被刪除元素的數組長度減少1。具體代碼如下:
var arr = [1, 2, 3];
arr.pop();//3
console.log(arr); // [1, 2]
  • push(element):該方法會在最后添加一個元素并返回該數組的length。具體代碼如下:
var arr = [1, 2, 3];
arr.push(4);//4
console.log(arr); // [1,2,3,4]
  • reduce(function):該方法接受一個function作為參數,把數組的元素依次放入function中,得到的結果作為也作為參數傳入function,一直到所有元素作用完畢,返回最終結果。具體代碼如下:
var arr = [1,2,3,4,5,6]
arr.reduce(function(element1,element2){
    return element1+element2
})//21
  • reduceRight(function):該方法與reduce()類似,只不過執行順序是從右往左。具體代碼如下:
var arr = [1,2,3,4,5,6]
arr.reduceRight(function(element1,element2){
    return element1+element2
})//21
  • reverse()該方法是將數組中的元素順序反轉,并返回該數組。具體代碼如下:
var arr = [1,2,3,4,5,6]
arr.reverse()
  • shift():該方法和pop()類似,只不過pop刪除最后一個元素,shift()刪除第一個元素。
var arr = [1, 2, 3];
arr.shift();//1
console.log(arr); // [2, 3]
  • slice(start = 0,end=this.length):該方法接受2個參數,一個開始的位置,一個結束的位置(不包括結束的位置)。選擇數組的這一部分淺拷貝到一個新數組對象里面,并返回新數組。原數組不會改變。具體代碼如下:
var arr = [1,2,3,4,5,6]
//選擇第2和第4,即3,4
arr.slice(2,4)//[3,4]
console.log(arr)// [1,2,3,4,5,6]
  • splice(start = 0, deleteCount, element ...):該方法接受3個參數,第一個參數是修改的開始位置,第二個參數是可選的,表示要移除數組的個數,第3個參數是加入的元素。該方法返回被刪除的數組,并且原數組會被修改。具體代碼如下:
var arr = [1,2,3,4,5,6,7,8]
//從第2開始,刪除4個元素,并添加moonburn字符串
arr.splice(2,4,'moonburn')//[3,4,5,6]
console.log(arr)// [1,2,'moonburn',7,8]
  • sort(compareFunction):該方法接受一個參數(可選)。如果不輸入參數,會自發的給數組排序,默認排序順序是根據字符串Unicode碼點。也可以加入compareFunction,自己排序。具體代碼如下:
var arr = [1,20,3,40,5,60]
arr.sort(function(element1,element2){
    return element1>element2
})
console.log(arr)// [1, 3, 5, 20, 40, 60]
  • toLocaleString():數組的toLocaleString()會將所有的元素都作用一遍toLocaleString(),并拼接為字符串。具體如下:
var arr = [123,new Date(),'string']
arr.toLocaleString()//"123,2017-6-8 11:04:50,string"
  • toString()toLocaleString()類似,只是不帶地域特色。具體如下:
var arr = [123,new Date(),'string']
arr.toString()//"123,Thu Jun 08 2017 11:08:24 GMT+0800 (中國標準時間),string"
  • unshift(element····):將一個或多個元素添加到數組的開頭。返回新數組的length具體代碼如下:
var arr = [1,2,3,4];
arr.unshift('a','b');//6
console.log(arr);//["a", "b", 1, 2, 3, 4]
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379

推薦閱讀更多精彩內容