JS 筆記 -常用的陣列方法

雖然不完全是 ES6 語法糖，但在比較舊的瀏覽器就無法支援這些語法，所以使用上要注意，透過下方幾個語法，可以精簡的處理陣列資料的程式碼。

範例資料

本次皆使用下方陣列資料 (除了 sort() 以外)：

const arr = [
  {
    name: "Abby",
    money: 5000,
  },
  {
    name: "Ben",
    money: 6500,
  },
  {
    name: "Cathy",
    money: 7500,
  },
  {
    name: "Danny",
    money: 8000,
  },
];

forEach & map

這兩個語法大概有 87% 像，但又有點不同，這兩個語法都跟 for 迴圈的功能類似，原生語法要取得陣列資料會這樣寫：

// 資料長度
let arrLen = arr.length;
console.log(arrLen); //4
//for
for (let i = 0; i < arrLen; i++) {
  console.log(arr[i]);
}

forEach

使用 forEach 更精簡的寫法，方式是在資料名稱後方加入 forEach 語法，後面接一個 function，參數分別帶入。

1
2
3

arr.forEach(function (item, index, array) {
  console.log(item, index, array);
});

item: 代表陣列資料的內容，這邊陣列資料中的資料為物件。
index: 索引位置，從 0 開始。
array: 代表陣列資料本身(基本上沒有使用)。

若在 item 增加一個 icash 資料新增金額，可以這樣寫：

arr.forEach(function (item, index, array) {
  item.icash = item.money + 500;
  console.log(item, index, array); //money 會得到 5500, 7000, 8000, 8500。
});

forEach 本身不會回傳。

map

承上，把 forEach 換成 map，得到的結果也會相同。

arr.map(function (item, index, array) {
  item.icash = item.money + 500;
  console.log(item, index, array); //money 會得到 5500, 7000, 8000, 8500。
});

如果要使用 map 回傳一個新的陣列資料可以這樣寫：

const newArr = arr.map(function (item, index, array) {
  return {
    ...item, //拆解 item 資料，新增一個變數為newArr，併重新回傳資料到新變數中。
    icach: item.money + 500, //分別在 ...item 中增加 icash 這個屬性與內容。
  };
});
console.log(newArr); //會得到四個物件。

newArr 跟 arr 會是兩個不同的陣列資料。

map 本身會回傳，類似於 return 的功能。

一般使用回傳的特性，會拿來做篩選，但 map 若沒有使用 return 語法，會回傳 undefined，所以 map 不適合拿來做篩選的功能。

filter & find

filter

filter 寫法跟上方一樣，return 的值也很單純，只有 true 或 false，

const filterArr = arr.filter(function (item, index) {
  return true;
});
console.log(filterArr); //true 得到四個物件資料，false 得到一個空陣列。

若今天要篩選 money 小於 6000 的方法可以這樣寫：

const filterArr = arr.filter(function (item, index) {
  if (item.money < 7000) return true;
});
console.log(filterArr); // 得到 Abby 跟 Ben

filter 會篩選所有相符的條件並做回傳，回傳的資料會是一個陣列。

find

find 跟 filter 有點像，

const findArr = arr.find(function (item, index) {
  if (item.money < 7000) return true;
});
console.log(findArr); // 找到 Abby 一筆資料就停止

find 找到相符的一筆資料後就會停止，只會回傳一次，回傳的資料會依照 item 的內容照實回傳，EX. 是字串就回傳字串，比較適合用來找 id 或是指定的元素。

every & some

這兩種語法基本上一樣，都是回傳布林值，差別如下：

every 需所有條件相符才會回傳 true，有一條件不符就會回傳 false。
some 只要有部分條件相符就會回傳 true。

程式碼如下：

every

const newArr = arr.every(function (item, index) {
  return item.money > 1000;
});
console.log(newArr); //true

some

const newArr = arr.some(function (item, index) {
  return item.money > 6000;
});
console.log(newArr);

reduce

適合拿來做加總的方法，起手式為：

1	const newArr = arr.reduce(function (prev, item, index) {}, 0);

跟前面不同的是在函式後面加上一個逗號，逗號後面的參數為起始值。

參數說明：

第一個參數代表上一個，若沒有上一個的話，就是在逗號後面寫上 0。

第二個參數代表當前的資料。

第三個參數代表索引。

來看一下 prev 的值：

const newArr = arr.reduce(function (prev, item, index) {
  console.log(prev); //0, 500, 1000, 1500
  return prev + 500;
}, 0);

因為陣列資料有四筆，所以從頭開始總共會得到四筆資料。

計算所有人加總的數值

若要計算所有人擁有的錢，可以這樣寫：

const newArr = arr.reduce(function (prev, item, index) {
  console.log(prev); //陸續加總的結果0 5000 11500 19000 27000
  return prev + item.money;
}, 0);
console.log(newArr); //27000

比大小

可以透過 reduce 去做所有資料內容的對比，會選出指定條件的值，這邊選出最大值來看看。

const newArr = arr.reduce(function (prev, item, index) {
  console.log(prev);
  return Math.max(prev, item.money);
}, 0);
console.log("newArr", newArr); //8000

sort()

會改變原本的陣列內容。下方有一組陣列沒有按照順序，使用 sort(); 方法，並帶入頭尾參數做為判斷，便會按照順序排列或反向排列。

const arr = [1, 5, 8, 7, 4, 6, 3, 2];
arr.sort((x, y) =>  return y - x);
console.log(arr); //8, 7, 6, 5, 4, 3, 2, 1
arr.sort((x, y) => return x - y);
console.log(arr); //1, 2, 3, 4, 5, 6, 7, 8

但若不使用判斷，則不會按照順序排列。

1
2
3

const arr2 = [1, 5, 8, 7, 4, 6, 3, 2, 10, 9, 11];
arr2.sort();
console.log(arr2); //1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

提姆寫程式