2014年12月4日 星期四

Javascript:陣列的基本操作、遍歷方式、Map/Reduce、排序、過濾



Javascript中,陣列(Array)是一個標準的集合,除了可以添加、刪除裡面的元素,還可以透過for循環來遍歷各個元素,以下將說明陣列(Array)的基本操作與遍歷方式。
一、基本操作

     (一)、建立陣列
var a = [5,2,8];
var a = new Array(5,2,8);
    (二)新增元素:unshift()、push()
        1.unshift():新增在陣列最前端
a.unshift(9);//a[9,5,2,8]     
        2.push()://新增在陣列最後端
a.push(9);//a[5,2,8,9]
    (三)刪除元素:shift()、pop()、delete a[index]
        1.shift():從陣列最前端移除
a.shift();//a[2,8]
        2.pop():從陣列最後端移除
a.pop();//a[5,2]
        3.delete array[index]:刪除某一元素
delete a[1];//a[5,8]
    (四)轉換成字串符號分隔的字串:join()
console.log(a.join(','));//"5,2,8"
    (五)連接兩個或多的數據組:concat(array1、array2....),另外也可以用來作字串連接
var a = [5,2,8];
var b = [9,10,11];
console.log(a.concat(b));//[5,2,8,9,10,11]
    (六)複製某一片段:slice(sourceIndex,targetIndex - 1)
var a = [5,2,8];
var copyArr = a.slice(1,a.length);
console.log(copyArr);//[2,8]
    (七)萬用的:splice(),允許你在任何位置刪除、插入元素,但會修改原數據組。
        1.參數說明:array.splice(index,howmany,item1,.....,itemX)
             (1)index:第幾個索引起
             (2)howmany:刪除幾個元素
             (3),item1,.....,itemX:加入的元素
        2.情況一:將2移除並在5跟8之間插入3、4的值。
var a = [5,2,8] 
a.splice(1,1,3,4);
console.log(a);//[5,3,4,8]
        3.情況二:第一個位置起全部刪除
var a = [5,2,8]
a.splice(1);
console.log(a);//[5]
    (八)反轉:reverse()
var a = [5,2,8]
console.log(a.reverse());//8,2,5

二、遍歷方式

    (一)forLoop:這種方式是屬於較具效率的方式,但當內容越多,可讀性就較差,最大的優點就是可以使用break、continue等來中斷。
var a = [5,2,8];
for (var i = 0;i < a.length;i++){
     console.log(a[i]);
}
    (二)forEach:需要一個callback function,在遍歷每個元素的時候都會調用一次這個function,而該function提供三個參數如下:
          ●value:元素值
          ●index:元素索引
          ●array:當前的陣列
var a = [5,2,8];
a.forEach(function(value,index,array){          
      console.log(value);
      console.log(index);
      console.log(array[index]);
})
    (三).some:測試陣列中是否符合某條件,類似.NET的LINQ(.Any(x => x.IsAwesome)),使用起來類似forEach提供一個callback function,一樣有value、index、array三個參數,其運作時會遍歷array,直到有一個callback function返回true,也可以看成類似下面的forLoop。
         1.forLoop
var a = [5,2,8];
for (var i = 0;i < a.length;i++){
     if (a[i] == 2) break;//find
}
        2. .some
var a = [5,2,8];
a.some(function(value,index,array){
      if (value == 2) {
          console.log(value);//印出了5跟2,因為2已找到則中斷
          return true;
      }
})
    (四).every:用法類似於.some,只是返回的是false,可以看作「陣列中每個條件都要符合」。
var a = [5,2,8];
a.every(function(value,index,array){
       if (value != 2) {
            console.log(value);//只印出5就中斷
            return false;
       }
})

三、Map/Reduce、排序、過濾

後來的javascript也加入了一些運算的函數(Map/Reduce)與資料的操作(排序、過濾)

    (一)Map:將原本的陣列映射到另一個陣列,過程中可以做一些加工,如下我們在映射過程中都將值+1

var a = [5,2,8];       
a = a.map(function(value,index,array){
        return value + 1;
})
console.log(a)
    (二)Reduce:.reduce(callback(previousValue, currentValue, index, array), initialValue),以下是用來作為陣列的加總。
var a = [5,2,8];
var sum  = a.reduce(function(previousValue,currentValue){
        return previousValue + currentValue;
})
console.log(sum);//15
    (三).sort:可以提供一個比較的函數來設計自己的sort,若未提供則預設會將元素轉換為字串符作為排序依據,但會出現不是我們所想要的結果。
        1.排序中callback function提供了三種return方式:
             ●callback(a,b) < 0,a會排在b前面。
             ●callback(a,b) = 0,不會改變。
             ●callback(a,b) > 0,a會排在b後面。
        2.未指定callback function造成的錯誤,我們期望的結果是2、5、8、10但卻非如此,因為它會轉成字串符做排序。
var arr = [5,2,8,10];
arr.sort();
console.log(arr);//[10,2,5,8]
3.參數函數通常會有兩個參數,用於傳遞陣列中的元素,並用排序規則操作,如果返回值大於0則兩數會交換。
var arr = [5,2,8];
arr.sort(function(a,b){
     return a - b; 
})
console.log(a);
(四).filter:過濾,可以根據條件進行過濾,一樣會帶入callback function,如下要過濾出>5的數字
var arr = [5,2,8]
var filterArr = arr.filter(function(value,index,array){
       return value > 5
})
console.log(filterArr)//[8]

沒有留言:

張貼留言