常見的陣列運用方式

const people = [
  { name: "bob", age: 20, position: "developer", id: 1 },
  { name: "mary", age: 18, position: "cooker", id: 2 },
  { name: "jim", age: 68, position: "artist", id: 3 },
  { name: "tom", age: 28, position: "artist", id: 4 },
];

forEach();

將陣列內的每個元素，皆傳入並執行給定的函式一次。但不會回傳一個新的陣列

people.forEach(function (person) {
  console.log(person.first);
});

map()

map() 方法會建立一個新的陣列，其內容來自原始陣列的經由函式回呼後形成的新陣列，但不會改變原本陣列。

const newPeople = people.map(function (person) {
  return {
    firstName: person.name.toUpperCase(),
    oldAge: person.age + 20,
  };
});
console.log(newPeople);

filter()

過濾的方法，就是傳入一個函數，並且以迴圈檢查運算每個物件，由原陣列中通過該函式條件而構成的新陣列

const developer = people.filter(function (person) {
  return person.position === "developer";
});
console.log(developer);

const person2 = people.filter(function (person) {
  return person.id === 3;
});
console.log(person2);

find();

find() 方法會回傳第一個滿足條件的元素值。否則回傳 undefined。可運用在例如尋找獨特元素如 id 屬性時

const found = people.find(function (person) {
  return person.id === 3;
});
console.log(found);

sort()

sort() 方法會原地對一個陣列的所有元素進行排序，並回傳此陣列。

//寫法 1

const ordered = people.sort(function (a, b) {
  if (a.age > b.age) {
    return 1;
  } else {
    return -1;
  }
});

console.log(ordered);
//寫法 2
const ordered = people.sort((a, b) => (a.age > b.age ? 1 : -1));

const oldest = inventors.sort(function (a, b) {
  const lastGuy = a.passed - a.year;
  const nextGuy = b.passed - b.year;
  return lastGuy > nextGuy ? 1 : -1;
});
console.table(oldest);

.reduce()

reduce() 方法將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。

//arr.reduce(callback[accumulator, currentValue], initialValue)
const total = people.reduce(function (acc, currItem) {
  console.log(`total ${acc}`);
  console.log(`current money ${currItem.salary}`);
  acc += currItem.salary;
  return acc;
}, 0);
console.log(total);

範例 1 怎麼過濾出網頁裡有 “de” 的地址？

//https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

const category = document.querySelector(".mw-category");
const link = category.querySelectorAll("a");

const aElement = Array.from(document.querySelectorAll(".mw-category a"));
let list = aElement
  .map((item) => item.textContent)
  .filter((item) => item.includes("de"));
console.log(list);

範例 2 依照姓來排序

const people = [
  "Beck, Glenn",
  "Becker, Carl",
  "Beckett, Samuel",
  "Beddoes, Mick",
  "Beecher, Henry",
  "Beethoven, Ludwig",
  "Begin, Menachem",
  "Belloc, Hilaire",
  "Bellow, Saul",
  "Benchley, Robert",
  "Benenson, Peter",
  "Ben-Gurion, David",
  "Benjamin, Walter",
  "Benn, Tony",
  "Bennington, Chester",
  "Benson, Leana",
  "Bent, Silas",
  "Bentsen, Lloyd",
  "Berger, Ric",
  "Bergman, Ingmar",
  "Berio, Luciano",
  "Berle, Milton",
  "Berlin, Irving",
  "Berne, Eric",
  "Bernhard, Sandra",
  "Berra, Yogi",
  "Berry, Halle",
  "Berry, Wendell",
  "Bethea, Erin",
  "Bevan, Aneurin",
  "Bevel, Ken",
  "Biden, Joseph",
  "Bierce, Ambrose",
  "Biko, Steve",
  "Billings, Josh",
  "Biondo, Frank",
  "Birrell, Augustine",
  "Black, Elk",
  "Blair, Robert",
  "Blair, Tony",
  "Blake, William",
];

const alpha = people.sort((lastOne, nextOne) => {
  const [aLast, aFirst] = lastOne.split(",");
  const [bLast, bFirst] = nextOne.split(",");
  return aLast > bFirst ? 1 : -1;
});

console.table(alpha);

範例 3 加總個別項目的總數

const data = [
  "car",
  "car",
  "truck",
  "truck",
  "bike",
  "walk",
  "car",
  "van",
  "bike",
  "walk",
  "car",
  "van",
  "car",
  "truck",
  "pogostick",
];

const transportation = data.reduce(function (obj, item) {
  if (!obj[item]) {
    obj[item] = 0;
  }
  obj[item]++;
  return obj;
}, {});

console.table(transportation);