JavaScript – Array方法

陣列的操作是JavaScript 裡很重要也很常用到的技巧。

push() 新增值

let Drink = ['water', 'coffee'];
Drink.push('milk');   // ["water", "coffee", "milk"]

array[array.length] 新增值

let Drink = ['water', 'coffee'];
Drink[Drink.length]='milk';   // ["water", "coffee", "milk"]

pop() 移除最後一個值，回傳移除的值

let Drink = ['water', 'coffee','milk'];
let newMenu = Drink.pop();

console.log(Drink);   // ["water", "coffee"]
console.log(newMenu);   // milk

shift() 移除第一個值，回傳移除的值

let Drink = ['water', 'coffee','milk'];
let newMenu = Drink.shift();

console.log(Drink);   // ["coffee", "milk"]
console.log(newMenu);   // water

concat() 合併陣列，回傳新陣列

let Drink1 = ['water', 'coffee'];
let Drink2 = ['juice','milk'];
let newMenu = Drink1.concat(Drink2);   // ["water", "coffee", "juice", "milk"]

join() 將陣列依分隔符號合併成字串，預設是逗點，回傳字串。

let Drink = ['water', 'coffee',];
Drink.join('+');   // water+coffee

every() 檢查陣列是否全部都符合條件，回傳true / false。

every(function(value, index){…});

• value : 目前處理到的值。
• index : 值的索引位置。

  let num = [2, 0, 21, 9, 28];
  let test = num.every(function (value) {
      return value > 10;
  })
  
  console.log(test);   // false

some() 檢查陣列是否部分符合條件，回傳true / false。

some(function(value, index){…});

• value : 目前處理到的值。
• index : 值的索引位置。

  let num = [2, 0, 21, 9, 28];
  let test = num.some(function (value) {
      return value > 10;
  })
  
  console.log(test);   // true

filter() 篩選符合條件的值，回傳新陣列。

filter(function(value, index){…});

• value : 目前處理到的值。
• index : 值的索引位置。

  let num = [2, 0, 21, 9, 28];
  let test = num.filter(function (value) {
      return value > 10;
  })
  
  console.log(test);   // [21, 28]

forEach() 遍歷陣列，回傳undefined。

forEach(function(value, index){…});

• value : 目前處理到的值。
• index : 值的索引位置。

  let num = [2, 0, 21, 9, 28];
  let all = 0;
  let test = num.forEach(function (value) {
      all += value;
  })
  
  console.log(all);   // 60

map() 遍歷陣列，回傳新陣列。

map(function(value, index){…});

• value : 目前處理到的值。
• index : 值的索引位置。

  let num = [2, 0, 21, 9, 28];
  let test = num.map(function (value) {
      return value * 2;
  });
  
  console.log(test);   // [4, 0, 42, 18, 56]

indexOf() 找出值出現在陣列中的位置，回傳索引位置，沒找到則返回 -1。

let num = [2, 0, 21, 9, 28];
let test = num.indexOf(9)

console.log(test);   // 3

reverse() 倒轉陣列，回傳新陣列。

let num = [2, 0, 21, 9, 28];
let test = num.reverse()

console.log(test);   // [28, 9, 21, 0, 2]

sort() 重新排序陣列，回傳新陣列。

預設將值轉型成字串再比對每個字元的 Unicode code point 大小。
sort(function(a, b){…});

• a, b : 分別表示兩個比較的值，傳回一個數字。
• 回傳 : 數字小於 0 則 a 排序在 b 前面;大於 0 則 a 排序在 b 後面。

  let num = [2, 0, 21, 9, 28];
  let test = num.sort();
  
  console.log(test);   // [0, 2, 21, 28, 9]

  let num = [2, 0, 21, 9, 28];
  let test = num.sort(function (a, b) {
      return a - b;
  });
  
  console.log(test);   // [0, 2, 9, 21, 28]

unshift() 新增一個值到陣列最前面，回傳陣列長度。

let num = [2, 0, 21, 9, 28];
let test = num.unshift(6);

console.log(test);   // 6
console.log(num);   // [6, 2, 0, 21, 9, 28]

reduce() 遍歷陣列，由左至右傳入函式運算，回傳累加值。

reduce(function(allValue ,value, index){…});

• allValue : 目前累加的值。
• value : 目前處理到的值。
• index : 值的索引位置。

  let num = [2, 0, 21, 9, 28];
  let test = num.reduce(function(a,b){
      return a+ b;
  });
  
  console.log(test);   // 60

reduceRight() 遍歷陣列，由右至左傳入函式運算，回傳累加值。

reduceRight(function(allValue ,value, index){…});

• allValue : 目前累加的值。
• value : 目前處理到的值。
• index : 值的索引位置。

  let num = [2, 0, 21, 9, 28];
  let test = num.reduceRight(function(a,b){
      return a+ b;
  });
  
  console.log(test);   // 60

splice() 刪除、插入值到陣列中，回傳新陣列。

splice(索引位置, 刪除個數, 新值1, 新值2…)

let num = [2, 0, 21, 9, 28];
let test = num.splice(3,2);

console.log(test);   // [9, 28]
console.log(num);   // [2, 0, 21]

let num = [2, 0, 21, 9, 28];
let test = num.splice(3,2,12,30);

console.log(test);   // [9, 28]
console.log(num);   // [2, 0, 21, 12, 30]