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

# 3/24 線上 Slack 助教

## 今日輪班助教時間

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

## 發問規範

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

## 注意

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

## 問題

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

---
1. **Jimmy Fang**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/pohxiqqo/pen/qBREdWe?editors=1011)
關於第六週 ajax 作業 我預期串接完後下拉選單顯示地區, js 第77行 regionSearch 沒在網頁上執行，有透過 js程式碼 console.log(dataAry); 第183行及 第16行，觀察非同步進行的順序除錯， 但還是找不出問題點，麻煩老師與助教指導，感謝。
> 助教回覆：同學可以發現在你的程式碼中第 91 行、第 93 行的 renderData() 有傳入參數，但是在你第 26 行的 renderData() 函式定義卻是沒有設定參數的。目前你的 renderData() 所渲染出來的畫面都是來自第 30 行的 dataAry 資料。可以將第 26 - 30 行的程式碼修正如下:

function renderData(data){
    let str = "";
    data.forEach(function (item,index){/*內部省略沒有寫*/})
}

> 並在呼叫 renderData() 的時候傳入資料的參數。

2. **方文文**
我是昨天問第三題的方文文
https://hackmd.io/xgdxUs4TTGyk1I1TUmb6Nw
想延續昨天的問題確認一下
所以助教的意思是這樣嗎>>>
* 發request所拿的資料....除了資料本身之外，還有一些發request這個行為的相關資訊(像是狀態碼、呼叫方法等等)
* 每個request提供的相關資訊不太一樣，所以可以先console一整包的資料，看看資料長甚麼樣子、真正的data被包在哪

> 助教回覆:
> 1. 這段的描述大致上是正確的，不過有小地方需要修正一下。AJAX 串接的方式是由我們發「request」，並接收遠端伺服器的「response」，因此透過 axios 取回的是伺服器所回傳的 response ，並包含了當初發送的一些 request 資訊、目標 data 等資料。
> 2. 同學的理解沒有錯喔，可以先透過 console.log 觀看 response 的結構，再做取用。

3. **Awei**

想問助教也可以讓其他同學知道～
我可以理解第一個 console.log 因為 this 是指向 prop 內的 fullname 所以是依林
（我有用紅線當指向處）
但是第二個 console.log 的 test 不是也是指向到 obj.prop.getFullname 我想說應該也是依林才對，但結果為什麼是杰倫呢？
附上 [程式碼](https://codepen.io/hong-wei/pen/oNBvbqX?editors=1111) 與圖片尋問助教，謝謝。

> 助教回覆:
> 同學問得不錯喔，以下會根據這篇文章的內容進行說明:
> https://wcc723.github.io/javascript/2019/03/18/JS-THIS/
> 根據卡斯伯老師的解釋，可以把 this 這個詞思考成「這一個物件」，且「在物件下的函式 this 為前者物件」，如下圖:
>

> 回到你的範例，
> 1. 在 console.log(obj.prop.getFullname()); 中，getFullname() 函式的前者物件為 prop，因此這邊的 this 便是指 prop 物件、this.fullname 為 "依林"。
>
> 2. 第二題也是一樣的道理，不過這邊的 this 指向的是 window 物件。可以先參考以下程式碼:
>

var fullname = '杰倫';
console.log(window.fullname); // 結果為 "杰倫"，fullname 為 window 物件下的一個屬性。

var obj = {
  fullname:'德華',
  prop:{
    fullname:'依林',
    getFullname:function(){
      return this.fullname;
    }
 }
};

var test = obj.prop.getFullname;
console.log(test()); // 結果為 "杰倫"，test() 為 window 物件下的一個方法。
console.log(test() === window.test());  // 結果為 true

>透過 var 宣告的變數範圍為全域，並會被加入到 window 物件內。因此可以發現 fullname 成為了 window 物件下的一個屬性、test() 成為了 window 物件下的一個方法。
>
>因此 console.log(test()) 實際上是透過 window 物件，去使用 getFullname() 這個函式。根據「在物件下的函式 this 為前者物件」這個規則，getFullname 所取到的 fullname 便會是 window 物件的 fullname 屬性 '杰倫'了。

4. Ming
老師助教同學們好，這是我的 Codepen => https://codepen.io/fortytrom/pen/GRrgvOR，
一共有兩個問題如下，謝謝！
1.預期在欄位輸入字串(ex:abc)，「JS 第 14 行console結果會是“true”」，但卻出現「false」，想問下問題出在哪裡？
2.預期在欄位輸入了小數點(ex:0.33)，「JS 第 13 行console結果會是“0.33"」，但卻出現「0」，想問下問題出在哪裡？

> 助教回覆:
> 首先提醒一下，同學 HTML 的第一行 input 如果有設定 type="number"，將是無法輸入非數字的喔。再來是 JS 的第 14 行，inputValue == "NaN" 應該改為 inputValue == NaN 才會是正確的 (不然會被當作是字串)
>
>1. 這邊會回傳 false 的原因是 NaN 不等於（== 、 != 、 === 、 !==）任何值，包括 NaN 本身。必須使用 Number.isNaN() 或 isNaN() 來確認某個數值是否為 NaN。
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/NaN#%E5%81%B5%E6%B8%AC%E6%98%AF%E5%90%A6%E7%82%BA_nan
>
>2. parseInt 是用來將輸入的字串轉成「整數」，如果要轉成小數，應該改用 parseFloat()。下方也附上 parseInt 的轉換規則給你參考
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/parseInt

5. OopsJoy

這是我的 [Codepen](https://codepen.io/oopsjoy/pen/oNYKMbP)，
我原本預期「填完套票資料、按新增套票按鈕後，新增套票欄位的Placeholder會再顯示」，但是沒有QQ ，想請問問題出在哪裡？ 謝謝老師助教同學們

> 助教回覆:
> 助教這邊的理解是同學想要做到「按下新增套票按鈕後，將表單的文字內容清空」這項功能。如果要實現此項功能，那麼在你的程式碼第 131 行後應該加上以下程式碼:

ticketName.value = "";
ticketImgUrl.value = "";
ticketRegion.value = "";
/* 以下依此類推 */

> 這樣就能做到表單清空的效果了。

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