Maxkit: ES6 語法 note

JavaScript ES6 的一些新的語法的筆記

var, let, const

var 的作用域為 function。
let 與 const 作用域為 block，也就是大括號 { } 裡面
const 宣告的變數無法被 re-assigned

Arrow Function

// 傳統 function 寫法
var call = function(someone) {
  return someone + ' is called';
}

var plus = function(A, B) {
  return A + B;
}

// arrow function
var call = someone => someone + ' is called';

var plus = (A, B) => A + B;

arrow function 的 this 是外面的 this，跟原本 function 的 this 不同

展開符號 ...

展開運算子 (Spread Operator) / 其餘運算子 (Rest Operator)

合併數個陣列

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = ['老媽', '老爸'];
let groupAll = [...groupA, ...groupB];
console.log(groupAll);
// ['小明', '杰倫', '阿姨','老媽', '老爸']

複製陣列（淺複製）

用展開符號來複製 A 陣列，則會是 call-by-value 的複製，修改 B 不會影響到 A。

如果直接 let groupB = groupA 會是 call-by-reference

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = [...groupA] // 新陣列
groupB.push('阿明');
console.log(groupA); // 不會有阿明

類陣列

用 querySelectorAll() 取出來的 NodeList 會以類陣列的形式呈現所有被選取的節點，但它卻不是真正的陣列。透過展開符號可以複製類陣列中的內容，藉此將類陣列轉為真正的陣列。

let doms = document.querySelectorAll('li'); // doms 為類陣列
let newDoms = [...doms]; // newDoms 為陣列

函式內建的 arguments 物件也是類陣列，arguments 會包含所有傳入函式的參數。

其餘參數

如果不確定要傳入函式的參數數量，可以在函式的最後一個參數前面加上展開符號（該參數就會變成其餘參數），就能把多傳入的參數值以陣列的形式，容納在其餘參數中。注意，函式裡只能有一個其餘參數，而且一定要放在最右邊。

function moreMoney(name, ...money) {
  console.log(name, money);
  // "Grace" [100, 200, 300, 400, 500]
}
moreMoney('Grace', 100, 200, 300, 400, 500);

ES Module 與 import 、 export

可將每個 JS 檔案當作一個獨立模組，A.js 匯出 export，在 B.js 匯入 import

// A.js
export const aString = "A String";

export function aFunction() {
    console.log("aFunction");
}

export const aObject = {a:1};


// B.js
import {aString, aFunction, aObject} from './A.js';

console.log(aString);
console.log(aObject);
aFunction();


// test.html
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <script type="module" src="./A.js"></script>
  <script type="module" src="./B.js"></script>

</body>
</html>

String Template

以往要在

裡面加上圖片

// HTML
<ul class="list">
  <li>
    <img src="logo.png">
  </li>
</ul>

// JS
// 用 const 選取 DOM
const list = document.querySelector('.list')
// 用 const 儲存要放入的圖片路徑
const imgURL = 'logo.png';

// 舊的寫法，要用字串連接
list.innerHTML = '<li><img src='+ imgURL +'></li>'

// 新的寫法，可用 `` 裡面放入 ${變數}
list.innetHTML = `<li><img src=" ${imgURL} "></li>`

可搭配陣列輸出

// 陣列
const people = [
  {
    name: '小明',
    friends: 2
  },
  {
    name: '阿姨',
    friends: 999
  },
  {
    name: '杰倫',
    friends: 0
  }
]

let newUl = `
  <ul> ${people.map(person =>
    `<li>我叫做 ${person.name}</li>`)
    .join('')}
  </ul>`

Destructing Assignment

將陣列或物件的資料直接拆開對應賦值

const user = {
    id: 42,
    name: 'juice',
    fullname: {
        first: 'orange',
        last: 'juice'
    }
};


const {id, name, fullname} =  user;

console.log(id);
console.log(name);
console.log(fullname);

const num = [1,2,3,4,5];

const [x,y] = num;

//1
console.log(x);
//2
console.log(y);

常用陣列function

forEach()

對每一個元素運算一次 fuction

map()

運算後，回傳新的陣列

reduce()

find()

只回傳第一個符合條件的元素

filter()

回傳符合條件的元素的新陣列

every()

所有元素都符合條件才回傳 true

some()

有部分元素符合條件就回傳 true

Promise

為解決非同步的問題，提供 Promise 物件

成功時要呼叫 resolve，失敗時呼叫 reject。

用 then 綁定 fullfilled 或 rejected 時，分別要執行的 function

// 宣告 promise 建構式
let newPromise = new Promise((resolve, reject) => {
  // 傳入 resolve 與 reject，表示資料成功與失敗
  let ran = parseInt(Math.random() * 2); // 隨機成功或失敗
  console.log('Promise 開始')
  if (ran) {
    setTimeout(function(){
      // 3 秒時間後，透過 resolve 來表示完成
      resolve('3 秒時間(fulfilled)');
    }, 3000);
  } else {
    // 回傳失敗
    reject('失敗中的失敗(rejected)')
  }

});

newPromise.then((data)=> {
  // 成功訊息 (需要 3 秒)
  console.log(data);
}).catch((err)=> {
  // 失敗訊息 (立即)
  console.log(err)
});

async, await

let runPromise = (someone, timer, success = true) => {
  console.log(`${someone} 開跑`);
  return new Promise((resolve, reject) => {
    // 傳入 resolve 與 reject，表示資料成功與失敗
    if (success) {
      setTimeout(function () {
        // 3 秒時間後，透過 resolve 來表示完成
        resolve(`${someone} 跑 ${timer / 1000} 秒時間(fulfilled)`);
      }, timer);
    } else {
      // 回傳失敗
      reject(`${someone} 跌倒失敗(rejected)`)
    }
  });
}

// 此段函式並不會影響其它函示的執行
runPromise('小明', 3000).then(someone => {
  console.log('小明', someone)
});
// 以下這段 console 會在 promise 結束前就執行
console.log('這裡執行了一段 console');

await 會等待 promise 的處理結果

// 此段函示會中斷其它函式的運行
let mingRun = await runPromise('小明', 2000)
console.log('跑完了:', mingRun);
let auntieRun = await runPromise('漂亮阿姨', 2500);
console.log('跑完了:', auntieRun);

async 類似 promise，但會將 await 包裝在裡面

const asyncRun = async () => {
  let mingRun = await runPromise('小明', 2000);
  let auntieRun = await runPromise('漂亮阿姨', 2500);
  return `${mingRun}, ${auntieRun}`
}
asyncRun().then(string => {
  console.log(string)
}).catch(response => {
  console.log(string)
})

References

[JS] JavaScript ES6 常用語法筆記

JavaScript Await 與 Async

2022/02/21

ES6 語法 note