JavaScript 陣列操作總整理

建立陣列的方法

• 實字模式：var ary = [1,2,3,4,5];
• 建構式：var ary = new Array(1,2,3,4,5);
• 現在大多數都是用實字模式，簡潔且速度較快，推薦使用
• 建構式效能較差，且其他地方有用到Array這個字時，也會出錯

1. some()

• 回傳boolan
• some表示任何一個，所以只要任何一個成立，就會回傳true
• 都沒有成立，就會回傳false

  var ary = [1,2,3,4,5];
  ary.some(function(a){
  return a>=5 // true
  })
  // ES6 arrow function
  ary.some(a => a >= 5 ); // true
  

2. every()

• 回傳一個boolan
• every表示每一個，所以必須要每一個都成立，才會是ture

  var ary = [1,2,3,4,5];
  ary.every(function(a){
  return a >= 0 // true
  })
  // ES6 arrow function
  ary.every(a => a >= 0 ); // true
  

3. splice()

• 兩種用法，1.插入資料 2.刪除資料
• array.splice(start[, deleteCount[, item1[, item2[, …]]]])，
  • start表示你的索引位置，要從這個位置做什麼事情
  • deleteCount表示要刪除的數量 (選擇性)
  • 從 start 開始，要加入到陣列的元素 (選擇性)
• 好記的方法：你要插在誰的前面
• 插入資料

  var ary = [1,2,3,4,5];
  ary.splice(2,0,"f") 
  // 2表示索引數位置，0表示不刪除東西，f表示要插入的元素
  結果: [1, 2, "f", 3, 4, 5]
  

• 刪除資料

  var ary = [1,2,3,4,5];
  ary.splice(2,2)  //把3、4刪掉，所以要從索引數2開始刪，刪除2個
  // [3, 4]
  

4. forEach()

• 純粹把資料拿出來去跑迴圈，每個元素都跑
• 跟for很像，只是寫法更簡潔

  var ary = ["a","b","c"]
  ary.forEach(function(a){
  console.log(a) // a b c
  })
  // ES6 arrow function
  ary.forEach(a => console.log(a))
  

5. unShift()

• 把元素插到最前面，可以一次不只一個

  var ary = ["a","b"]
  ary.unshift("ff","asd")
  // ["ff", "asd", "a", "b"]
  

6. shift()

• 拔出第一個元素

  var ary = ["q","ww"]
  ary.shift();
  // ["ww"]
  

7. pop()

• 拔出最後的一個元素

  var ary = ["q","ww"]
  ary.pop();
  // ["q"]
  

8. length

• 計算陣列長度

  var ary = ["q","ww"]
  ary.length;
  // 2
  

9. reduce()

• 陣列裡面元素做累加，從左邊到右邊
• 也可以做串接字串
• 可想成把陣列摺疊起來

• arr.reduce(callback[accumlator, currentValue, currentIndex, array], initialValue)

  • accumlator：累加器，前一個返回值
  • currentValue：當前的陣列元素
  • currentIndex：當前的陣列索引 (可選)
  • array：調用reduce的陣列 (可選)
  • initialValue：初始值 (可選)

• 數字累加

  var ary = [10,20,30,40,50,60,70,80,90,100]
  ary.reduce(function(prev,next){
     return prev + next
  }, 0); //550
  /* 第一次時prev是0，next是10，0+10 回傳10，
  第二次 prev變10，next變20，10+20 會傳30
  ......以此類推
  最後總和會是550
  */
  // ES6 arrow function
  ary.reduce((prev,next) =>  prev + next) // 550
  

• 串接字串

  var ary = ["q","w","s"]
  ary.reduce(function(prev,next){
     return prev + ":" + next
  });
  // "q:w:s"
  // ES6 arrow function
  ary.reduce((prev,next) =>  prev + ":" + next)
  

10. reduceRight()

• 跟reduce一樣，只是反過來，由右到左
• 數字沒差，但字串有差

  var ary = ["q","w","s"]
  ary.reduceRight(function(prev,next){
     return prev + ":" + next
  });
  // "s:w:q"
  

11. join()

• 自定義串接符號

  var ary = ["q","ww"]
  ary.join("=");
  // "q=ww"
  

12. reverse()

• 反轉陣列，顛倒過來

  var ary = [1,2,3,4,5,6,7,8,9,10]
  ary.reverse()
  // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
  

13. sort()

• 將陣列排序
• 如不帶值，預設是由小到大
• 字串排序

  var ary = ["q","w","a","b"]
  ary.sort();
  // ["a", "b", "q", "w"]
  

