Demo這一個章節主要是利用Javascript的Array物件中方法做資料處理，在第四天會有幾個語法的練習。
第一個語法是使用filter()作為練習，filter()是建立一個新陣列是原先的陣列的判斷式的篩選值。在filter()範例中是用來篩選出生年在1500～1600這個區間的人。
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));console.table(fifteen);
const exerciseSort = inventors.sort((a, b)=> a.year>b.year? 1: -1);console.table(exerciseSort);
5. 第五個練習一樣是使用sort()作為練習，這次的練習是排序在陣列passed減去year的值。
const oldest = inventors.sort(function(a, b) { const lastInventor = a.passed – a.year; const nextInventor = b.passed – b.year; return lastInventor > nextInventor ? -1 : 1;});console.table(oldest);
const alpha = people.sort((lastOne, nextOne) => {
const [aLast, aFirst] = lastOne.split(‘, ‘);
const [bLast, bFirst] = nextOne.split(‘, ‘);
return aLast > bLast ? 1 : -1;
});
console.log(alpha);
7. 第七個練習是拿網頁做實際練習，首先拿取得巴黎的大道名稱，再過濾出大道名稱含有de字的出來。
const links = Array.from(category.querySelectorAll(‘a’));
const de = links
.map(link => link.textContent)
.filter(streetName => streetName.includes(‘de’));
const data = [‘car’, ‘car’, ‘truck’, ‘truck’, ‘bike’, ‘walk’, ‘car’, ‘van’, ‘bike’, ‘walk’, ‘car’, ‘van’, ‘car’, ‘truck’, ‘pogostick’];
const transportation = data.reduce(function(obj, item) {
if (!obj[item]) {
obj[item] = 0;
}
obj[item]++;
return obj;
}, {});
console.log(transportation);
Array
JavaScript 中，全域物件 Array 是陣列的建構子，陣列是高階、似列表的物件。 The JavaScript Array object is a global object that is used in the construction of arrays; which are high-level, list-like objects.
filter
filter() 方法會建立一個經指定之函式運算後，由原陣列中通過該函式檢驗之元素所構成的新陣列。
const result = words.filter(word => word.length > 6);
3. map
map() 方法會建立一個新的陣列，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。
const map1 = array1.map(x => x * 2);
4. sort
sort() 方法將陣列中的元素排列至其應當的位置上並返回此陣列。
function compare(a, b) {
if (a is less than b by some ordering criterion) {
return -1;
}
if (a is greater than b by the ordering criterion) {
return 1;
}
// a must be equal to b
return 0;
}
// 如果 compareFunction 被應用, 陣列元素們將根據比較函數之回傳值來排序。如果 a 和 b 為被比較之兩元素, 則:
// 若 compareFunction(a, b) 小於 0, 將 a 排在比 b index還小處, i.e. a 排在第一個.
// 若 compareFunction(a, b) 回傳 0, a 與 b 互相不會改變順序, 但會與全部其他元素比較排列。註計: ECMAscript標準不保證能使用此行為, 因此不是所有瀏覽器 (e.g. Mozilla版本至少2003) 遵守此行為.
// 若 compareFunction(a, b) 大於 0, 將 b 排在比 a index還小處.
// compareFunction(a, b) 在給特定元素 a 及 b 為此函數之兩參數時必須每次都回傳相同之值。若回傳值不一致，排序順序則為undefined。
5. reduce
reduce() 方法將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列簡化為單一值。
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
6.
includes()方法是回傳陣列中是否含有配對值的布林值。
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
tags: Array
转载请注明：XAMPP中文组官网 » Day4 Array Cardio Day 1