iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0

今天來整理那些 Array 方法們:)

陣列爲似列表的物件,利用索引值取內容值,透過 Array 所提供的方法,我們可以進行許多處理,今天就整理一下常見的這些 Array 方法。

開始之前來一個簡單的陣列

var arraytest = [1,2,3,4,5];

一、查看

  1. valueOf( ):用於陣列會回傳該陣列本身
console.log(arraytest.valueOf());  //[1,2,3,4,5]
  1. toString( ) :回傳陣列的字串形式
console.log(arraytest.toString()); //1,2,3,4,5
  1. join( ):指定特定參數作爲陣列內容的連接,若未指定任何參數,默認使用逗號
console.log(arraytest.join()); //1,2,3,4,5
console.log(arraytest.join("-")); //1–2–3–4–5

二、新增與刪除陣列元素

  1. unshift( ):新增第一個值,並回傳編輯後的陣列長度
var unshiftTest = arraytest.unshift(0);
console.log(arraytest);//[0, 1, 2, 3, 4, 5]
console.log(unshiftTest); //6
  1. push( ):新增最後一個值,並回傳編輯後的陣列長度
var pushTest = arraytest.push(6);
console.log(arraytest);//[1, 2, 3, 4, 5, 6]
console.log(pushTest); //6
  1. shift( ):刪除第一個值,並回傳被刪除的元素
var shiftTest = arraytest.shift();
console.log(arraytest);//[1, 2, 3, 4, 5]
console.log(shiftTest); //0
  1. pop( ):刪除最後一個值,並回傳被刪除的元素
var popTest = arraytest.pop();
console.log(arraytest);//[1, 2, 3, 4, 5]
console.log(popTest);//6

5.splice( ):可新增刪除,語法 array.splice(start[, deleteCount[, item1[, item2[, …]]]])start 表示開始編輯的位置; deleteCount 表示刪除的元素數量;item1, item2, … 表示從 start 開始,要加入陣列的元素,若無指定任何元素,則依照 startdeleteCount 刪除陣列的元素。回傳值爲被刪除的元素陣列。若沒有元素被刪除,則回傳空陣列。

  • 新增值,例如在第一個位置新增數字0
var addSplice = arraytest.splice(0,0,0);
console.log(arraytest); //[0, 1, 2, 3, 4, 5]
console.log(addSplice); //[]
  • 新增值,例如在第三個位置新增數字8
var addSplice2 = arraytest.splice(2,0,8);
console.log(arraytest); //[0, 1, 8, 2, 3, 4, 5]
console.log(addSplice2); //[]
  • 刪除值,例如在刪除第一個位置的 0
var deleteSplice = arraytest.splice(0,1);
console.log(arraytest); //[1, 8, 2, 3, 4, 5]
console.log(deleteSplice); //[0]
  • 刪除值,例如在刪除第二個位置的 8
var deleteSplice = arraytest.splice(1,1);
console.log(arraytest); //[1, 2, 3, 4, 5]
console.log(deleteSplice); //[8]
  • 刪除第一個值,並加上 8 及 9
var mixSplice = arraytest.splice(0,1,8,9);
console.log(arraytest); //[8, 9, 2, 3, 4, 5]
console.log(mixSplice); //[1]

三、遍歷

  1. map( ):將陣列中的所有元素依序傳入,並回傳每一次執行結果所組成的一個新陣列,不影響原陣列。map( )方法可以接收一個函數當做參數,map( ) 方法會傳入該函數三個參數,分別爲目前元素、目前索引值和原陣列。
var mapTest =[1, 2, 3];
var mapTestResult = mapTest.map(function (item,index,array) {
 return item + 2;
});
console.log(mapTest);// [1, 2, 3]
console.log(mapTestResult);// [3, 4, 5]

map( )方法不會跳過 undefinednull,但是會跳過空位。

var mapTest2 =[1, 2 ,undefined,,null];
var mapTestResult2 = mapTest2.map(function (item,index,array) {
 return item + 2;
});
console.log(mapTest2);// [1, 2, undefined, empty, null]
console.log(mapTestResult2);// [3, 4, NaN, empty, 2]
  1. forEach( ):與 map( ) 方法相似,但是不會回傳新陣列,而是對原陣列進行遍歷操作
var forEachTest =[1, 2, 3];
forEachTest.forEach(function (item,index,array) {
 console.log(item);
 //1
 //2
 //3
});

當我們需要得到操作後的新陣列,使用 map( ) 方法,否則使用 forEach( ) 即可。

四、其他

  1. slice( ): 回傳陣列的一部分,傳入兩個參數,第一個參數 start 代表自哪一個索引值開始取值,第二個參數 end,代表取值到哪一個值之前。此爲淺拷貝。
var arraytest = [1,2,3,4,5];
console.log(arraytest.slice(1,3)); //[2, 3]
  1. sort( ):對陣列元素進行排序,默認是以元素 Unicode 編碼位置從前到後依序比較排序,可以指定函數方法定義排序方式。函數方法回傳值若小於 0 (false),則前者排在後者前面(不更改排序);回傳值若大於 0 (true),則前者排在後者後面(更改排序)。
var sortTest =[112, 22, 32];
sortTest.sort();
console.log(sortTest); //[112, 22, 32]
//以編碼位置而非數字大小排列,因此112的第一個位置1是最小的,排序第一,接著是22的2,接著是32的3

var sortTest2 =[112, 22, 32];
sortTest2.sort(function(a,b){
 return a>b;
});
console.log(sortTest2); //[22, 32, 112]
  1. filter( ): 篩選出符合條件的陣列元素,並組合回傳一個新陣列,條件是 return 後方為 true 的陣列元素。
var filterTest = [1,2,3,4,5];
var filterTestResult = filterTest.filter(function(item,index,array){
 return item > 3;
});
console.log(filterTestResult); //[4, 5]
  1. reverse( ): 反轉排序所有陣列元素,不改變原陣列,回傳一個反轉排序後的新陣列
var reverseTest = [1,2,3,4,5];
var reverseTestResult = reverseTest.reverse();
console.log(reverseTestResult); //[5, 4, 3, 2, 1]

以上是今天對陣列方法的小整理,並非所有 Array 方法,有興趣可以到 MDN 一一查看。
/images/emoticon/emoticon34.gif


上一篇
Day28 JS 定時器使用方式及運作機制
下一篇
Day30 什麼是 RegExp 正則表達式 ?
系列文
前端之 " wow~原來是這樣啊 "30

尚未有邦友留言

立即登入留言