[JS30] Day 4: Array Cardio Day 1

JavaScript

 2018/08/25  Share

Day 4: Array Cardio Day 1

對於 ECMAScript5 增加的陣列方法做進一步的認識。

在先前的文章中，有針對過這些陣列的基本用法做過詳細的介紹，所以這邊有的習題不會講解的那麼仔細，如果對以下幾個陣列方法還不熟悉的，可以先去看看這篇文章。

主要練習:

JS - Array.prototype.filter()
JS - Array.prototype.map()
JS - Array.prototype.sort()
JS - Array.prototype.reduce()
JS - Array.prototype.forEach()

題目內容

首先從草稿中可以看到作者已經先給了兩個陣列。
第一個陣列 inventors ，是由人物資料組合而成的物件，作為元素所組成的陣列。
第二個陣列 people ，則是由名字字串作為元素所組合而成。

第 1 題 :

使用 filter() 方法從 inventors 這個陣列中篩選出出生在 1500 年代的人。

1 2	const newInv = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600); console.log(newInv);

第 2 題 :

從 inventors 陣列中取得發明者的年齡和姓氏，並回傳一個陣列。

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

第 3 題 :

從 inventors 陣列中將發明者的年齡由大到小做排序。

1 2	const years = inventors.sort((a, b) => a.year - b.year); console.log(years);

第 4 題 :

加總所有發明者的年紀。

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

第 5 題 :

計算所有發明者的壽命，並進行排序。

1 2	const yearsLived = inventors.sort((a, b) => (a.passed - a.year) - (b.passed - b.year)); console.log(yearsLived);

第 6 題 :

列出 wiki 中巴黎所有包含 ‘de’ 的路名。
https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

這題先用 querySelectorAll() 選取對象元件，
再利用的 Array.from 將 nodeList 轉為 Array，
才能對他使用 map() 操作(map是Array的方法，nodeList沒有)，
同時再用 filter() 與 includes()) 來做文字的篩選，若存在’de’就回傳 true 加入陣列。

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 題 :

將 people 陣列中，人名的 lastName 按照字母順序作排列。

const sortPeople = people.sort(function (a, b) {
  const aAry = a.split(", ");
  const bAry = b.split(", ");
  return aAry[1] > bAry[1] ? 1 : -1;
});
console.log(sortPeople);

第 8 題 :

計算出 data 陣列中每個項目的總數。

1	const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];

這邊自己想說練習一下使用 forEach() 方法來做 :

const obj = {};
data.forEach(function (item) {
  if (!obj[item]) {
    obj[item] = 1;
  } else {
    obj[item]++;
  }
});
console.log(obj);

也是可以使用 reduce() 發法 :

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