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

# 3/31 線上 Slack 助教

## 今日輪班助教時間

至榮：3/31（三）
早上 9:00 - 下午 5:00

## 發問規範

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

## 注意

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

## 問題

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

---

（這裡只能由助教自行增加問題，請大家將問題放在 thread 上）

1. **方文文**
1.想問一下第七關主線任務的LV2，要用axios介接甚麼資料? 看老師上課錄影檔的作業說明，我 預期是要用圓餅圖顯示六張卡片的比例分布 而已。但這裡寫說 要用axios介接資料 ，請問是要摳API嗎?API的連結是甚麼?

2.印象中記得之前好像在六角的教材有看到說， 取節點盡量用querySelector，不要用getElementByXX開頭的方式 去取節點。想請教：
(1) 為什麼?
(2) querySelector可以做到那些getElementByXXX做不到的事，反之，getElementByXXX可以做到那些querySelector做不到的事?
(3) 延續(2)，兩者的優缺點比較

> 助教回覆：
> 1. 三個 Lv 等級都是用 Lv1 的 API 喔，這邊也提供連結給你參考:
> https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json
>
> 2.(1) 用 querySelector 或是 getElementByXX 都是可以的喔，端看你的開發習慣。
>
> (2) 兩者大致上功能是一樣的，不過 querySelector 取得的結果是「靜態」的，getElementByXX 取回來的結果是「動態」的。靜態、動態的差異在於取得回來的結果會不會隨著項目的增減 (新增、移除元素) 而自動更新。同學可以參考這篇文章: https://ithelp.ithome.com.tw/articles/10230686?sc=pt
>
> (3) 可以參考第二點的特性，根據開發用途而做使用。如果沒有特殊需求，兩者都是可以用的。如果同學有興趣，以下連結有針對兩者效能的比較。
> https://www.zhihu.com/question/24702250

2. **Dora**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/ChiaLingShen/pen/ZELBqGN?editors=1011)，
我原本預期JS 第 7 行會讓我按了h2時，console會出現title，但卻只有在按input時，console才會出現view，想問下問題出在哪裡？

> 助教回覆: 這邊因為同學的程式碼第 4 - 6 行有執行一個判斷，如果點擊的目標不是 INPUT 就會中斷函式，因此點擊按鈕以外的區域都是沒有作用的喔。

3. **Morris**
老師助教同學好，這是我的codepen。想問一下為什麼在第六題裡面
原本預期在物件之外再寫上兩個名稱，但buildingName會一直顯示有error的錯誤？
備註：目前是再用一個物件包起來描述六角大別墅及地點
想問有沒有其他解法？ 或者我應該再回頭看一下哪一個部分的知識點短片呢？

> 助教回覆: 第六題目前最外層包的一個陣列，因此不可以使用物件的寫法。同學可以嘗試改成以下結構

{ 
  title: '六角大別墅',
  position: '高雄市',
  type: [{房屋的物件 1}, {房屋的物件 2}] 
}

4. John G
老師助教同學們好，這是我的 Codepen
https://codepen.io/john-chen-the-flexboxer/pen/RwKoqoq?editors=1011
我原本預期「JS 第 127 行會執行在個人排名上出現姓名，時間與"練習網址"」，
但卻出現「預期外的結果只有在Ming這個人底下才出現"練習網址"，其他人都沒有顯示」，想問下問題出在哪裡？我該如何修正?

> 助教回覆: 首先提醒一下同學，網頁的 HTML 結構一頁只能有一組 h1 喔。
> 同學程式碼第 126-128 行的判斷式有誤，應該修改如下:
>

data.forEach((el) => {
 if(item[0] == el.slackName){
    str += `<p>${el.codepenUrl}</p>`
 }
})

這樣的撰寫方式才會把 item[0] 拿去跟 data 的每一個元素做比對。

5. **Wira**
助教好，請問，totalObj={ };這個的內容只可以填入console.log(total)後得到的嗎？
可是如果 處理完total資料非常多 還是要複製貼上？如果直接把total放進去也不能用，有沒有什麼方法是可以把total這個資料直接置入到totalObj 而不是複製console.log後的資料呢？

> 助教回覆: 這邊還請同學提供 CodePen，助教比較好示範程式碼給你看喔。如果同學的程式碼出自以下範例: https://codepen.io/hexschool/pen/wvgwoBj?editors=0011， 則 total 與 totalObj 的內容是一樣的，直接使用 total 即可，不需要複製。
> 不過同學也是可以用 JS Es6 的展開運算子將 total 的內容複製到 totalObj 內，如下:
`totalObj = {...total};`
> 可以參考以下連結:
https://www.fooish.com/javascript/ES6/spread-rest-operator.html

6. **Carol Li**

老師助教同學們好，這是我的 [Codepen](https://codepen.io/carolli834/pen/VwPjorm?editors=1010)
想要試著做做看第六周支線任務，但是做到這裡下一步就不知道該怎麼做了，請問可以提點一下嗎?
另外想請問一下3/31每日任務，如果先寫成

data.forEach((item, index) => {
  total[item.jsGroup] += 1;
})

每個值就會出現null，請問一下這是為什麼?

> 助教回覆:
> 首先提醒一下你 JS 第 43 行的 Object.key() 應該改為 Object.keys() 程式才會是正確的喔。
>
> 目前同學的支線任務已經能夠將所有 data 呈現於畫面，接下來可以思考如何篩選呈現的資料以及做排序。
> 建議同學可以先參考「第六週支線任務提交區」中其他同學的寫法，如果遇到看不懂的程式碼可以再提出問題喔!
> https://hexschool-share.slack.com/archives/G01H6GA03UH/p1616554024484000
>
> 資料篩選的部分會用到 sort() 函式，同學可以參考以下連結:
> https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
>
> 關於每日任務的部分，這是因為 total[item.jsGroup] 如果還沒有被定義，是不能做 += 1 的。

if(total[item.jsGroup] === undefined) {
    total[item.jsGroup] = 1;
}

>這段判斷式的用意就是判斷在 total 中是否存在該 item.jsGroup 屬性，如果不存在 (undefined)，就定義一個，並賦值為 1。