原始連結：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) 下圖何者描述正確
~~1. 好可怕啊，這是什麼東西？~~
~~2. 這個東西不是來自於 this
3. 這是開發環境中才會有的，正式發佈後就不會存在~~
**4. 點擊 Target 後，就能看到預期呈現的資料**
Sign in with Wallet
Connect another wallet