阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 02月20日

ES6 到 ES15 - 功能清單 | JS

2025 年 2 月 19 日更新了部分 ES15 功能

你好，我的前端開發人員，今天我將寫下 ES 不同版本中引入的所有 ECMA 腳本功能，從 ES6 到最新的 ES15 版本。

讓我們開始吧...

ES6 功能

|特寫 |描述 |

|------------------------|---------------------------------------------|

|讓，const |區塊範圍變數宣告 |

|箭頭函數 |函數的簡短語法 |

|模板文字 |字串插值 |

|預設參數 |具有預設值的函數參數 |

|解構 |陣列和物件解包 |

|展開/休息 | ...陣列/物件的運算子 |

|增強物件 |簡寫屬性與方法 |

|課程 |物件導向程式設計語法 |

|模組（導入/導出）|模組化程式碼結構 |

|承諾 |非同步操作處理 |

|符號 |唯一辨識符 |

|地圖，設定 |集合的新資料結構 |

|發電機 |產生多種結果的函數 |

| for...of 迴圈 |遍歷可迭代物件 |

|弱映射，弱集合 |弱引用集合 |

範例程式碼

// #1 - Let and const example
let user = "Mysterio";
const userId = 1908894;

if (true) {
  let user = "Batman"; 
  console.log(user); // Batman (block-scoped)
}

console.log(user); // Mysterio

// #2 - Arrow functions
const fullname = (firstname, lastname) => firstname + " " +lastname;
console.log(fullname("Clark", "Kent")); // Clark Kent

// #3 - Template Literals
const fullnameWithTemplate = (firstname, lastname) => `${firstname} ${lastname}`;
console.log(fullnameWithTemplate("Clark", "Kent")); // Clark Kent

// #4 - Default parameter
const fullnameWithDefaultParams = (firstname="Bruce", lastname="Wayne") => `${firstname} ${lastname}`;
console.log(fullnameWithDefaultParams()); // Bruce Wayne

// #5 - Destructuring
// Array Destructuring
const [uid, uname] = [1, "Batman"];
console.log(uid, uname); // 1 Batman

// - Object Destructuring
const response = { id: 1, username: "Batman", email: "[email protected]" };
const { id, username, email } = response;
console.log(id, username, email); // 1 Alice [email protected]

// #6 - Spread and Rest Operators (...)
// Spread
const numbers = [1, 2, 3, 4, 5];
const [first, ...rest] = numbers;
console.log(first, rest); // 1 [2, 3, 4, 5]

// Rest
const floatingNumber  = [1.1, 2.2, 3.3, 4.4, 5.5];
const floatingAndDecimal = [...floatingNumber, ...numbers];
console.log(floatingAndDecimal); // [1.1, 2.2, 3.3, 4.4, 5.5, 1, 2, 3, 4, 5]

// #7 - Shorthand object literals
const newUser = {
  id,
  username,
  email
}
console.log(newUser) // { id: 1, username: 'Batman', email: '[email protected]' }

// #8 - Classes - Syntactic sugar for prototypes
class SuperHero {
    constructor(heroname) {
        this.heroname = heroname;
    }

    speak() {
        console.log(`${this.heroname} have won the battle.`);
    }
}

class Human extends SuperHero {
    isHuman() {
        console.log(`${this.heroname} is a also a human.`);
    }
}

const humanSuperhero = new Human('Batman');
humanSuperhero.isHuman(); // Batman is a also a human

// #9 - Import and export modules
// superhero.js
export const superhero = heroname => `I am, ${heroname}`;

// index.js
import { superhero } from './superhero.js';
console.log(greet('Batman')); // I am Batman

// #10 - Promises
const fetchData = () =>
    new Promise((resolve) => {
      setTimeout(() => resolve("This promise will resolve definitely after 1 second"), 1000);
    });

fetchData()
.then(console.log) // This promise will resolve definitely after 1 second
.catch(console.error); // Won't run as the promise is resolved not rejected

// #11 - Symbols
const doomsday1 = Symbol("doomsday");
const doomsday2 = Symbol("doomsday");

console.log(doomsday1 === doomsday2); // false (unique symbols)

// #12 - Map ans Set
// Map
const superHeroMap = new Map();
superHeroMap.set("name", "Barry Allen");
superHeroMap.set("age", 30);

