Array Methods

使用 methods 需要注意是否會修改原始資料。

Array length：獲取陣列長度。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
console.log(size); // 4

會更動原始陣列

Array splice()：使用 splice(begin, deleteCount, addItem) 向陣列中添加或刪除元素。（修改原始陣列）

begin : 起始 index 若為-1 則代表從倒數第一個開始算
deleteCount : 要刪除的個數
addItem: 要添加的元素

const months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb");
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]
 
months.splice(4, 1, "May");
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

Array sort()：對陣列的元素進行排序並回傳陣列。

array.sort(compareFunction);

const months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]
 
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]

升冪

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function (a, b) {
  return a - b;
});
console.log(numbers);
 
// [1, 2, 3, 4, 5]

升冪

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function (a, b) {
  return b - a;
});
console.log(numbers);
 
// [ 5, 4, 3, 2, 1 ]

不會更動原始陣列

（回傳陣列元素資訊、索引值、某個值、或產生新的陣列）

Array toString()：將陣列轉換為字串。

const array1 = [1, 2, "a", "1a"];
 
console.log(array1.toString());
// Expected output: "1,2,a,1a"

Array join()：與 toString() 類似，但還可以指定分隔符號。

const elements = ["Fire", "Air", "Water"];
 
console.log(elements.join());
// Expected output: "Fire,Air,Water"
 
console.log(elements.join(""));
// Expected output: "FireAirWater"
 
console.log(elements.join("-"));
// Expected output: "Fire-Air-Water"

Array slice()：使用 slice(begin, end) 從陣列中提取出指定範圍的元素，並返回一個新陣列。

const animals = ["ant", "bison", "camel", "duck", "elephant"];
 
console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]
 
console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]
 
console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]
 
console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]
 
console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]
 
console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

Array with()：使用括號方式改變 index 對應的 value，並返回一個新陣列

array.with(index, value);

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]

Array concat()：使用 concat 將兩個陣列合併成一個新陣列。

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
 
const numbers = num1.concat(num2, num3);
 
console.log(numbers);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

Array includes()：判斷陣列是否包含特定的元素，並以此來回傳 true 或 false。

const array1 = [1, 2, 3];
 
console.log(array1.includes(2));
// Expected output: true
 
const pets = ["cat", "dog", "bat"];
 
console.log(pets.includes("cat"));
// Expected output: true
 
console.log(pets.includes("at"));
// Expected output: false

對陣列內每個元素進行同樣處理

（迭代 Iteration）

Array forEach()：使用 forEach 對陣列中的每個元素進行迭代處理。

forEach(callbackFn);
forEach(callbackFn, thisArg);

const array1 = ["a", "b", "c"];
 
array1.forEach((element) => console.log(element));
 
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

Array map()：使用 map 對陣列中的每個元素進行處理並返回一個新陣列。

map(callbackFn);
map(callbackFn, thisArg);

const array1 = [1, 4, 9, 16];
 
// Pass a function to map
const map1 = array1.map((x) => x * 2);
 
console.log(map1);
// Expected output: Array [2, 8, 18, 32]

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];
 
const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));
 
console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]
console.log(kvArray);
// [
//   { key: 1, value: 10 },
//   { key: 2, value: 20 },
//   { key: 3, value: 30 }
// ]

Array filter()：使用 filter 根據指定的條件篩選陣列中的元素。

找出質數

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
 
function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num > 1;
}
 
console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

分類存款、取款

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
 
const deposits = movements.filter((mov) => mov > 0);
console.log(deposits); // [ 200, 450, 3000, 70, 1300 ]
 
const withdrawals = movements.filter((mov) => mov < 0);
console.log(withdrawals); // [ -400, -650, -130 ]

Array reduce()：使用 reduce 對陣列中的所有元素進行累積計算。

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

callback： 用於處理陣列中每個元素的函式，可傳入四個參數：

1. accumulator： 用來累積回呼函式回傳值的累加器（accumulator）或 initialValue（若有提供的話，詳如下敘）。累加器是上一次呼叫後，所回傳的累加數值。(like a snow ball)

2. currentValue： 原陣列目前所迭代處理中的元素。

3. currentIndex (選擇性)： 原陣列目前所迭代處理中的元素之索引。若有傳入 initialValue，則由索引 0 之元素開始，若無則自索引 1 之元素開始。

4. array (選擇性)： 呼叫 reduce() 方法的陣列。
- initialValue (選擇性)： 於第一次呼叫 callback 時要傳入的累加器初始值。若沒有提供初始值，則原陣列的第一個元素將會被當作初始的累加器。假如於一個空陣列呼叫 reduce() 方法且沒有提供累加器初始值，將會發生錯誤。

const array1 = [1, 2, 3, 4];
 
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);
 
console.log(sumWithInitial);
// Expected output: 10

帳戶餘額

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
 
const balance = movements.reduce((acc, cur, i) => {
  console.log(`Iteration ${i}: ${acc}`);
  return acc + cur;
}, 0);
 
console.log(balance);

Array entries()： 使用 entries 會回傳一個包含陣列中每一個索引之鍵值對（key/value pairs）的新陣列迭代器（Array Iterator）物件。

var a = ["a", "b", "c"];
var iterator = a.entries();
 
for (let e of iterator) {
  console.log(e);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

Array find()：使用 find 根據指定的條件查找陣列中的第一個符合條件的元素。

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];
 
function isCherries(fruit) {
  return fruit.name === "cherries";
}
 
console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }

實際應用例

References

Intro [JS] Object Methods