[JS30] Day04: Array Cardio Day 1

這一天主要是來練習 Array 的常見操作，讓我們繼續看下去!

1. filter

   filter篩選出特定條件的陣列，為 shallow copy，兩者有相同的參考位址。

// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
const inventorsIn1500 = inventors.filter(
  (inventor) => inventor.year >= 1500 && inventor.year < 1600
);

2. map

   map函式中原陣列每個元素都會呼叫給定的函式去創造出一個新陣列。

// Array.prototype.map()
// 2. Give us an array of the inventors first and last names
const inventorsFirstLast = inventors.map(
  (inventor) => `${inventor.first} ${inventor.last}`
);

3. sort

   sort回將傳入陣列排序後傳回相同陣列的參照位址，預設，將元素轉成字串，根據 UTF-16 字元編碼由小到大排序。

可以參考 mdn 的表格

compareFn(a, b) return value	sort order
> 0	sort a after b
< 0	sort a before b
=== 0	keep original order of a and b

此題為依照投資者的年齡由大到小排序

// 3. Sort the inventors by birthdate, oldest to youngest
const inventorsSortByBirthdate = inventors.sort(function (a, b) {
  if (a.year > b.year) return -1;
  if (a.year < b.year) return 1;
  return 0;
});

sort 在背後的原理主要是使用「Quick sort」，但在陣列長度為 10 以下是使用「Insertion sort」，可以參考以下文章

https://medium.com/@leokao0726/%E6%B7%BA%E8%AB%87-js-sort-%E5%88%B0%E8%83%8C%E5%BE%8C%E6%8E%92%E5%BA%8F%E6%96%B9%E6%B3%95-1035f5b8cde8

4. reduce

reduce會在每個元素上面進行些操作(reducer，使用者提供的函式)，然後回傳一個計算過後的值。最容易的理解案例是reduce會回傳所有元素的加總。

此題回傳所有投資者的壽命加總

// 4. How many years did all the inventors live all together?
const totalYears = inventors.reduce((total, inventor) => {
  return total + (inventor.passed - inventor.year);
}, 0); // 0 is initial value

5. sort 的進階操作

   在sort中提供的函式可以先建立新的變數，再對新的變數進行比較回傳排序

// 5. Sort the inventors by years lived
const inventorsSortByLivedYears = inventors.sort(function (a, b) {
  const livedYears = a.passed - a.year;
  const nextLivedYears = b.passed - b.year;
  return livedYears > nextLivedYears ? 1 : -1;
});

6. map 加上 filter

   此題要在Boulevards_in_Paris維基百科找到所有包括de的大道

Array.from將 NodeLists 轉為 Array

// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
const category = document.querySelector(".mw-category");
const boulevards = Array.from(category.querySelectorAll("a"))
  .map((link) => link.textContent)
  .filter((streetName) => streetName.includes("de"));

也可以透過reduce來進行轉換

const boulevards2 = Array.from(category.querySelectorAll("a")).reduce(
  (accumulator, link) => {
    const streetName = link.textContent;
    if (streetName.includes("de")) {
      return [...accumulator, streetName];
    }
    return accumulator;
  },
  []
);

可以透過 MDN 的範例了解更多

7. sort 的進階操作

   此題也是在sort裡的函式進行更多的操作，再去比較

// 7. Sort the people alphabetically by last name
people.sort(function (a, b) {
  const [aLast, aFirst] = a.split(", ");
  const [bLast, bFirst] = b.split(", ");
  return aLast > bLast ? 1 : -1;
});

8. reduce 進階操作

   透過reduce創造出一個記數物件

// 8. Reduce Exercise
// Sum up the instances of each of these
const data = [
  "car",
  "car",
  "truck",
  "truck",
  "bike",
  "walk",
  "car",
  "van",
  "bike",
  "walk",
  "car",
  "van",
  "car",
  "truck",
];
const transportation = data.reduce((obj, vehicle) => {
  if (!obj[vehicle]) {
    obj[vehicle] = 0;
  }
  obj[vehicle]++;
  return obj;
}, {});