console.log(superHeroMap.get("name")); // Barry Allen
console.log(superHeroMap.get("age")); // 30

// Set
const superHeroSet = new Set(["Batman", "Superman", "Wonder Woman","Flash"]);
console.log(superHeroSet); // Set(4) { 'Batman', 'Superman', 'Wonder Woman', 'Flash' }

superHeroSet.add("Aquaman");
console.log(superHeroSet); // Set(5) { 'Batman', 'Superman', 'Wonder Woman', 'Flash', 'Aquaman' }

superHeroSet.delete("Superman");
console.log(superHeroSet) // Set(4) { 'Batman', 'Wonder Woman', 'Flash', 'Aquaman' }

console.log(superHeroSet.has("Batman")); // true

// #13 - Iterators and generators
const superHeroIterators = ["Batman", "Superman", "Wonder Woman", "Flash"];
const iterator = superHeroIterators[Symbol.iterator]();

console.log(iterator.next()); // { value: 'Batman', done: false }
console.log(iterator.next()); // { value: 'Superman', done: false }
console.log(iterator.next()); // { value: 'Wonder Woman', done: false }
console.log(iterator.next()); // { value: 'Flash', done: false }

function* generateSuperHeroes() {
    yield "Batman";
    yield "Superman";
    yield "Wonder Woman";
  }

  const generator = generateSuperHeroes();
  console.log(generator.next().value); // Batman

// # 14 for...of loop
for (const hero of superHeroIterators) {
  console.log(hero);
} // Batman Superman Wonder Woman Flash

ES7 功能

|特寫 |描述 |

|----------------------------|---------------------------------------------------------|

|陣列.prototype.includes |檢查陣列是否包含特定值 |

|指數運算子** |冪運算的簡短語法 |

範例程式碼


// #1 - Array.prototype.includes()
const superheroes = ["Batman", "Superman", "Flash"];

if (superheroes.includes("Batman")) {
    console.log("Batman is bruce wayne!");
} // will print - Batman is bruce wayne!

// #2 Exponentiation operator
const usingPowerMethod = Math.pow(17, 3); 
const usingExponentiationOperator = 17 ** 3;

console.log(usingPowerMethod) // 4913
console.log(usingExponentiationOperator) // 4913

ES8 功能

|特寫 |描述 |

|---------------------------------|---------------------------------------------------------|

|異步/等待 |簡化非同步程式設計語法 |

|物件.值() |以陣列形式傳回物件的值 |

|物件.entries() |以陣列形式傳回物件的鍵值對 |

|物件.getOwnPropertyDescriptors() |檢索物件的所有屬性描述符 |

|函數中的尾隨逗號 |支援函數參數和呼叫中的尾隨逗號 |

| SharedArrayBuffer 與 Atomics |為線程啟用共享記憶體和原子操作 |

範例程式碼

// #1 - Async/Await - Syntactic sugar for Promises,
const fetchData = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error:', error);
    }
  };

fetchData();
// {
//    userId: 1,
//    id: 1,
//    title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
//    body: 'quia et suscipit\n' +
//          'suscipit recusandae consequuntur expedita et cum\n' +
//          'reprehenderit molestiae ut ut quas totam\n' +
//          'nostrum rerum est autem sunt rem eveniet architecto'
// }

// #2 - Object.values() - Returns an array of a given object’s own enumerable property values.
const superhero = { id: 9089, name: 'Batman', age: 32 };
console.log(Object.values(superhero)); // [9089, 'Batman', 32]

// #3 - Object.entries() - Returns an array of a given object’s own enumerable property [key, value] pairs.
console.log(Object.entries(superhero)); // [ [ 'id', 9089 ], [ 'name', 'Batman' ], [ 'age', 32 ] ]

// #4 - Object.getOwnPropertyDescriptors() - Returns property descriptors for all properties of an object.
console.log(Object.getOwnPropertyDescriptors(superhero));
/*
{
  id: { value: 9089, writable: true, enumerable: true, configurable: true },
  name: {
    value: 'Batman',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: { value: 32, writable: true, enumerable: true, configurable: true }
}
*/

注意 - 我沒有使用最後 2 個遊戲範例程式碼，因為它們很少使用或用於提前程式設計。

ES9 功能

