「JavaScript 30」學習筆記（四）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

練習對陣列進行排序或計算。

筆記

1. 篩選出 16 世紀的發明家。

const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
console.table(fifteen);

• filter() 方法會建立一個符合條件判斷的新的陣列。
• foo => (...) 是 ES6 的箭頭函式。

---

2. 處理一個發名家的姓名陣列。

const fullNames = inventors.map(inventor => (`${inventor.first} ${inventor.last}`));
console.log(fullNames);

• map() 方法會建立一個經過處理的新的陣列。

---

3. 用年代最遠到最近來排列發明家的生日。

const orderd = inventors.sort(function(a, b) {
    if(a.year > b.year) {
        return 1;
    } else {
        return -1;
    }
});
console.table(orderd);

或用三元運算子表達。

const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);

• sort() 用於對陣列的元素進行排序。
• 當參數 a 大於 b 是 1 的話，表示升冪。

---

4. 計算所有發明家的壽命的總和。

const totalYears = inventors.reduce((total, inventor) => {
    return total + (inventor.passed - inventor.year);
}, 0)
console.log(totalYears);

• reduce() 方法用於累加。
• 0 是 total 的預設値。

---

5. 用發明家的壽命來排序。

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);

• lastGuy 大於 nextGuy 是 -1 的話，表示降冪。

---

6. 找出列表「Boulevards in Paris」中所有含有「de」的街道名稱。

const category = document.querySelector(".mw-category");
const links = Array.from(category.querySelectorAll('a'));
const de = links
    .map(link => link.textContent)
    .filter(streetName => streetName.includes('de'));

• textContent 屬性可以獲得元素的文本内容。

---

7. 用英文字母排序發明家的姓氏。

const alpha = people.sort((a, b) => {
    const [aLast, aFirst] = a.split(', ');
    const [bLast, bFirst] = b.split(', ');
    return aLast > bLast ? 1 : -1;
});
console.log(alpha);

• aLast 大於 bLast 是 1 的話，表示升冪。

---

8. 計算物件的各別數量。

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

• 如果陣列內沒有該項目，則從 0 開始新增。
• {} 是預設的空物件。