JS30-04-Array-Cardio-Day-1

發表於 | 分類於 ，

練習運用 Array 的各種函式

目標

  • 共提供四組資料
    • inventors：first(名)、last(姓) 、year(出生日期)、passed(死亡日期)
    • wiki 網站的 html ：網址連結
    • people：逗點分隔的姓名(firstName, lastName)
    • data：提供的一組包含重覆資料的陣列
  • 根據不同需求條件篩選出正確的資料

練習題目

inventors 的資料：

  1. 篩選出於 1500~1599 年間出生的 inventor (year in 1500-1599)
  2. 將 inventors 的 firstname 與 lastname 組合成一個陣列
  3. 將 inventors 依據「生日」由大至小排序
  4. 加總所有 inventor 的年齡
  5. 將 inventors 依據「年齡」由大至小排序

wiki 網站的 html：網址連結

  1. 列出 wiki 中巴黎所有包含’de’的路名

people 的資料：

  1. 依據 lastName 排序所有 people 的資料

data 的資料：

  1. 分別計算 data 內每個種類的數量

成品


See the Pen
JS30/04 - Array Cardio Day 1 by Bryan Hsaio (@bryan-hsaio)
on CodePen.

inventors 題目

inventors資料
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 }
];

Q：篩選出於 1500~1599 年間出生的 inventor (year in 1500-1599)

A：透過 filter 篩選出符合條件的資料，最終回傳一個新陣列

filter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's

/* 解法 */
const bornArr = inventors.filter(function(inventor) {
  if (inventor.year >= 1500 && inventor.year < 1600) {
    return true;
  }
});

/* 簡化語法 */
const bornArr = inventors.filter(
  inventor => inventor.year >= 1500 && inventor.year < 1600
);

console.table(bornArr);

Q：將 inventors 的 firstname 與 lastname 組合成一個陣列

A：透過 map 將原始資料加工後，最終回傳一個新陣列

map
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Array.prototype.map()
// 2. Give us an array of the inventors' first and last names

/* 解法 */
const newInventors = inventors.map(function(inventor) {
  return inventor.first + " " + inventor.last;
});

/* 簡化語法 */
const newInventors = inventors.map(
  inventor => inventor.first + " " + inventor.last
);

/* 簡化語法(Template String) */
const newInventors = inventors.map(
  inventor => `${inventor.first} ${inventor.last}`
); //Template String

console.log(newInventors);

Q：將 inventors 依據「生日」由大至小排序

A： 依照「生日」大小重新排序(return 值： -1 排前面 , 1 排後面)

sort
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest

/* 解法 */
const sortInventors = inventors.sort(function(a, b) {
  if (a.year > b.year) {
    return 1;
  } else {
    return -1;
  }
});

/* 簡化語法 */
const sortInventors = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));

console.table(sortInventors);

Q：加總所有 inventor 的年齡

A： 籍由 reduce 加總所有的年齡

reduce
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Array.prototype.reduce()
// 4. How many years did all the inventors live?

/* 解法 */
const totalYears = inventors.reduce(function(total, inventor) {
  return total + (inventor.passed - inventor.year);
}, 0);

/* 簡化語法 */
const totalYears = inventors.reduce(
  (total, inventor) => total + (inventor.passed - inventor.year),
  0
);

console.log(totalYears);

Q：將 inventors 依據「年齡」由大至小排序

A：依照「年齡」大小重新排序(return 值： -1 排前面 , 1 排後面)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 5. Sort the inventors by years lived

/* 解法 */
const sortYearsLived = inventors.sort(function(a, b) {
  const aYearCount = a.passed - a.year;
  const bYearCount = b.passed - b.year;

  if (aYearCount > bYearCount) {
    return -1;
  } else {
    return 1;
  }
});

/* 簡化語法 */
const sortYearsLived = inventors.sort((a, b) => {
  const aYearCount = a.passed - a.year;
  const bYearCount = b.passed - b.year;

  // 三元運算子
  return aYearCount > bYearCount ? -1 : 1;
});

console.table(sortYearsLived);

wiki-html 題目

Q：列出 wiki 中巴黎所有包含’de’的路名

A：練習 展開運算子(Spread Operator)、map()、filter()、includes() 搭配使用

method組合運用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

/* 解法 */
const category = document.querySelector(".mw-category");

//將 nodeList 轉為 Array型態
const Links = [...category.querySelectorAll("a")]; //展開運算子(Spread Operator)

//可以執行完 map 後，緊接著執行 filter
const de = Links.map(link => link.textContent).filter(tName =>
  tName.includes("de")
);

console.log(de);

people 題目

Q：依據 lastName 排序所有 people 的資料

A：練習 解構賦值(Destructuring Assignment)、sort() 運用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// 7. sort Exercise
// Sort the people alphabetically by last name

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 sortPeople = people.sort(function(a, b) {
  const [aLast, aFirst] = a.split(", "); //解構賦值(Destructuring Assignment)
  const [bLast, bFirst] = b.split(", "); //解構賦值(Destructuring Assignment)

  if (aLast > bLast) {
    return 1;
  } else {
    return -1;
  }
});

/* 簡化語法 */
const sortPeople = people.sort((a, b) => {
  const [aLast, aFirst] = a.split(", ");
  const [bLast, bFirst] = b.split(", ");

  // 三元運算子
  return aLast > bLast ? 1 : -1;
});

console.log(sortPeople);

data 題目

Q：分別計算 data 內每個種類的數量

A：練習 reduce() 運用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 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 dataCount = data.reduce((counts, item) => {
  if (!counts[item]) {
    counts[item] = 0;
  }

  counts[item] += 1;

  return counts;
}, {});

console.log(dataCount);