大家好，我是一名菜鳥工程師，Chris，今天來到第 17 天，JS 的 ES6 （下）

ES6：JavaScript 的一個重要版本，ECMAScript 2015（稱為 ES6），引入許多新的特性和語法，讓 JavaScript 更易於使用

7 Rest Parameters 其餘運算子

把剩餘的東西包在一起 : 使用 ... 三個點，而且只能放在最後面

- 解構賦值的陣列

let arr = [3, 5, 8, 9, 2];
let [n1, n2, ...othersNum] = arr;

console.log(othersNum);  // 印出 [8, 9, 2]

- 解構賦值的物件

let obj = { a: "apple", b: "banana", c: "cherry", d: "durian" };
let { a, ...othersFruit } = obj;

console.log(othersNum);  // 印出 {b: 'banana', c: 'cherry', d: 'durian'}

- 函式參數

function num(a, b, ...others) {
  console.log(a, b); // 印出 1 2
  console.log(others); // 印出 [3, 4, 5, 6, 7]
}

num(1, 2, 3, 4, 5, 6, 7);

8 Modules 模組的輸出和輸入

使用 export 可以指定函式、物件、類別或變數等等，並透過 import 給外部檔案引用
- 預設 : 使用 default
預設的輸出 : 一個 js 檔案只能有一個 default export

輸出 :

export default 變數名稱;

範例： 在檔案 math.js 中

export default function add(a, b) {
  return a + b;
}

輸入 :

import 變數名稱 from “模組檔案路徑”;

範例： 在檔案 main.js 中

import add from './math.js';

- 其他 / 非預設的模組 : 每個模組中，可以有很多個 named exports
使用{}大括號包住輸出 / 輸入的變數名稱
輸出 :

export {變數名稱, 變數名稱, …} ;

範例： 在檔案 math.js 中

export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

輸入 :

import {變數名稱, 變數名稱, …} from “模組檔案路徑”;

範例： 在檔案 main.js 中

import { add, subtract } from './math.js';

- 重新命名的模組 : 在輸出和輸入時使用 as 來重新命名

輸出範例： 在檔案 math.js 中

export { add as addition, subtract as subtraction };

輸入範例： 在檔案 main.js 中

import { addition, subtraction } from './math.js';

- 混合使用(named, default)

輸出範例： 在檔案 math.js 中

export default function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

輸入範例： 在檔案 main.js 中
非預設的模組，使用{}大括號包起來

import customAdd, { subtract } from './math.js';

- 全部引入 : 使用 *，再自行定義一個模組名稱

import  * as myModule from './app.js'

9 非同步程式 : 在背景執行程式碼，花的時間可能較長

- 回呼函式 callback：把函式當作另一個函式的參數，並透過另一個函式來呼叫它

function showData(callback) {
  setTimeout(function () {
    callback('回呼函式');
  }, 1000);
}

function geetData(data) {
  console.log(data);
}

showData(geetData); // 印出 '回呼函式'

- Promise 物件：使用 new Promise() 建立 Promise 對象，接著使用 .then() 處理成功， .catch() 處理失敗

function showData() {
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve('Promise 物件');
    }, 1000);
  });
}

showData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

resolve 和 reject 是 Promise 建立函式的參數，它們通常用來表示 Promise 的成功和失敗，可以清楚表示 Promise 的狀態，讓程式碼容易閱讀和維護

- Async / Await：

function delayAdd(n1, n2, delayTime) {
  // 建立 Promise 物件: new Promise(執行函式)
  return new Promise(function (resolve) {
    setTimeout(() => {
      resolve(n1 + n2);
    }, delayTime);
  });
}

async function test() {
  let result = await delayAdd(3, 4, 2000);
  console.log(result);
}
test(); // 印出 7

- 定時 : 使用 setTimeout 和 setInterval 函式來執行一些操作

setTimeout(function () {
  console.log('1 second 後出現');
}, 1000);

setInterval(function () {
  console.log('每 2 秒出現一次');
}, 2000);

- XMLHttpRequest 和 Fetch API :

fetch('https://test.example.com')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

★★ 總結 : 以上就是常見的 ES6 運用

今天就介紹到這邊，那我們明天見囉～～

明天預計內容：JS 的冒泡事件!!!