[筆記]JavaScript30學習-Day4

2020.10.12

學習網站：javascript30

僅記錄JS及較複雜的CSS部分，若有不清楚或是歡迎留言討論，
謝謝(´｡• ω •｡`)

Array Cardio Day 1

Step 1. 事前宣告

html

練習1. Filter

const fifteen = inventors.filter(function(inventor){
    if(inventor.year >= 1500 & inventor.year < 1600){
        return true;
    }
})
//簡寫
const fifteen = inventors.filter(inventor =>(inventor.year >= 1500 & inventor.year < 1600)

篩選：讓function對矩陣內的所有元素執行一遍，return true 會記錄符合條件的元素，return false 則不會(可省略)

✏️ console.table()：可以表格的方式呈現矩陣

練習2. map

const fullNames = 
inventors.map(inventor=>`${inventor.first} ${inventor.last}`);

加工工廠：將function對所有元素執行一遍，再存為新的矩陣。
※ 新矩陣的總長度與原矩陣相同。

練習3. sort

const ordered = inventors.sort(function(a, b){
    if(a.year > b.year){
        return 1;
    }else{
        return -1;
    }
})
//簡寫
const ordered = inventors.sort((a, b)=> a.year > b.year ? 1 : -1);

泡泡排序：function對所有元素執行一遍，return 1 往前排序，return -1不動

• 淺談 JS sort() 到背後排序方法 (詳細原理可察看此文章)

練習4. reduce

const totalYears = 
inventors.reduce((total, inventor)=>{
    return total + (inventor.passed - inventor.year);
},0)
//相等於以下函式
var totalYears = 0;
for(var i = 0; i < inventorsp[i].length; i++){
    totalYears += inventors[i].year;
}

累加：function對所有元素執行一遍，並返回一個累加的值(可為數字或字串)

✏️ total：累加中間值
inventor：代入矩陣單一元素
totalYears：最終累加值

• Array reduce() — JavaScript (JS) 教學 Tutorial

練習5. sort 應用

const oldest = inventors.sort(function(a, b){
    const lastGuy = a.passed - a.year;
    const nextGuy = b.passed - b.year;
    return lastGuy > nextGuy ? -1 : 1;
});

練習6. 篩選網頁中特定字串連結(map & fliter應用)

練習頁面網址

const category = document.querySelector('.mw-category');
//const links = Array.from(category.querySelectorAll('a'));
const links = [category.querySelectorAll('a')];
const de =links
            .map(link => link.textContent) //將文字提取出來
            .filter(streetName=>streetName.includes('de'));

練習7. 依照LastName排序(sort應用)

const alpha = people.sort(function(lastOne, nextOne){
    
    //將名字區分LastName和FirstName
    const [aLast, aFirst] = lastOne.split(', ');
    const [bLast, bFirst] = nextOne.split(', ');
    return aLast > bLast ? 1 : -1;
});

練習8. 統計資料中的數量(reduce應用)

const data=['car', 'car', 'car', 'truck', 'truck', 'bike'];
const transportation = data.reduce(function(obj, item){
    if(!obj[item]){
        obj[item]=0;
    }
    obj[item]++;
    return obj;
},{})
//輸出結果：
Object {
  bike: 1,
  car: 3,
  truck: 2
}

✏️此判斷方式值得學習，相較於區分成二種不同執行的類型，不如把相同的動作提取出來只需判別不同的部分並執行即可。