最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

day04: Array Cardio Day 1

XAMPP下载 admin 509浏览 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’的路名:

練習網址:https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

抓取className為mw-category裡面所有的a標籤,array.form()轉為真正陣列,使用map()抓取該標籤裡的文字,在使用filter()過濾有‘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;
}, {});
哇嗚 這次的東西有點多 之後這篇還是會陸續整理更新 >”<

转载请注明:XAMPP中文组官网 » day04: Array Cardio Day 1

您必须 登录 才能发表评论!