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

第四堂 – Array Cardio Day 1

XAMPP下载 admin 541浏览 0评论
 這堂課所要做的練習沒有任何介面,純粹是JavaScript關於Array的基本功訓練,裡面共有八個小練習,主要是關於Array的四種函式:filter、map、sort、reduce。我認為這堂課是相當重要的,因為Array是非常常用的一種資料型態,若能夠熟悉這幾種函式,在開發時就可以將程式碼提煉再提煉、濃縮再濃縮。而且這堂課老師在寫範例時,會先用我們平常會用的寫法來寫,最後再示範一個簡潔有力的寫法,你就會如醍醐灌頂地發現,Wow cow~原來可以這樣寫!

邏輯流程
在教材中已經有幫你建立好一個叫inventors的Array,其中有各個inventor的first name、last name、出生年以及逝世年。而這堂課八個獨立的小練習分別是:

利用filter篩選出出生在1500~1600年的發明家。
利用map來建立一個內容為inventors全名的Array。
利用sort依據出生年將inventors排序,由老到年輕。
利用reduce將所有inventors歲數加起來。
利用sort依據inventors的歲數來排序。
從這個維基百科找出所有名稱含有”de”的大道。
利用教材建好的people Array,將人名根據last name做字母排序。
利用教材建好的data Array,將各種車型做數量統計。
課程重點
不論是filter、map、sort、reduce,每個函式都是將Array成員以迴圈的方式跑過一遍。
filter函式是用來做Array的篩選,在函式內建立判斷條件,其回傳true的Array成員將被保留。如第一小題
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
map函式可以想成是用來將Array裡的成員做加工,如第二小題
const fullnames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
sort函式是用來做Array成員的排序,通常會需要兩個參數,分別是前一個成員及下個成員,如第三小題
const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
reduce函式是將一個Array輸出成一個值,而此函式至少需要兩個參數(total,inventor),total是每個迴圈跑完的return。需要注意的是,在跑第一個迴圈的時候沒有total,因此要做一個初始,如第四小題
const totalyears = inventors.reduce((total, inventor) => {
return total + (inventor.passed – inventor.year);
}, 0)
延伸閱讀
第三小題的sort可改寫為
const ordered = inventors.sort((a, b) => a.year-b.year);
console.table()可以將Array以表格的方式清楚顯示在Chrome console

转载请注明:XAMPP中文组官网 » 第四堂 – Array Cardio Day 1

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