• 數字排序

    var ary = [1,3,2,50,12,60,40,23,12]
    ary.sort() 
    // [1, 12, 12, 2, 23, 3, 40, 50, 60]
  

  可以發現排序不如我們預期，這是因為sort()會把每個元素轉成字串做排序，所以在做數字排序會出錯。

要解決這個問題，我們可以自己寫個function去處理

var ary = [1,3,2,50,12,60,40,23,12]
var compare = function (a, b) {
     if(a > b){
         return 1
    }else{
         return -1
    }
}
ary.sort(compare) // [1, 2, 3, 12, 12, 23, 40, 50, 60]
// ES6 arrow function
var compare = (a, b) => a > b?  1: -1

14. push()

• 把元素插在陣列最後面
• 可以插多個

  var ary = ["a","b","c","d","e"];
  ary.push("f","g","h")
  console.log(ary); // ["a", "b", "c", "d", "e", "f", "g", "h"]
  

15. indexOf()

• 找array裡面有沒有某一個元素，有就會回傳索引數，找不到就會回傳-1

  var ary = [1,2,3,4,5,6,7,8,9,10]
  ary.indexOf(7); // 6
  

16. lastIndexOf()

• 找最後一個出現的

  var ary = [1,7,2,3,4,5,6,7,8,9,10,7]
  ary.lastIndexOf(7); // 11
  

17. includes()

• 找有沒有包含特定元素
• 回傳boolan

  const array1 = [1, 2, 3];
  console.log(array1.includes(2)); // true
  

18. find()

• 回傳第一個滿足條件的元素，否則回傳undefined

  const array1 = [5, 12, 8, 130, 44];
  const found = array1.find(element => element > 10); 
  // 12
  

19. fill()

• 把陣列中所有元素，替換為指定元素
• arr.fill(value[, start[, end]])
  • value：欲指定替換的元素
  • start：起始的索引
  • end：結束的索引

    var arr = [1, 2, 3];
    arr.fill(4);               // [4, 4, 4]
    arr.fill(4, 1);            // [1, 4, 4]
    arr.fill(4, 1, 2);         // [1, 4, 3]
    

20. map()

• var new_array = arr.map(function callback(currentValue[, index[, array]]) {
  // Return element for new_array
  }[,thisArg])
• currentValue：目前處理中的元素
• index：這個元素在這個陣列的索引數 (可選)
• array：當前元素所屬的陣列 (可選)
• thisArg：執行 callback 回呼函式的 this 值 (可選)
• 記得要用變數接，不然會拿不到，因為是產生新陣列

  var ary = [1,2,3,4,5,6,7,8,9,10]
  ary.map( function(item){
     return item + 1;
  } ); 
  // [2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  // ES6 arrow function
  ary.map(item => item + 1)
  

21. filter()

• 篩選、過濾

  var ary = [1,2,3,4,5,6,7,8,9,10]
  //篩出可以被2整除的數
  ary.filter(function(item){
     return item % 2 === 0;
  })
  // [2, 4, 6, 8, 10]
  // ES6 arrow function
  ary.filter(item => item % 2 === 0)
  

22. slice()

• arr.slice([begin[, end]])
  • begin：起始值
  • end：到哪一個前停止擷取
• 擷取陣列的某一個區段
• 他也可以複製你的陣列，但僅能做淺層複製，稍微複雜如[{abc:1},{abc:2}]就沒辦法
• 需做深層複製可參考 lodash deep clone array

• 擷取區段

  var ary = [“a","b","c","d"];
  ary.slice(1,3)
  // ["b", "c"]
  

• 複製陣列

  var ary1 = [1,2,3];
  var ary2 = ary1.slice();
  ary2.push(4)
  

你可能會好奇，這和一般的複製有什麼差別？

// 一般的複製
var ary1 = [1,2,3];
var ary2 = ary1;
ary2.push(4)

差別在，用一般的複製 push後ary1、ary2都會有4，因為共享參考的關係，
而用slice()就可以避免這個問題

23. concat()

• 陣列的連接，把兩個或多個陣列串再一起

  var ary = [{key:1},{key:2},{key:3}];
  ary.concat([1,2,3], ["a","b","c"])
  // [{key:1},{key:2},{key:3}, 1, 2, 3, "a", "b", "c"]
  

懶人包整理

Reference:
偷米騎巴哥 20180823 (圖解JavaScript陣列)
糙 code 出沒請小心!! 在 JavaScript 寫 for-loop