|特寫 |描述 |

|--------------------------------|---------------------------------------------------------|

|與物體一起休息/蔓延| ...克隆與合併物件的語法 |

| for await...of 迴圈 |流或非同步可迭代物件的非同步迭代 |

|承諾.prototype.finally() |在承諾解決或拒絕後執行程式碼 |

| RegEx：s 標誌（dotAll）| .在正規表示式中符合換行符 |

| RegEx：命名擷取群組 |為了清晰起見，為捕獲組加入名稱 |

範例程式碼

// #1 - Rest/Spread Properties for Objects
const superhero = { id: 9810, name: 'Superman', age: 35 };
const { age, ...rest } = superhero;

console.log(rest); // { id: 9809, name: 'Superman' }

const updateSuperHero = { ...superhero, powers: ["flying", "super strength","heat vision"] };
console.log(updateSuperHero) // { id: 9810, name: 'Superman', age: 35, powers: [ 'flying', 'super strength', 'heat vision' ]}

// #2 -  Asynchronous Iteration with (for await...of) loop
async function fetchPosts() {
    const urls = ['https://jsonplaceholder.typicode.com/posts/1', 'https://jsonplaceholder.typicode.com/posts/2'];

    for await (const url of urls) {
      const response = await fetch(url);
      const post = await response.json();
      console.log(post.title);
    }
  }

fetchPosts();
// sunt aut facere repellat provident occaecati excepturi optio reprehenderit
// qui est esse

// #3 - Promise.prototype.finally() - Executes a callback after a promise is settled (either resolved or rejected).
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data.userId))
  .catch(error => console.error('Error:', error))
  .finally(() => console.log('Request completed'));
// 1
// Request completed

// #4 - Regular Expression Improvements
const regex = /bruce.wayne/s; // Allows . to match newline characters (\n).
console.log(regex.test('bruce\\wayne')); // true

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/; // Improves regex readability with named groups.
const match = dateRegex.exec('2025-02-17');

console.log(match.groups); // { year: '2025', month: '02', day: '17' }
console.log(match.groups.year); // 2025

ES10 功能

|特寫 |描述 |

|------------------------------------------------|------------------------------------------------|

|陣列.prototype.flat() |展平嵌套陣列 |

|陣列.prototype.flatMap() |一步映射和平展陣列 |

|物件.fromEntries() |將鍵值對轉換為物件 |

|字串.prototype.trimStart()/trimEnd() |修剪字串中的空格 |

|可選的 catch 綁定 | catch不帶錯誤參數的

|符號.描述 |檢索符號描述 |

|函數.prototype.toString() |返回精確的源程式碼 |

|格式良好的 JSON.stringify() |正確處理 Unicode 字元 |

| BigInt（第 3 階段）|支援大整數 |

範例程式碼

// #1 flat and flatMap methods for arrays
const nestedNumbers = [1, [2, [3, [4]]]];

console.log(nestedNumbers.flat());       // 1 level flattening [1, 2, [3, [4]]]
console.log(nestedNumbers.flat(2));      // 2 level flattening [1, 2, 3, [4]]
console.log(nestedNumbers.flat(Infinity)); // infinite flattening [1, 2, 3, 4]

// Combines map() and flat() in one method.
console.log(nestedNumbers.flat(Infinity).flatMap(x => [x, x * 2]));  // [1, 2, 2, 4, 3, 6, 4, 8]

// #2 - Object.fromEntries()
const superHeroArray = [['name', 'Bruce'], ['age', 32]];
const superHeroObject = Object.fromEntries(superHeroArray);

console.log(superHeroObject); // { name: 'Bruce', age: 32 }

// #3 - trimStart and trimEnd
const trimmedSuperHero = '    Superman    ';

console.log(trimmedSuperHero.trimStart()); // Superman___
console.log(trimmedSuperHero.trimEnd());  // ___Superman

// #4 - Optional Catch Binding in try...catch
try {
    throw new Error('Superhero not found!');
  } catch {
    console.log('An error occurred');
  }

// #5 - Symbol.description
const sym = Symbol('Bruce way is batman');
console.log(sym.description); // Bruce way is batman

// #6 - Function.prototype.toString() Revision - Returns the exact function body
function isSuperHero () {
    console.log('Bruce way is batman');
}

