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]