---
# System prepended metadata

title: 第一系列

---

原始連結：https://bejewled-air-4cb.notion.site/0aa9e0be66d649b0a6443a2ccfe55be6

# 第一系列

## 非同步

**第一題：JavaScript 是同步語言**

**1. 正確**  - JS逐行執行的同步語言
~~2. 錯誤~~

**第二題：console.log 的值為**

```jsx
const text = '卡斯伯';
  setTimeout(() => {
    text = 'Ray'
}, 0);
console.log(text);
```
**1. 卡斯伯**  - setTimeout後會先等下方的程式執行後再執行，因此會先出現卡斯伯再報錯 (const 的變數不能重新定值)
~~2. Ray~~

## Promise

```jsx
const promiseSetTimeout = (status) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (status) {
        resolve('promiseSetTimeout 成功')
      } else {
        reject('promiseSetTimeout 失敗')
      }
    }, 10);
  })
}
```

**第三題：依據上方的 Promise 程式碼來說，何者正確**

**1. 執行後可以使用 resolve 接收正確的回傳，使用 reject 接收失敗的回應**
~~2. 執行後可能同時獲得成功或失敗的結果
3. 只要使用 then 就能接收成功以及失敗得結果~~
**4. 使用 then 接收正確，catch 接收失敗的結果**


**第四題：請問下方程式碼執行的結果順序為**

```jsx
const promiseSetTimeout = (status) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (status) {
        resolve('promiseSetTimeout 成功')
      } else {
        reject('promiseSetTimeout 失敗')
      }
    }, 10);
  })
}

promiseSetTimeout(2).then(res => {
  console.log(res);
  return promiseSetTimeout(0);
})
.then(res => {
  console.log(res);
  return promiseSetTimeout(2);
})
.catch(error => {
  console.log(error);
  return promiseSetTimeout(2);
})
.then(res => {
  console.log(res);
})
```
~~1. 成功 成功 失敗 成功~~
**2. 成功 失敗 成功**
~~3. 成功 失敗 成功 成功~~


**第五題：依據課程 API 來說，請問客戶全部產品列表是哪一個 API？**

請直接複製文件 API 貼上（避免有空白或其它格式）

[https://hexschool.github.io/vue3-courses-swaggerDoc/](https://hexschool.github.io/vue3-courses-swaggerDoc/)


​/v2​/api​/{api_path}​/products​/all




---


---

# 第二系列

第六題：下方的 console.log 結果為

```jsx
function fn() {
  console.log(this.myName);
}
const myName = '全域';
const obj = {
  myName: '小明',
  fn,
}
fn();
```

~~1. 全域
2. 小明~~
**3. 其它**  - // undefined, fn內沒有myName故為undefined

第七題：下方的 console.log 結果為

```jsx
function fn() {
  console.log(this.myName);
}
const myName = '全域';
const obj = {
  myName: '小明',
  fn,
}
obj.fn();
```

~~1. 全域~~
**2. 小明** - 找到obj內的myName
~~3. 其它~~

第八題、第九題：下方的 console.log 結果依序為

```jsx
function fn() {
  console.log(this.myName);
}
var myName = '全域';

const obj = {
  myName: '小明',
  fn,
  myFn() {
    // 問題 8： (1) '全域'  (2) '小明' (3) 其它
    this.fn();

    // 問題 9： (1) '全域'  (2) '小明' (3) 其它
    setTimeout(function() {
      this.fn();
    }, 0);
  }
}

obj.myFn();
```
**問題 8： (2) '小明'** - 會找到obj內的myName
**問題 9： (1) '全域'** - 會找到setTimeout內的myName

第十題：下方的結果為？

```jsx
const obj = {
  myName: '小明',
  arr: [1, 2, 3],
  myFn() {
    this.arr.forEach(item => {
      console.log(this.myName);
    })
  }
}

obj.myFn();
```

**1. 小明 * 3**
~~2. 1, 2, 3
3. 會出現錯誤~~


---


---

# 第三系列

第十一題：以 Vue 來說，下方程式碼結構是否正確

```jsx
createApp({
  data: {
    num: 1
  },
}).mount('#app');
```

~~1. 正確~~
**2. 不正確** - 應為data(){}

第十二題：Vue 元件初始化完成後，可以透過哪一個 Options API 執行：

~~1. methods
2. ready~~
**3. mounted**
~~4. mount~~

第十三題：以下程式碼來說完全符合關注點分離的概念

```jsx
<div id="app">
  {{ string }}
</div>

<script type="module">
import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.9/vue.esm-browser.js';

createApp({
  data() {
    return {
      string: ''
    }
  },
  mounted() {
    this.string = `<div>關注點分離</div>`
  }
}).mount('#app');
</script>
```

**1. 正確**
~~2. 錯誤~~

第十四題：關於以下程式碼何者正確

```jsx
<div id="app">
  <ul>
    <li v-for="item in people">
      {{ item.email }}
    </li>
  </ul>
  <button type="button" v-on:click="getRandomUserData">取得遠端資料</button>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        people: [],
      }
    },
    // 方法集
    methods: {
      getRandomUserData() {
        axios.get('https://randomuser.me/api/')
          .then((res) => {
            console.log(res); 
            this.people = res.data.results
          }).catch((err) => {
            console.log(err.response);
          });
      }
    },
    // 生命週期
    mounted() {
      this.getRandomUserData();
    }
  }).mount('#app');
</script>
```

~~1. 我不想回答，這裡面一定有詐~~
**2. 此段程式碼會在 mounted 取得遠端資料，以及點擊按鈕時取得資料**
~~3. getRandomUserData 中的 this 運用錯誤，導致無法正確取得資料
4. 當陣列為空時，v-for 會出現錯誤~~

第十五題：關於 Vue 的 console.log(this) 下圖何者描述正確

![](https://i.imgur.com/GH91omH.png)

~~1. 好可怕啊，這是什麼東西？~~
~~2. 這個東西不是來自於 this
3. 這是開發環境中才會有的，正式發佈後就不會存在~~
**4. 點擊 Target 後，就能看到預期呈現的資料**