iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0

唉唷威,每天發的是不容易啊,寫不完整都會不想發。
目前還是新手訓練沒辦法回留言,但好像放個codepen上來也不錯膩。

練習重點:
處理陣列常用的方法

  • filter()
  • map()
  • sort()
  • reduce()

提供的陣列資料:

  • inventors: 發明家的 first(名) last(姓) year(出生時間) passed(過世時間)
    const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
    ];
  • people: 名字中間有逗號做間隔,並且字首大寫(firstName, lastName)
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'];
  • data: 有重複的資料在裡面
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];

題目(1)篩選出出生在1500年間的發明家(year in 1500~1599):

  • 使用filter()過濾每筆inventor 為true的將會回傳到變數born裡成為新的陣列
    const born_ = inventors.filter(function(invent){
      if( invent.year >= 1500 && invent.year <= 1599 ) {
        return true;
      } else {
        return false;
      }
    });
    // ***array function寫法***
    const born = inventors.filter((invent) => invent.year >= 1500 && invent.year <= 1599);
    // console.table(born);
  • filter()筆記:
    • filter(item, index, array)
    • 會回傳一個新陣列,透過過濾原陣列,保存值為true的,false則不保留
    • 適合用在搜尋符合條件的資料
// 沒有條件會是空陣列
var filterEmpty = people.filter(function(item, index, array){
});
console.log(filterEmpty); // []

題目(2)回傳所有inventor的全名(first + last):

  • 使用map()將last與first組合後回傳至變數fullName
    const fullName_ = inventors.map(function(inventor){
      return inventor.first + ' ' + inventor.last;
    });
    // ***array function寫法***
    const fullName = inventors.map((invent) => `${invent.first} ${invent.last}`);
    console.table(fullName);
  • map()筆記:
    • map(item, index, array)
    • 與fillter很像,透過原陣列組合成一個新陣列,回傳數量等於原始陣列的長度
    • 如果不回傳則是 undefined
    • 適合將原始的變數運算後重新組合一個新的陣列
var mapEmpty = people.map(function(item, index, array){
});
console.log(mapEmpty);    // [undefined, undefined, undefined, undefined]

題目(3)依據生日小至大排序所有的inventor:

  • 使用sort()透過比較,原地進行排序,並不會產生新陣列
const birthday_ = inventors.sort(function(a,b){
      if(a.year < b.year){
        return -1;
      } else {
        return 1;
      }
    });
// ***array function寫法***
const birthday = inventors.sort((a, b) => a.year < b.year ? -1 : 1);
  • sort()筆記: 看得有點久QQ
    • compare(a,b) 回傳值 < 0 則 [ a, b ]
    • compare(a,b) 回傳值 > 0 則 [ b, a ]
    • compare(a,b) 回傳值 = 0 則a,b位置不變
    • 詳細: https://goo.gl/26ayvV
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
// 步驟4-2大於0 故 2在4前面
// 步驟2-5小於0 故 2在5前面.....
console.log(numbers); // [1, 2, 3, 4, 5]

題目(4)加總所有inventor的在世時間:

  • 使用reduce()來做加總,他可以與前一個回傳的值再次作運算 tatol + (year - passed)
//以前使用for迴圈寫法:
let totalYears = 0;
for (let i = 0; i < inventors.length; i++) {
    let liveYear = inventors[i].passed - inventors[i].year;
    totalYears += liveYear;
}
// ***reduce() 以及 array function寫法***
const tatol = inventors.reduce(function (total, inventor) {
      return total + (inventor.passed - inventor.year);
    }, 0);

  • reduce()筆記:
    • reduce(function(total,value), initialTotal)
    • total 累加器是上一次呼叫後,所回傳的累加數值
    • value 陣列中正在處理的元素
    • initialTotal初始值
    • 詳細:https://goo.gl/wT1jLj

題目(5)年齡由大到小排序:

  • 使用sort() 先算好年紀(passed - year) 再進行比較並且排序
const oldest = inventors.sort(function (a, b) {
        const last = a.passed - a.year;
        const next = b.passed - b.year;
        return last > next ? -1 : 1;
    });
    console.table(oldest);

題目(6)列出巴黎所有包含'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'));

題目(7)依據lastName排序people的資料:

  • people的陣列資料名,中間包含逗點,使用split() 好難唸XD,來判斷逗點並且切開成兩個陣列用[first, last]來接,再用sort進行排序
const alpha = people.sort((a, b) => {
    const [aLast, aFirst] = a.split(', ');
    const [bLast, bFirst] = b.split(', ');
    return aLast > bLast ? 1 : -1;
});

題目(8)分別計算data內每個值的數量:

  • 先將obj初始值設為空陣列obj={} 並且判斷這個值是否有了,沒有的話就創立一個空的,有的話就相加
const transportation = data.reduce(function (obj, item) {
    if (!obj[item]) {
        obj[item] = 0;
    }
    obj[item]++;
        return obj;
}, {});

哇嗚 這次的東西有點多 之後這篇還是會陸續整理更新 >"<


上一篇
JS30 - day03: CSS Variable
下一篇
JS30 - day05: Flex Panel Gallery
系列文
JavaScript 30天11

尚未有邦友留言

立即登入留言