console.log(isSuperHero.toString());
// function isSuperHero () {
//    console.log('Bruce way is batman');
// }

// #7 - Well-Formed JSON.stringify() for emojis
console.log(JSON.stringify('\uD83D\uDE00')); // Outputs: '"😀"' 

// #8 - BigInt - Supports integers beyond Number.MAX_SAFE_INTEGER
const bigNumber = 123456789012345678901234567890n;
console.log(bigNumber + 10n); // 123456789012345678901234567900n

ES11 功能

|特寫 |描述 |

|---------------------------------|--------------------------------------------------------------------------------|

|大整數 |超出Number.MAX_SAFE_INTEGER大整數 |

|空值合併（ ?? ）|僅當左側為null / undefined時才返回右側操作數 |

|可選連結（ ?. ）|安全地存取嵌套屬性而不會導致錯誤 |

|承諾.全部解決() |所有承諾均已解決（無論是履行或拒絕）後解決 |

|全球此|所有 JavaScript 環境中的標準全域物件 |

|字串.prototype.matchAll() |傳回字串中所有匹配項的迭代器 |

|穩定 Array.prototype.sort() |確保穩定排序（相等的物品保留原始順序）|

|導入.meta |提供有關當前模組的元資料 |

範例程式碼

// #1 - Nullish Coalescing Operator (??) - It returns the right-hand operand when the left-hand operand is null or undefined.
const superhero = null;
const userName = superhero ?? 'Batman';
console.log(userName); // 'Batman'

const human = "Bruce";
const isHuman = human ?? 18;
console.log(isHuman)  // Bruce

// #2 -  Optional Chaining (?.) -  If any part of the chain is null or undefined, it short-circuits and returns undefined without throwing an error.
const superheroObject = { name: 'Batman', age: 32, human : {name: 'Bruce Wayne'} };

console.log(superheroObject?.name);  // 'Batman'
console.log(superheroObject.age); // 32
console.log(superheroObject.human.name.fullName); // undefined (no error)

// #3 - Promise.allSettled() - Returns a promise that resolves when all promises have been settled (either resolved or rejected).
const p1 = Promise.resolve("Batman");
const p2 = Promise.reject('No superhero found');
const p3 = Promise.resolve("Superman");

Promise.allSettled([p1, p2, p3])
  .then(results => results.forEach(result => console.log(result.status)));
// 'fulfilled', 'rejected', 'fulfilled'

// #4 - globalThis - A standard global object that works across all JavaScript environments

// #5 - matchAll() - Returns an iterator for all matches in a string
const regex = /man+/g;
const str = 'Superman Batman Flash';

const matches = str.matchAll(regex);

for (const match of matches) {
  console.log(match[0]); // man man
}

// #6 - import.meta
console.log(import.meta.url);  // Displays the current module's URL

ES12 功能

|特寫 |描述 |

|---------------------------------|----------------------------------------------------------------|

|邏輯賦值運算子 |將邏輯運算子與賦值結合（ &&= ， ||= ， ??= ）|

|承諾.any() |透過一系列承諾中第一個實現的承諾來解決 |

|弱引用 |允許引用物件而不阻止垃圾收集 |

| String.prototype.replaceAll() |替換字串中所有出現的子字串 |

|數字分隔符號 ( _ ) |使用底線（ _ ）使大數字更易讀|

|物件.hasOwn() |檢查物件是否具有特定屬性（比hasOwnProperty()更可靠）|

|增強 Array.prototype.sort() |數字排序現在無需自訂比較器即可正常工作 |

範例程式碼

// #1 - Logical Assignment Operators - &&, ||, ??
let x = 1;
x &&= 2; // x remains 2, because x was truthy
console.log(x); // 2

let y = 0;
y &&= 3; // y remains 0, because y is falsy
console.log(y); // 0

let a = null;
a ||= 'default'; // a is assigned 'default', because it's falsy
console.log(a); // 'default'

let b = null;
b ??= 'fallback'; // b is assigned 'fallback', because it's nullish
console.log(b); // 'fallback'

// #2 - Promise.any() - returns the first promise that resolves
const p1 = Promise.reject('Superhero not found');
const p2 = Promise.reject('Human not found');
const p3 = Promise.resolve('Martian found');

