1-2 JavaScript 語法小測試與免費學習資源

因為 React 是奠基在 JavaScript 上的前端框架，在開始學習 React 之前勢必要先對 JavaScript 有基本的認識，否則會像是看天書一般格格不入，下面筆者提供一些 JavaScript 語法的小測試，請你先看看是否都能了解這些語法在做些什麼，如果覺得不太理解的話也不用擔心，最後我們會提供一些免費 JavaScript 線上學習資源，讓你能夠惡補一下再接著閱讀本書。

info

💡 如果對於下面語法仍不太熟悉，建議可以先到本章最後提供的免費學習資源進行練習。 💡 如果下面語法你一看就能知道在做什麼，就不要再花時間去看學習資源了，趕緊接著閱讀下去。

變數宣告#

問題：請試著使用 let 或 const 建立變數，變數名稱為 framework，變數值為 React

參考做法：

let framework = 'React';
const webFramework = 'React';

迴圈#

問題：請試著用 for 迴圈在畫面中輸出 1 ~ 10

參考做法：

for (let i = 1; i <= 10; i++) {
console.log(i);
}

條件判斷#

問題：承上，請搭配 if 語句，只有在 i 等於 5 的時候才顯示

參考做法：

for (let i = 1; i <= 10; i++) {
if (i === 5) {
console.log(i);
}
}

函式建立#

問題：建立一個名為 sayHello 的函式，函式執行後會輸出 "Hello"

參考做法：

function sayHello() {
console.log('Hello');
}
// 或者
const sayHello = function () {
console.log('Hello');
};

問題：呈上，現在在函式中可以帶入參數 name，假設 name 帶入的是 "React"，則呼叫函式後會輸出 "Hello React"

參考做法：

function sayHello(name) {
console.log('Hello', name);
}
sayHello('React');

陣列建立#

問題：請試著建立一個名稱為 frameworks 的陣列，裡面包含有元素 "React"、"Vue"、"Angular"

參考做法：

const frameworks = ['React', 'Vue', 'Angular'];

物件建立#

問題：請試著建立一個名稱為 smartPhone 的物件，接著請以你目前的手機為例，在物件裡面填入對應的屬性名稱和屬性值，其中屬性名稱需包含「裝置名稱 deviceName（字串）」, 「價格 price（數值）」、「品牌 brand（字串）」、「可購買平台 merchants（陣列）」

參考做法：

const smartPhone = {
deviceName: 'iPhone 11',
price: 24900,
brand: 'Apple',
merchants: ['apple store', 'pchome', 'momo', 'shopee'],
};

To React or not to React?#

如果對於上面基本的 JavaScript 語法你都能夠很快的理解並掌握，那麼可以直接繼續往下看，後面我們會先學習／複習一些在 React 中一定會使用到但對於初學者來說可能不是這麼熟悉的語法，若你已經是有些經驗的開發者，你可以快速翻閱挑自己較不熟悉的部分進行瀏覽即可；或者，如果你想要趕快開始體驗 React 的開發，你也可以先跳過後面的內容，等實際進行開發 React 時再回頭對應查看自己不清楚的部分。

如果對於上面提到關於 JavaScript 的基本語法還不太熟悉的話，這裡推薦線上免費學習資源 Codecademy - Learn JavaScript。在這個學習單元中，會把所有和 JavaScript 有關的基本語法都提到，你可以跟著單元實際在頁面上撰寫程式碼來進行練習，雖然是英文網站，但內容大多是和語法有關，不會有太過艱深難懂的詞彙。

Imgur

https://www.codecademy.com/learn/introduction-to-javascript

Edit this page