ReactJS入門－JavaScipt ES6 基本介紹

6 min readAug 30, 2023

由於 React 利用了很多 ES6 標準的 JavaScript 的語法與特性，在開始介紹 JSX 之前必須要先熟悉 ES6 的語法。

ES6 是什麼？

可能有人會好奇 JavaScript 不就是 JavaScript 嗎？ ES6 是什麼？基本上只要把 ES6 當成是一種 JavaScript 的語法標準就好了，而 6 是版本。

變數宣告

var 變數名稱; 
var 變數名稱 = 初始值; 
let 變數名稱; 
let 變數名稱 = 初始值; 
const 變數名稱 = 初始值;

var

var 是過去常見的宣告方式，但是由於這樣宣告會是全域變數，不好管理。

let

let 只能在被宣告的區塊中讀取與改變，也就是區域變數。

const

const 與 let 一樣只能在被宣告的區塊中作用，但是只能被讀取，所以一開始宣告就必須給初始值，也就是常數。

函式的宣告

function 函式名稱 (參數){ // } 

var 函式名稱 = function (參數){ // }

這兩種是過去的宣告方式，也是大多數程式語言的宣告方式（利用 function 關鍵字定義）

這種是新的宣告方式，我稱為箭頭函式。這樣可以取代原本的 function 關鍵字結構，如下：

const testFunction = (A, B)=>{ return A+B; }

spread operator（…）

這個運算子可以搭配函數的參數使用，可以複製或展開一個陣列，例如：

const getAll=(...arg)=>{ 
  console.log(arg) console.log(...arg) 
} 

getAll("A","B","C");

執行之後會印出

[ ‘A’, ‘B’, ‘C’ ]
A B C

在參數的 …arg 會接收數個參數以陣列傳入，在函式裡面如果直接使用 arg 會是一個陣列，如果使用 …arg 則會展開陣列。

同異步問題：Promise

剛開始寫 JavaScript 可能還不會察覺，但是程式碼做的事情愈來愈多之後就會發現異步的 JavaScript 在做某些事情會順序錯亂，例如跟網路上的某個 API 拿資料，還沒拿到資料就先印出來，正確的順序應該是先拿到資料再印出來才對，這時候就必須使其執行順序固定，例如下圖。

如果要讓 PrintData 等待 getApi 執行完成再執行，可以使用以下方式：

宣告型別 宣告名稱 = new Promise((resolve, reject)=>{ getApi(); resolve(參數); }) 

宣告名稱 .then((參數，由resolve丟出)=>{ printData(); }) .catch((錯誤)=>{ //錯誤處理 }))

藉由丟出 Promise 之後，再搭配 then 方法，就可以讓程式執行變得有先後順序。

解構賦值

過去在處理陣列與物件個別屬性的時候必須使用迴圈或是一個一個取出分配很麻煩，在ES6 提供了比較方便的方式來進行：

const arr=[ "iphone" , "macbook" ]; 
const [ a , b ] = arr; 
console.log(a);
console.log(b);

這樣執行後， a 會印出 iphone，b 會印出 macbook。如果是物件的話也能使用這種方式操作：

const obj={ name: " macbook", model: "A1750" }; 
const { name: a , model: b } = obj; 
console.log(a); 
console.log(b);

這樣 a 就會印出 macbook， b 會印出 A1750。

模組化：module 分檔－import 與 export

現代許多程式語言都可以 import 其他程式碼進來使用，而 ES6 中也可以將變數、函式以及類別提供給其他程式使用。

函數與變數的輸出入

例如有一個叫做 hello.js 的檔案

export const helloWorld=()=>{ console.log("嗨"); } 
export const msg="hello";

如果要讓其他程式使用，必須搭配 export 關鍵字，否則外部是無法引入 hello.js 的。

如果要在另外一支 main.js 使用：

import {helloWorld, msg} from "./hello.js"; 
helloWorld(); 
console.log(msg);

別名：as

如果不想要輸入太長的名字，可以在引入的時候使用 as 關鍵詞來設定別名：

import {helloWorld as h , msg as m} from "./hello.js"; 
h(); 
console.log(m);

輸出物件

如果要把東西包成一個物件給他人存取，可以使用 export default 關鍵字：

const helloWorld=()=>{ console.log("hello world!"); } 
export default {helloWorld};

要注意的是，一個檔案可以有多個 export ，而 export 與 export default 也能共存，但是一個檔案只能有一個 export default。而在引入時，可以不必加上 { } 大括號：

import hello from "./hello.js"; 
hello.helloWorld();

類別宣告

ES6 的宣告方式與其他程式語言大同小異，宣告方式如下：

class 物件名稱 extends 繼承自誰{ constructor(){
 // 
} 

const 成員變數 = 初始值; 

// 函式A(){ // } 函式B(){ // } //... }

繼承自誰並不是必要的，但是未來在 class component 的部分會利用這樣宣告類別的方式進行。

DOM

網頁當中所看到的各個元素，瀏覽器會建立為一個一個的物件，並將個物件串連成為一個完整的樹（架構），這棵樹會記錄了如不同的元素與其屬性（<div> / <button>…等）、以及事件（如：onclick / onchange…等），這就叫做文件物件模型 Document Object Model, DOM。

一些常見的基本操作

document.getElementById ：就是用id在向DOM取得元素。
document.getElementById().width=... ：就是在修改元素在DOM的 width 屬性。

總結

到此，完全不熟悉 ES6 標準的讀者應該會對於語法有基本的認識，後續會以這些為基礎進入 JSX 的世界， JSX 可謂是 React 的核心之一。下一篇將會帶介紹 JSX 各項特色以及其使用的範例。

Originally published at https://studio-44s.tw.

ReactJS入門 －JavaScipt ES6 基本介紹