Promise.any([p1, p2, p3])
  .then(result => console.log(result)) // 'Martian found'
  .catch(err => console.log(err));

// #3 - WeakRefs - allow you to reference objects without preventing them from being garbage collected.
let superhero = { name: 'Batman' };
let weakRef = new WeakRef(superhero);

// Access the object (if it hasn't been garbage collected)
console.log(weakRef.deref()); // { name: 'Batman' }

// After `superhero` is dereferenced, it may be garbage collected
superhero = null; // superhero can be garbage collected

// #4 - replaceAll() - replacing all occurrences of a substring in a string
const text = 'Batman has the kryptonite in case superman goes dooms day';
const result = text.replaceAll('o', '0');
console.log(result); // 'Batman has the krypt0nite in case superman g0es d00ms day'

// #5 - Numeric Separators (_) for numbers
const price = 100_000_000;
console.log(price) // 100000000

// #6 - Object.hasOwn() to check whether an object has a property
const superheroObject = { name: 'Batman', age: 32 };
console.log(Object.hasOwn(superheroObject, 'name')); // true
console.log(Object.hasOwn(superheroObject, 'human')); // false

// #7 - Numeric sorting improved
const numbers = [10, 1, 21, 2];
numbers.sort(); // Default behavior: lexicographic sorting
console.log(numbers); // ['1', '10', '2', '21']

const sortedNumbers = [10, 1, 21, 2];
sortedNumbers.sort((a, b) => a - b); // Numeric sorting
console.log(sortedNumbers); // [1, 2, 10, 21]

ES13 功能

|特寫 |描述 |

|------------------------------------------------|----------------------------------------------------------------|

|陣列.at() |允許使用負索引存取陣列元素 |

|頂級等待|允許在沒有非同步函數的模組頂層await |

|帶有 FinalizationRegistry 的 WeakRefs |當物件被垃圾收集時管理資源和清理|

|錯誤原因 |為錯誤加入cause屬性以便更好地處理錯誤 |

|物件.hasOwn() |檢查物件是否直接具有屬性（非繼承）|

|改良的 copyWithin() |用於複製陣列元素的copyWithin()方法的增強 |

範例程式碼

// #1 - Array at() Method
const superheroes = ["Batman", "Superman", "Spiderman", "Ironman", "Captain America"];

console.log(superheroes.at(1)); // Superman (from the start)
console.log(superheroes.at(-1)); // Captain America (from the end)
console.log(superheroes.at(-2)); // Ironman (from the end)

// #2 - Top-Level await - Allows the use of await at the top level of modules without needing to wrap it in an async function
// In an ES module (e.g., `index.mjs`)
// const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
// const data = await response.json();
// console.log(data);

// #3 - WeakRefs with FinalizationRegistry
const registry = new FinalizationRegistry((value) => {
    console.log(`Object ${value} has been garbage collected`);
  });

let obj = { name: 'Bruce' };
registry.register(obj, 'Bruce');

obj = null; // Object will be collected, triggering the callback

// #4 - Error.cause - Provides a way to add a cause to an Error object. 

try {
    throw new Error('Something went wrong', { cause: 'Fake API call' });
  } catch (err) {
    console.log(err.message);  // 'Something went wrong'
    console.log(err.cause);    // 'Fake API call'
  }

// #5 - Array copyWithin() method
const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, 3); // Copies elements from index 3 to index 0
console.log(numbers); // [4, 5, 3, 4, 5]

ES14 功能

|特寫 |描述 |

|------------------------------------------------|----------------------------------------------------------------|

|陣列.prototype.toSorted() |傳回陣列的排序副本，而不改變原始陣列 |

|陣列.prototype.toReversed() |傳回陣列的反向副本，而不改變原始陣列 |

|陣列.prototype.toSplice() |傳回刪除/新增元素的陣列的修改副本，而不會改變原始陣列 |

|符號.原型.描述 |傳回符號描述的新屬性 |

|改進的 RegExp 功能 |使用諸如d類的標誌來增強 dotall 模式的正規表示式功能 |

|錯誤堆疊追蹤改進 |更詳細、準確的堆疊追蹤訊息，包括非同步函數 |

| Object.hasOwn() 改進 |檢查物件屬性的更可靠和首選的方法 |

範例程式碼

