---
tags: JS 直播班 - 2021 春季班
---

# 3/26 線上 Slack 助教

## 今日輪班助教時間

暄雯：3/26（五）
早上 9:00 - 早上 11:00，下午 1:30 - 下午 5:30

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. **穎旻：**
老師助教同學們好，這是我的 [Codepen](https://)，我原本預期「JS 第 8 行會出現數字 8」，但卻出現「預期外的結果是 0」，想問下問題出在哪裡？
> 助教回覆：

---
2. **YUKI：**
助教您好
(1) 我之前發問第五關小組任務最後一題，助教解法，我使用我的理解去解釋
但我的區別是看起來出現 bug，但使用老師第七周教的是 OK 的
想請問助教的解法我是有哪邊搞錯了呢?
助教建議 [hankmd](https://hackmd.io/xgdxUs4TTGyk1I1TUmb6Nw) Yuki(2)
我的 [codpen](https://codepen.io/sihyu/pen/oNYKmOq?editors=0112) 第 62~73 行 謝謝助教
> 助教回覆：
因為 item[‘區別’] 為中文，因此在增加這個屬性時需要用括弧記法的方式，不能使用點記法來新增。把 total.item['區別'] = 0 改成 total[item['區別']] = 0 就可以哩
理解後，可以試著修改 total.item['區別']++

(2) 第七關小組任務 我在做第二題時，c3.js 把我第一題的圓餅圖給覆蓋了([codepen](https://codepen.io/sihyu/pen/wvgKOVQ))，想請問如何正確呈現兩個不同的圖表呢?
> 助教回覆：
> 可以嘗試在圖表增加 bindto 屬性，值則放 id 名稱。例如：第一個圖表的 id 為 chart，因此 chart 變數則為：
> var chart = c3.generate({
bindto: "#chart",
data: {......}
});
---
3. **chou Allen：**
助教 您好!
想詢問第七周的問題
在第 109 行 我使用三元判斷式 去給值，
預計是 每筆新增都會 讓 num +1
但只要更換其他地區作新增， 更新過的 num 就會覆蓋上去，有無辦法讓更新值跟 default 值 互相不影響呢?
https://eepson123tw.github.io/Js-lesson/dist/jsWeekFive.html
> 助教回覆：
> 三元判斷式這邊的寫法建議可以修改為：
> val.forEach((item) => {
obj[item.area] = (obj[item.area] == undefined) ? 1 : (obj[item.area] += 1);
})
如果 obj 裡已經有 [item.area] 則 obj[item.area] += 1
例如：原本「台北」只有一筆資料，因此 obj['台北'] = 1。新增一筆「台北」的資料時，obj['台北'] += 1，得到 obj['台北'] = 2
在後面使用 for ... in 時就可以將值取出來哩
---
4. **Hsin：**
助教好~
這是我的 [codepen](https://codepen.io/hsinhui/pen/BapjVrj?editors=1010)，想請問不知道為什麼原本在 vscode 寫的時候，已載入 c3 相關檔案，但瀏覽器一直跳錯 c3 is not defined，但如果貼上 codepen 並使用 codepen 內建載入 c3 相關網址就可以正常顯示，請助教解惑，感謝!
> 助教回覆：
> 目前從程式碼無法判斷檔案讀取路徑是否確，可以先嘗試改為載入 CDN，如果有成功顯示，可以試著確認原本的檔案路徑所選擇的資料夾與檔案是否正確哩
---
5. **Qizhen,Lin：**
助教好，這是我的 [codepen](https://codepen.io/ddnbmhxw/pen/XWpXYaZ)，想請問我 api 引入成功了，但下面的版面跑掉一直找不到原因，在麻煩助教了，謝謝
> 助教回覆：
> 助教這邊打開網頁，版面是有正常顯示的，程式碼目前檢視大致上沒有問題～可能要麻煩你描述跑版的狀況或是截圖畫面，這樣我們比較好檢視問題出在哪裡哩，謝謝 :D
---
6. **Awei：**
助教好～我在做 [3/23 的每日任務](https://rpg.hexschool.com/training/17/show?embedhm=o64XMywFRGGlh0iQIT4zAA?view) 時！
為什麼我這樣撰寫圖片會出不來呢？
[我的程式碼](https://codepen.io/hong-wei/pen/wvgMYGB?editors=1011)
謝謝。
> 助教回覆：
> 目前你的作法是將圖片網址設定為 ary[0].imgUrl 這個字串，而不是 ary[0].imgUrl 的值
> 可以試著修改為：
> img.setAttribute('src',ary[0].imgUrl);
---
7. **Hsin：**
助教好~補充說明我的問題: 我發現 c3 官網提供的 cdn 是:
`<script src="/path/to/d3.v5.min.js" charset="utf-8"></script>，`
但老師給的範例 codepen 裡面使用的是:
`<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js"></script>`
想問官網的 cdn 是不是還需要再載入什麼東西才能正常運作呢? 謝謝
> 助教回覆：
>除了將官網的檔案載下來外，路徑的部分（/path/to）也需要修改為你所放的位置哩
>假如你的資料夾裡面有 HTML 檔案和一個名稱為 js 資料夾，js 資料夾裡面放了 c3.min.js 的檔案
>那在 HTML 檔案要載入時，路徑要寫為
><script src="js/c3.min.js" charset="utf-8"></script>
>可以試著修改看看，如果修改後還是沒有正確載入，可以提供你的資料夾內容給我們檢視～
---
8. **smallg1015：**
老師助教同學們好，這是我第七週主線任務 LV2 的 CodePen
https://codepen.io/hwgnmpua/pen/YzNwdPQ?editors=1111，
我有用 console.log 檢查過，到最後 newData 的陣列，也就是 c3 要的資料正確，我將圖表的 div 放在 `<div class="search-area"></div>` 內，如 html 122 行，但圖表都沒有顯示出來,不知道是哪裡寫錯了呢,謝謝！
> 助教回覆：
> 目前檢視套件的路徑寫錯囉，如果是從官網上看到的這個路徑：
> <script src="/path/to/d3.v5.min.js" charset="utf-8"></script>
>需要先將檔案載下來，放到專案的資料夾裡，再把路徑（/path/to）修改為檔案所放的位置
>這邊可以嘗試將檔案下載下來並調整路徑，或是直接使用 CDN 來載入哩。可以參考 [範例程式碼](https://codepen.io/hexschool/pen/VwPwRyd?editors=1010)
---
9. **Harvey：**
老師助教同學好,這是我的第六周支線 [codepen](https://codepen.io/lqigzkgx/pen/zYNqYKe)，我想問的問題在於 js 的 55~71 行，我希望可以把資料處理成 56 行註解那樣，但是我只能做到計算出每個組別的總人數而且是在同個物件上如 70 行,希望助教可以教我解決這個問題以及這種資料處理的思維怎麼開始進行的 QAQ
> 助教回覆：
可以嘗試用 object.key() 搭配 forEach 的方式來處理。目前各組別的總人數都存在 groupObj 裡，透過 Object.keys 我們可以取出所有的屬性名稱，forEach 則可以將每筆資料都跑過一次。範例如下：
>

  Object.keys(groupObj).forEach((item,index) => {
    groupBmiData.push({
      [item]: groupObj[item]
    })
  })

>假設 groupObj 的第一筆資料為 group1Num : 7，則函式執行第一次時，groupBmiData 就會增加此筆物件
>理解後可以試著操作看看，這邊建議可以將組別跟花費時間分為兩筆資料來做處理。組別會被新增至 groupObj 裡，花費時間則可以新增至新的物件，例如：timeObj
>將 bmikataData 資料拆成這兩個物件後，再透過這兩個物件的 Object.keys 來執行 forEach 將資料新增至 groupBmiData。這樣就可以得到預設處理完的結構哩
>
>另外，建議可以將 `group${item.jsGroup}Num` 和 `group${item.jsGroup}Time` 宣告為變數來儲存，這樣會比較容易閱讀
>
>一開始有想到使用 forEach 來處理資料很棒哦，方向是正確的～理解觀念後，可以多重複練習幾次來熟練哩
---
10. **yijun：**
老師助教同學們好!
我想問關於第六周小組任務用投遞時間排序的問題，這是我的 [codepen](https://codepen.io/sandy3068/pen/KKaVMWB)。
我有把投遞時間的資料補 0、變成 24 小時制並刪掉上下午，但還是無法排序。
第 242 行把資料帶進升序排列函式(111 行 ~ 117 行)去跑，
但是他沒有排序，而是直接用原始的陣列(personalData)去跑第 243 行加排名。
想知到為什麼其他排序功能用相同方法都可以執行，但投遞時間卻不行？
有什麼辦法可以讓投遞時間進行排序？
> 助教回覆：
> 目前 JS 並沒有將投遞時間解讀為時間的格式，因此無法正確排序。可以透過 new Date() 來處理。例如：let sortA = a[sort] 要改為 let sortA = new Date(a[sort])，讓系統可以辨別這個值為時間
>理解後，可以試著調整看看～
>
>目前檢視將時間換成 24 小時制後，會出現 24:18:20 這樣的時間，可以再嘗試調整一下程式碼哩
---
11. **洋蔥：**
老師助教同學們好，這是我的 [CodePen](https://codepen.io/mikeyam/pen/LYxNRLW?editors=1111)（請附上連結），
我原本預期「JS 第 38 行會出現跟老師 [codepen](https://codepen.io/hexschool/pen/eYgOBeN?editors=0011) 結果一樣」，但卻出現「預期外的結果是多了一個 undefined」，導致我只好用 splice 把 undefined 清除，想問下問題出在哪裡，因為最終結果印出錯誤？

> 助教回覆：
> 會出現 undefined 是因為在第 28 行時將 timeAry 增加了一個 x 的字串，導致在執行第 34 行時無法找到 obj['x'] 的資料，所以出現 undefined。這邊提供兩種做法給你參考：
> (1) 將 let x = 'x' 和 timeAry.unshift(x) 移到 timeAry.forEach 下面，讓 ary 在新增資料時不會遇到 obj['x'] 這筆資料
(2) 新增一個陣列來存放 ['x'] 和 timeAry，來讓 timeAry 的資料不會被影響。例如：
let x = ['x'];
let xData = x.concat(timeAry)
newData.push(xData);
>
>這邊檢視會出現紅字錯誤的原因，可能是日期中出現多餘的空白，導致無法順利轉成時間格式。例如：錯誤資訊的第一行為
>"Failed to parse x '2021/3/9 ' to Date object"
在 '2021/3/9 ' 中，9 的後面多了一個空白，可以嘗試將空白移除哩
---
12. **Stacey Huang：**
老師助教同學們好，這是老師在第七周講義所附的 [BMI kata 投稿人數折線圖(時間序列折線圖)](https://codepen.io/hexschool/pen/eYgOBeN?editors=0010)
原本預期 JS 第 16 行的資料形別是陣列，因為我在網路上查看到說 split 按照指定的分隔符號把字串分隔成字串陣列,但透過 typeof 查詢卻是字串。
而透過 console.log 發現第 16 行的 code 會將 timestamp 變成 ["2021/3/10 下", " 10:11:17"] 這樣的格式,請問最後的 [0] 代表只讀取第一筆資料嗎?
不是很清楚 split 回傳的資料型別,
以上再麻煩助教了!! 謝謝
> 助教回覆：
> 這邊檢視第 16 行為 let str = item.timestamp.split("午")[0]
>因為 split() 會按照指定的分隔符號把字串分隔成字串陣列，所以最後的結果為陣列，陣列裡面放了很多個字串
第 16 行最後的 [0] 為透過索引去取得陣列項目的第一筆資料
依照上面的敘述，陣列裡放的是字串，因此 item.timestamp.split(“午” ) 陣列裡第一筆資料為字串，所以 str 的資料型別為字串。 item.timestamp.split(“午” ) 才會是陣列哩
可以增加以下的程式碼來檢視看看：

console.clear(); // 避免 forEach 跑完出現太多筆資料，留下一筆資料來檢視就可以了
console.log(item.timestamp.split("午")) // split() 將 data 資料分隔成不同字串，組成陣列
console.log(typeof (item.timestamp.split("午"))) // 陣列的資料型別為物件
console.log(str) // 陣列中的第一筆資料，為字串形式
console.log(typeof str)// 字串的資料型別為字串

---
13. **LEEE：**
老師助教同學們好!
想請問要將作業 push 到 github 上時發生
這個提示訊息，上網查了之後知道好像是
CRLF 和 LF 轉換斷行的問題!
目前是直接 push 上去了，請問!
不理它會有什麼問題嗎?

$ git add .
warning: LF will be replaced by CRLF in css/c3.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/c3.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/d3-5.8.2.min.js.
The file will have its original line endings in your working directory

> 助教回覆：
> 不理它不會有問題唷，它只是告知說它把 windows 的換行符號改成別種系統的換行符號哩
如果不希望跳出此訊息，也可以再將換行符號進行轉換哩，這邊提供文章給你參考：[Git 解決 LF will be replaced by CRLF 錯誤訊息](https://adon988.logdown.com/posts/7642074-git-resolves-to-appear-warninglfll-be-replaced-by-crlf-the-file-would-have-its-original-line-endings-in-your-working-directory)
---
（這裡只能由助教自行增加問題，請大家將問題放在 thread 上）