從2018百度前端技術學院看代碼究竟應該怎么寫(2)

sixleaves 發布于2019-08-21 11:42 / 357人閱讀

摘要：任務描述參考以下示例代碼，頁面加載后，將提供的空氣質量數據數組，按照某種邏輯比如空氣質量大于進行過濾篩選，最后將符合條件的數據按照一定的格式要求顯示在網頁上污染城市列表第一名福州樣例，第二名福州樣例，北京上海福州廣州成都西安在注

任務描述

參考以下示例代碼，頁面加載后，將提供的空氣質量數據數組，按照某種邏輯（比如空氣質量大于60）進行過濾篩選，最后將符合條件的數據按照一定的格式要求顯示在網頁上

    
    
      
        
        IFE JavaScript Task 01
      
    
    
      污染城市列表

實現代碼

我的思路：

先將數組中滿足條件的元素過濾到一個對象中，再按對象的值排序，構造字符串，生成li元素，添加,不過后看到別人直接利用二維數組直接進行排序構造覺得也挺簡單的,不過本次也回顧了下對象按鍵值排序的方法，所以就不打算改了,下面會貼出一個更優雅10分的實現：

10分實現
為何是10分，想必大家看了代碼就知道了：

功能模塊耦合程度特別低，這也給了我們一個啟示，在實際編寫代碼時能封裝抽象成一個函數的盡量抽象成函數，這樣既方便理解也方便后期維護。

ES6打臉

剛準備做下一個任務,隨手打開筆記區一個點贊量最高的筆記，分分鐘被ES6打臉，告訴我上面內個10分是啥(黑人問號臉),于是乎分分鐘又拿ES6寫了一遍，不然阮老師的《ES6教程》白看了，代碼如下，簡潔程度大家自己看

模板字符串

寫到這突然發現我對ES6的模板字符串還不是很熟悉，在此補充一下吧：MDN文檔
ps:待標簽的模板字符串還不太懂，稍后弄清了補充

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87021.html

從2018百度前端技術學院看代碼究竟應該怎么寫(1)

任務描述參考以下示例代碼，補充其中的JavaScript功能，完成一個JavaScript代碼的編寫本任務完成的功能為：用戶可以在輸入框中輸入任何內容，點擊確認填寫按鈕后，用戶輸入的內容會顯在您輸入的值是文字的右邊 IFE JavaScript Task 01 請輸入北京今天空氣質量：確認填寫您輸入的值是：尚無錄入 (function...

Cobub 2019-08-21 11:43 評論0 收藏0
2018年騰訊前端一面總結（面向2019屆學生）

摘要：前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。其實閉包也就是指有權訪問另一個函數作用域的函數而已。常用的創建閉包的方法就是在函數內部創建另一個函數。前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。但是也正是因為這種確定性，也有在等待電話的時候的心情的忐忑。背景我是一名大三學生，大一...

Kosmos 2019-08-22 15:17 評論0 收藏0
【董天一】關于IPFS的熱門問題

摘要：作者簡介董天一中國區技術布道人指南作者。目前網絡上有一些對的解讀五花八門，各式各樣，有看好的，也有打擊的，總之一項新技術誕生之初遇到的問題都遇到了。問題文件丟失認為系統不可靠，會造成用戶文件的丟失。作者簡介：董天一 ,IPFS/Filecoin中國區技術布道人 ,《IPFS指南》作者。畢業于北京大學軟件與微電子學院曾擔任甲骨文亞洲研發中心（中國）數據庫開發工程師。資深區塊鏈技術開發...

李義 2019-06-27 18:56 評論0 收藏0
2016百度前端技術學院Task02

摘要：的演示整個項目的地址的地址起初只是想簡單開始重新做一遍百度前端技術學院的任務，但是在做的過程中萌生了要記錄下自己在過程中遇到的一系列問題的想法?，F在我把自己完成的小項目的源碼在上分享出來，希望可以幫到廣大前端初學者們。 Task02的演示DEMO：https://amnova.github.io/New-... 整個項目的GitHub地址：https://github.com/amn...

venmos 2019-08-30 13:19 評論0 收藏0
2016百度前端技術學院Task02

摘要：的演示整個項目的地址的地址起初只是想簡單開始重新做一遍百度前端技術學院的任務，但是在做的過程中萌生了要記錄下自己在過程中遇到的一系列問題的想法?，F在我把自己完成的小項目的源碼在上分享出來，希望可以幫到廣大前端初學者們。 Task02的演示DEMO：https://amnova.github.io/New-... 整個項目的GitHub地址：https://github.com/amn...

lolomaco 2019-08-01 16:09 評論0 收藏0