// #1 - Array.prototype.toSorted() - creates a sorted copy of an array without mutating the original array.
const superheros = ["Superman", "Batman", "Flash"];
const sortedSuperheros = superheros.toSorted(); 
console.log(sortedSuperheros); // [ 'Batman', 'Flash', 'Superman' ]
console.log(superheros); // Original array: [ 'Superman', 'Batman', 'Flash' ]

// #2 - Array.prototype.toReversed() - returns a new array with the elements in reversed order, without changing the original array.
const reversedSuperheros = superheros.toReversed();
console.log(reversedSuperheros); // [ 'Flash', 'Batman', 'Superman' ]
console.log(superheros); // Original array: [ 'Superman', 'Batman', 'Flash' ]

// #3 - Array.prototype.toSpliced() - returns a new array with elements removed and/or added, without mutating the original array
const splicedSuperheros = superheros.toSpliced(1, 1, "Aquaman");
console.log(splicedSuperheros); // [ 'Superman', 'Aquaman', 'Flash' ]
console.log(superheros); // Original array: [ 'Superman', 'Batman', 'Flash' ]

// #4 - Improved RegExp Features
const regex = /foo.bar/s;
const result = regex.test('foo\nbar'); // true, because `.` can now match newlines
console.log(result);

ES16 的一些功能

|特寫 |描述 |

|------------------------|----------------------------------------------------------------|

|分組 |允許我們根據給定的回調函數對物件陣列進行分組 |

|與 |改變給定索引的值 |

|設定方法 |並集，交集，差集 |

| withResolver | Promise withResolver 方法用於乾淨地解構承諾方法

範例程式碼

// #1 groupBy object method - Allows us to group the array of objects based on a given callback function
const superheroes = [
    { name: 'Batman', id: 9801 },
    { name: 'Superman', id: 9804 },
    { name: 'Flash', id: 9802 },
    { name: 'Aquaman', id: 9803 },
  ];

  const groupedById = Object.groupBy(superheroes,superhero => superhero.id);
  console.log(groupedById);
  /* 
  {
  '9801': [ { name: 'Batman', id: 9801 } ],
  '9802': [ { name: 'Flash', id: 9802 } ],
  '9803': [ { name: 'Aquaman', id: 9803 } ],
  '9804': [ { name: 'Superman', id: 9804 } ]
}
  */

const groupedByIdForBatmanOrSuperman = Object.groupBy(superheroes,superhero => superhero.id === 9801 || superhero.id === 9804 ? "Super hero is batman or aquaman": "Other superheroes");
console.log(groupedByIdForBatmanOrSuperman);
/*
{
  'Super hero is batman or aquaman': [ { name: 'Batman', id: 9801 }, { name: 'Superman', id: 9804 } ],
  'Other superheroes': [ { name: 'Flash', id: 9802 }, { name: 'Aquaman', id: 9803 } ]
}
 */

// #2 - with() method - changes a value of a given index and could be chained with other methods like map
const updateAquamanWithSupergirl = superheroes.with(3, { name: 'Supergirl', id: 9805 });
console.log(updateAquamanWithSupergirl)
/**
 [
  { name: 'Batman', id: 9801 },
  { name: 'Superman', id: 9804 },
  { name: 'Flash', id: 9802 },
  { name: 'Supergirl', id: 9805 }
]
 */

// #3 Set methods - union, intersection and difference
const superheroesSet = new Set(["Batman", "Superman", "Flash", "Aquaman"]);
const humansSet = new Set(["Bruce", "Clark", "Barry", "Aquaman"]);

const union = superheroesSet.union(humansSet);
const intersection = superheroesSet.intersection(humansSet);
const difference = superheroesSet.difference(humansSet);

console.log("Union - ",union)  // Set(7) {'Batman','Superman','Flash','Aquaman','Bruce','Clark','Barry'}
console.log("Intersection - ",intersection) // Set(1) { 'Aquaman' }
console.log("Difference - ",difference) // Difference -  Set(3) { 'Batman', 'Superman', 'Flash' }

// #4 Promise withResolver method for clean destructuring of the promise methods
const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => {
  resolve('I am batman');
}, 1000);

promise.then(console.log); // Output after 1 second: I am batman

這就是這篇文章的全部內容，如果我可以對這篇文章做任何改進，請告訴我