工作時經常用到的 JS 知識點及技巧(4)－進階使用物件與陣列

最後更新於 2022 年 4 月 24 日

因為是工作系列，所以所有的範例皆為實際工作上遇到的需求。

判斷值存在才放入陣列中

可以用 forEach 判斷值是否存在，如果存在就 push 進一個新的 array：

let display = [];

[
  { key: 'tax', value: tax },
  { key: 'total', value: total },
].forEach((item) => {
  if (item.value) {
    display.push(item);
  }
});

判斷值存在才放入物件中

有很多種方法，第一種是可以將屬性和原來的物件用擴展運算符合併：

let payload = {
    start: moment(date.start).format("YYYY-MM-DD HH:mm:ss"),
    end: moment(date.end)format("YYYY-MM-DD HH:mm:ss"),
}

if (region)
  payload = { ...payload, region };

或者也可以用 Object.assign({}, originObj)以物件兩兩合併的方式將屬性加入物件中：

let payload = {
    start: moment(date.start).format("YYYY-MM-DD HH:mm:ss"),
    end: moment(date.end)format("YYYY-MM-DD HH:mm:ss"),
}

payload = Object.assign({ region }, payload);

刪除物件中的指定屬性

從物件中刪除指定屬性常見的有兩種方式，第一種是直接使用 delete 操作符，使用方式如下：

const employee = {
  firstname: 'John',
  lastname: 'Doe'
};

console.log(employee.firstname);
// expected output: "John"

delete employee.firstname;

console.log(employee.firstname);
// expected output: undefined

另一種則是使用解構的方式刪除，將要刪除的屬性單獨解構出來，其他以 ...info 的形式解構，如此一來就可以直接使用 info 作為刪除指定屬性後的物件：

const employee = {
  firstname: 'John',
  lastname: 'Doe',
  age: 20,
  position: 'developer'
};
const { age, ...info } = employee;
console.log(info); // { firstname: 'John', lastname: 'Doe', position: 'developer }
console.log(employee); // { firstname: 'John', lastname: 'Doe', age: 20, position: 'developer }

動態呼叫不同的 API

用一個 obj 來存放不同的 API 封裝函數，key 為動態參數的值，value 為函數名稱：

const type = 'apple';
const obj = {
    apple: getApple,
    banana: getBanana,
    guava: getGuava,
};

let data = [];

obj[type]()
   .then((res) => data = res.data)
   .catch((e) => console.log(e.response.data));

用 includes 取代多個等於判斷

假設你有多個等於判斷需求，可以把它改寫成 [].includes(values)，如此一來當判斷的值越來越多時，程式碼就不會過長也更容易閱讀：

const value = "apple";
// before
if (value === "apple" || value === "banana" || value === "guava") {
    // ...
}
// after
if(["apple", "banana", "guava"].includes(value)) {
    // ...
}

在陣列指定索引插入元素

可以使用 splice(index, deleteCount, insertValue or replace value) 來滿足這個需求：

const value = "pineapple";
let arr = [
    "apple",
    "banana",
    "guava"
]
if (value)
  arr.splice(1, 0, value); // ["apple", value, "banana", "guava"];

陣列元素的排序

最基礎也最常用的功能為將陣列所有元素由小到大或者由大到小排序：

如果不寫任何條件，預設會按照Unicode編碼位置排序，而不是我們認為的按數值大小排序。

let arr = [1, 12, 3, 4, 5];

// 不寫任何條件就是按照 Unicode 編碼位置排序
arr.sort(); // [1, 12, 3, 4, 5]

// 由小到大
arr.sort((a, b) => a > b ? 1 : -1); // [1, 3, 4, 5, 12]
arr.sort((a, b) => a - b); // [1, 3, 4, 5, 12]

// 由大到小
arr.sort((a, b) => a < b ? 1 : -1); // [12, 5, 4, 3, 1]

當然也可以按照物件中的屬性值來排序：

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

items.sort((a, b) => {
  return a.value - b.value; // 由小到大
});