ECMAScript

console.log(Error.isError(new Error('boom'))) // true
console.log(Error.isError(new TypeError('x'))) // true
console.log(Error.isError({ message: 'fake' })) // false
console.log(Error.isError('error string')) // false

const key = Symbol('user-id')
const map = new WeakMap()

map.set(key, { name: 'Alice' })
console.log(map.get(key)) // { name: 'Alice' }

// Registered symbol 仍不允许
// map.set(Symbol.for('shared'), 1)  // TypeError

const xs = [0.1, 0.2, 0.3]

console.log(xs.reduce((a, b) => a + b)) // 0.6000000000000001
console.log(Math.sumPrecise(xs)) // 0.6

function tagged(tag) {
  return function (_value, context) {
    context.metadata[context.name] = tag
  }
}

class Service {
  @tagged('GET')
  list() {}

  @tagged('POST')
  create() {}
}

console.log(Service[Symbol.metadata])
// { list: 'GET', create: 'POST' }

// 自旋等待某个共享内存值变为 1
const buf = new SharedArrayBuffer(4)
const i32 = new Int32Array(buf)

while (Atomics.load(i32, 0) !== 1) {
  Atomics.pause()
}

import source wasmModule from './math.wasm'

// wasmModule 是 WebAssembly.Module 实例，可以多次实例化
const instance1 = await WebAssembly.instantiate(wasmModule)
const instance2 = await WebAssembly.instantiate(wasmModule)

const result = [1, 2, 3, 4, 5, 6, 7, 8]
  .values()
  .filter((x) => x % 2 === 0)
  .map((x) => x * 10)
  .take(3)
  .toArray()

console.log(result) // [20, 40, 60]

function* range(start, end) {
  for (let i = start; i < end; i++) yield i
}

const sum = Iterator.from(range(1, 6)).reduce((a, b) => a + b, 0)

console.log(sum) // 15

const a = new Set([1, 2, 3])
const b = new Set([2, 3, 4])

a.intersection(b) // Set { 2, 3 }
a.union(b) // Set { 1, 2, 3, 4 }
a.difference(b) // Set { 1 }
a.symmetricDifference(b) // Set { 1, 4 }

a.isSubsetOf(b) // false
a.isSupersetOf(b) // false
a.isDisjointFrom(b) // false

function maybeAsync(value) {
  if (value < 0) throw new Error('invalid')
  return value > 10 ? Promise.resolve(value) : value
}

Promise.try(() => maybeAsync(20))
  .then((v) => console.log(v)) // 20
  .catch((e) => console.error(e))

Promise.try(() => maybeAsync(-1))
  .then((v) => console.log(v))
  .catch((e) => console.error(e.message)) // 'invalid'

const input = 'hello.world+?'
const re = new RegExp(RegExp.escape(input))

console.log(re.test('hello.world+?')) // true
console.log(re.source) // 'hello\\.world\\+\\?'

import data from './data.json' with { type: 'json' }
import styles from './styles.css' with { type: 'css' }

// 动态 import 也支持
const config = await import('./config.json', { with: { type: 'json' } })

function openFile(path) {
  const handle = { path, closed: false }
  return {
    handle,
    [Symbol.dispose]() {
      handle.closed = true
      console.log(`closed ${path}`)
    },
  }
}

{
  using file = openFile('a.txt')
  // ...使用 file
} // 离开块时自动调用 file[Symbol.dispose]()

async function withDb() {
  await using db = await openDB()
  await db.query('SELECT 1')
} // 退出时自动 await db[Symbol.asyncDispose]()

{
  using stack = new DisposableStack()
  const a = stack.use(openFile('a.txt'))
  const b = stack.use(openFile('b.txt'))
  // ...
} // 先释放 b，再释放 a

const arr = new Float16Array([1.5, 2.25, 3.125])

console.log(arr[0]) // 1.5
console.log(Math.f16round(1.337)) // 1.337890625

const buf = new ArrayBuffer(8)
const view = new DataView(buf)
view.setFloat16(0, 3.14)
console.log(view.getFloat16(0)) // 3.140625

const inventory = [
  { name: 'asparagus', type: 'vegetables', quantity: 5 },
  { name: 'bananas', type: 'fruit', quantity: 0 },
  { name: 'goat', type: 'meat', quantity: 23 },
  { name: 'cherries', type: 'fruit', quantity: 5 },
  { name: 'fish', type: 'meat', quantity: 22 },
]

// 根据元素的 type 属性的值对元素进行分组
const result = Object.groupBy(inventory, ({ type }) => type)

console.log(result)

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: 'bananas', type: 'fruit', quantity: 0 },
    { name: 'cherries', type: 'fruit', quantity: 5 }
  ],
  meat: [
    { name: 'goat', type: 'meat', quantity: 23 },
    { name: 'fish', type: 'meat', quantity: 22 }
  ]
}
*/

const inventory = [
  { name: 'asparagus', type: 'vegetables', quantity: 5 },
  { name: 'bananas', type: 'fruit', quantity: 0 },
  { name: 'goat', type: 'meat', quantity: 23 },
  { name: 'cherries', type: 'fruit', quantity: 5 },
  { name: 'fish', type: 'meat', quantity: 22 },
]

// 根据 quantity 字段的值将项目分为不同分组(sufficient/restock)。
function myCallback({ quantity }) {
  return quantity > 5 ? 'sufficient' : 'restock'
}

const result2 = Object.groupBy(inventory, myCallback)

console.log(result)

/* Result is:
{
  restock: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
    { name: 'bananas', type: 'fruit', quantity: 0 },
    { name: 'cherries', type: 'fruit', quantity: 5 }
  ],
  sufficient: [
    { name: 'goat', type: 'meat', quantity: 23 },
    { name: 'fish', type: 'meat', quantity: 22 }
  ]
}
*/

const inventory = [
  { name: 'asparagus', type: 'vegetables', quantity: 5 },
  { name: 'bananas', type: 'fruit', quantity: 0 },
  { name: 'goat', type: 'meat', quantity: 23 },
  { name: 'cherries', type: 'fruit', quantity: 5 },
  { name: 'fish', type: 'meat', quantity: 22 },
]

const restock = { restock: true }
const sufficient = { restock: false }
const result = Map.groupBy(inventory, ({ quantity }) =>
  quantity < 6 ? restock : sufficient,
)

console.log(result.get(restock))

/* Result is:
[
  { name: 'asparagus', type: 'vegetables', quantity: 5 },
  { name: 'bananas', type: 'fruit', quantity: 0 },
  { name: 'cherries', type: 'fruit', quantity: 5 },
]
*/

console.log(result.get(sufficient))

/* Result is:
[
  { name: 'goat', type: 'meat', quantity: 23 },
  { name: 'fish', type: 'meat', quantity: 22 },
]
*/

const { promise, resolve, reject } = Promise.withResolvers()

// eslint-disable-next-line prefer-regex-literals
const regex1 = new RegExp(/cdcdcd/v)
// eslint-disable-next-line prefer-regex-literals
const regex2 = new RegExp(/cdcdcd/)

console.log(regex1.unicodeSets)
// Expected output: true

console.log(regex2.unicodeSets)
// Expected output: false

// eslint-disable-next-line prefer-regex-literals
const regex1 = new RegExp('[\\p{Lowercase}&&\\p{Script=Greek}]')
// eslint-disable-next-line prefer-regex-literals
const regex2 = new RegExp('[\\p{Lowercase}&&\\p{Script=Greek}]', 'v')

console.log(regex1.unicodeSets)
// Expected output: false

console.log(regex2.unicodeSets)
// Expected output: true

console.log(/^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/u.test('cdhj996@gmail.com')) // true
console.log(/^[a-zA-Z0-9+_.\-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/v.test('cdhj996@gmail.com')) // true

// 不允许超过预先定义的 maxByteLength, resize 可增大也可以减小
const buffer = new ArrayBuffer(2, { maxByteLength: 32 })

// byteLength 属性是一个访问器属性，它的 set 访问器函数是 undefined，这意味着你只能读取这个属性。
// 该值在数组创建时确定，并且无法修改。
// 如果这个 ArrayBuffer 被分离，则此属性返回 0。
console.log(buffer.byteLength)
// Expected output: 2

console.log(buffer.resize(12))
// Expected output: undefined

console.log(buffer.byteLength)
// Expected output: 12

console.log(buffer.resize(100))
// Uncaught RangeError: ArrayBuffer.prototype.resize: Invalid length parameter
//     at ArrayBuffer.resize (<anonymous>)
//     at <anonymous>:10:20

const original = new ArrayBuffer(16)
const transferred = original.transfer()

// detached 属性是一个访问器属性，其 set 访问器函数是 undefined，这意味着你只能读取此属性。
// 该属性的值在创建 ArrayBuffer 时设置为 false。
// 如果 ArrayBuffer 已被传输，则该值将变为 true，这将使该实例从其底层内存中分离。
// 一旦缓冲区被分离，它就不再可用。
console.log(original.detached)
// Expected output: true

console.log(transferred.detached)
// Expected output: false

const sab = new SharedArrayBuffer(1024)
worker.postMessage(sab)

const strings = [
  // 单独的前导代理
  'ab\uD800',
  'ab\uD800c',
  // 单独的后尾代理
  '\uDFFFab',
  'c\uDFFFab',
  // 格式正确
  'abc',
  'ab\uD83D\uDE04c',
]

for (const str of strings) {
  console.log(str.isWellFormed())
}

// Logs:
// false
// false
// false
// false
// true
// true

const strings = [
  // 单独的前导代理
  'ab\uD800',
  'ab\uD800c',
  // 单独的后尾代理
  '\uDFFFab',
  'c\uDFFFab',
  // 格式正确
  'abc',
  'ab\uD83D\uDE04c',
]

for (const str of strings) {
  console.log(str.toWellFormed())
}

// Logs:
// "ab�"
// "ab�c"
// "�ab"
// "c�ab"
// "abc"
// "ab😄c"

const sab = new SharedArrayBuffer(1024)
const int32 = new Int32Array(sab)

// 令一个读取线程休眠并在位置 0 处等待，预期该位置的值为 0。result.value 将是一个 promise。
const result = Atomics.waitAsync(int32, 0, 0, 1000)
// { async: true, value: Promise {<pending>} }

// 在该读取线程或另一个线程中，对内存位置 0 调用以令该 promise 解决为 "ok"。
Atomics.notify(int32, 0)
// { async: true, value: Promise {<fulfilled>: 'ok'} }

// 如果它没有解决为 "ok"，则共享内存该位置的值不符合预期（value 将是 "not-equal" 而不是一个 promise）或已经超时（该 promise 将解决为 "time-out"）。

// toSorted has the same signature as sort, but it creates a new array instead of operating on the array itself.
const arr = [5, 4, 2, 3, 1]
console.log(arr.sort()) // [1, 2, 3, 4, 5]
console.log(arr.toSorted()) // [1, 2, 3, 4, 5]

// toSorted also accepts a single optional argument, a comparator function.
// For example, we could use to create a new array in descending order,
const numbers = [10, 5, 2, 7, 3, 9, 1, 6, 4]
const sortedNumbers = numbers.toSorted((a, b) => {
  return b - a
})
console.log(sortedNumbers) // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

// Also, note that this can be applied to arrays of objects.
// In such cases, you must provide a comparator function that utilizes the data within the objects since there is no inherent ordering for objects.
const objects = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Bill', age: 40 },
  { name: 'Mary', age: 20 },
]
const sortedObjects = objects.toSorted((a, b) => {
  return a.name.localeCompare(b.name)
})
console.log(sortedObjects)
// [{"name":"Bill","age":40},{"name":"Jane","age":25},{"name":"John","age":30},{"name":"Mary","age":20}]

const array = [1, 2, 3]
console.log(array.toReversed()) // [3, 2, 1]
console.log(array) // [1, 2, 3]

const array = ['I', 'am', 'the', 'cd']

// Replace the string "cd" with "wd".
const newArray = array.with(3, 'wd')

console.log(newArray) // ['I', 'am', 'the', 'wd']
console.log(array) // ['I', 'am', 'the', 'cd']

const array = [5, 12, 50, 100, 44]
console.log(array.findLast((element) => element > 45)) // 100

console.log(array.find((element) => element > 45)) // 50

const array = [5, 12, 50, 100, 44]
console.log(array.findLastIndex((element) => element > 45)) // 3

console.log(array.findIndex((element) => element > 45)) // 2

// 通过 toSpliced() 来删除、添加和替换数组中的元素，并生成一个新的数组
// 比使用 slice() 和 concat() 更高效

const months = ['Jan', 'Mar', 'Apr', 'May']

// Inserting an element at index 1
const months2 = months.toSpliced(1, 0, 'Feb')
console.log(months2) // ["Jan", "Feb", "Mar", "Apr", "May"]

// Deleting two elements starting from index 2
const months3 = months2.toSpliced(2, 2)
console.log(months3) // ["Jan", "Feb", "May"]

// Replacing one element at index 1 with two new elements
const months4 = months3.toSpliced(1, 1, 'Feb', 'Mar')
console.log(months4) // ["Jan", "Feb", "Mar", "May"]

// Original array is not modified
console.log(months) // ["Jan", "Mar", "Apr", "May"]

// The toSpliced() method always creates a dense array.

// eslint-disable-next-line no-sparse-arrays
const arr = [1, , 3, 4, , 6]
console.log(arr.toSpliced(1, 2)) // [1, 4, undefined, 6]

// The toSpliced() method reads the length property of this.
// It then reads the integer-keyed properties needed and writes them into the new array.

const arrayLike = {
  length: 3,
  unrelated: 'foo',
  0: 5,
  2: 4,
}
console.log(Array.prototype.toSpliced.call(arrayLike, 0, 1, 2, 3))
// [2, 3, undefined, 4]

#!/usr/bin/env node

console.log("Hello, world!");

$ ./hello.js
Hello, world!

const map = new WeakMap() // create a weak map

function useSymbol(symbol) {
  doSomethingWith(symbol)

  let called = map.get(symbol) || 0
  called++ // called one more time

  if (called > 2) console.log('Call more than twice')

  map.set(symbol, called)
}

const mySymbol = Symbol('FooBar')
useSymbol(mySymbol)
useSymbol(mySymbol)
useSymbol(mySymbol)

// mySymbol = null;
// eslint-disable-next-line no-delete-var
delete mySymbol // No live references are left to mySymbol, so we can count on the garbage collector eliminating the entry in the weakMap when it runs (eventually)

{
  class ES13Class {
    name = 'wudi'
    age: unknown
    sex: unknown
  }

  const es13class = new ES13Class()

  console.log(es13class.name) // 'wudi'
  console.log(es13class.age) // undefined
  console.log(es13class.sex) // undefined
}

{
  class ES13Class {
    #name: string // 私有字段
    #age = 18

    constructor(name: string) {
      this.#name = name
    }

    getName() {
      return this.#name
    }

    getAge() {
      return this.#age
    }
  }

  const es13class = new ES13Class('wudi')

  console.log(es13class.getName()) // 'wudi'
  console.log(es13class.getAge()) // 18
  
  // console.log(es13class.#name) // SyntaxError: Private field '#name' must be declared in an enclosing class
}

{
  class ES13Class {
    #name: string

    constructor(name: string) {
      this.#name = name
    }

    // 私有方法
    #formatName() {
      return `My name is: ${this.#name}`
    }

    // 私有 getter
    get #privateAge() {
      return 18
    }

    // 私有 setter
    set #privateName(value: string) {
      this.#name = value
    }

    getFormattedName() {
      return this.#formatName()
    }
  }

  const es13class = new ES13Class('wudi')
  console.log(es13class.getFormattedName()) // 'My name is: wudi'
  
  // console.log(es13class.#formatName()) // SyntaxError: Private field '#formatName' must be declared in an enclosing class
}

{
  class ES13Class {
    static baseNum = 100
    static #privateStaticNum = 200

    // 静态方法
    static getBaseNum() {
      return this.baseNum
    }

    // 静态方法访问私有静态字段
    static getPrivateNum() {
      return this.#privateStaticNum
    }

    // 静态箭头函数
    static doubleBaseNum = () => this.baseNum * 2
  }

  console.log(ES13Class.baseNum) // 100
  console.log(ES13Class.getBaseNum()) // 100
  console.log(ES13Class.getPrivateNum()) // 200
  console.log(ES13Class.doubleBaseNum()) // 200

  // 实例无法访问静态成员
  const instance = new ES13Class()
  // console.log(instance.baseNum) // undefined
}

{
  let getPrivateData: (obj: any) => any
  
  class ES13Class {
    static config = 'default'
    static #privateData = []

    #instanceData

    constructor(data: any) {
      this.#instanceData = { data }
    }

    static {
      // 静态初始化块
      console.log('Class is being initialized')
      this.#privateData = ['item1', 'item2']
      
      // 导出访问私有数据的函数
      getPrivateData = (obj) => {
        if (!(obj instanceof ES13Class)) {
          throw new Error('Invalid object')
        }
        return obj.#instanceData
      }
    }

    static {
      // 可以有多个静态块
      this.config = 'initialized'
    }
  }

  console.log(ES13Class.config) // 'initialized'
  
  const instance = new ES13Class({ value: 42 })
  console.log(getPrivateData(instance)) // { data: { value: 42 } }
}

{
  class ES13Class {
    #brand = 'ES13'

    static hasValidBrand(obj: any) {
      // 检查对象是否包含私有字段 #brand
      return #brand in obj
    }

    static getBrand(obj: any) {
      if (!(#brand in obj)) {
        throw new Error('Object does not have valid brand')
      }
      return obj.#brand
    }
  }

  const validInstance = new ES13Class()
  const invalidObject = {}

  console.log(ES13Class.hasValidBrand(validInstance)) // true
  console.log(ES13Class.hasValidBrand(invalidObject)) // false

  console.log(ES13Class.getBrand(validInstance)) // 'ES13'
  // console.log(ES13Class.getBrand(invalidObject)) // Error: Object does not have valid brand
}

{
  const obj = {
    name: 'wudi',
    age: 18
  }

  // 传统方式
  console.log(Object.prototype.hasOwnProperty.call(obj, 'name')) // true

  // 新方式 - 更简洁安全
  console.log(Object.hasOwn(obj, 'name')) // true
  console.log(Object.hasOwn(obj, 'height')) // false

  // 处理 null 原型对象
  const nullObj = Object.create(null)
  nullObj.prop = 'value'
  
  // console.log(nullObj.hasOwnProperty('prop')) // TypeError: nullObj.hasOwnProperty is not a function
  console.log(Object.hasOwn(nullObj, 'prop')) // true
}

{
  const arr = ['a', 'b', 'c', 'd', 'e']

  // 传统方式获取最后一个元素
  console.log(arr[arr.length - 1]) // 'e'
  
  // 使用 at() 方法
  console.log(arr.at(-1)) // 'e'
  console.log(arr.at(-2)) // 'd'
  console.log(arr.at(0)) // 'a'
  console.log(arr.at(1)) // 'b'

  // 超出范围返回 undefined
  console.log(arr.at(10)) // undefined
  console.log(arr.at(-10)) // undefined

  // 链式调用中的便利性
  const result = [1, 2, 3]
    .map(x => x * 2)
    .filter(x => x > 2)
    .at(-1) // 获取最后一个元素
  
  console.log(result) // 6
}

{
  function parseData(data: string) {
    try {
      return JSON.parse(data)
    } catch (err) {
      throw new Error('Failed to parse data', { cause: err })
    }
  }

  function processFile(filename: string) {
    try {
      // 模拟文件读取错误
      throw new Error(`File not found: ${filename}`)
    } catch (err) {
      throw new Error('Failed to process file', { cause: err })
    }
  }

  try {
    processFile('config.json')
  } catch (error) {
    console.log(error.message) // 'Failed to process file'
    console.log(error.cause?.message) // 'File not found: config.json'
    
    // 错误链追踪
    let currentError = error
    while (currentError) {
      console.log('Error:', currentError.message)
      currentError = currentError.cause
    }
  }
}

{
  const regex = /t(e)(st(\d?))/d
  const str = 'test1test2'
  
  const match = regex.exec(str)
  
  console.log(match[0]) // 'test1'
  console.log(match.indices[0]) // [0, 5] - 整个匹配的位置
  console.log(match.indices[1]) // [1, 2] - 第一个捕获组 'e' 的位置
  console.log(match.indices[2]) // [2, 5] - 第二个捕获组 'st1' 的位置
  console.log(match.indices[3]) // [4, 5] - 第三个捕获组 '1' 的位置

  // 命名捕获组的索引
  const namedRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/d
  const dateStr = '2022-12-25'
  const dateMatch = namedRegex.exec(dateStr)
  
  console.log(dateMatch.indices.groups.year) // [0, 4]
  console.log(dateMatch.indices.groups.month) // [5, 7]
  console.log(dateMatch.indices.groups.day) // [8, 10]
}

{
  // 在模块顶层使用 await
  const fetchData = () => {
    return new Promise((resolve) => {
      setTimeout(() => resolve('Data loaded'), 1000)
    })
  }

  // 顶层 await
  const data = await fetchData()
  console.log(data) // 'Data loaded'

  // 动态导入
  const { default: moment } = await import('moment')
  
  // 条件性导入
  const locale = 'zh-cn'
  const localeModule = await import(`./locales/${locale}.js`)

  // 异步配置初始化
  const config = await fetch('/api/config').then(res => res.json())
  console.log('Config loaded:', config)
}

// 注意：需要在模块环境中使用，文件需要有 import/export 或添加 export {}
export {}

{
  let num1 = 5
  let num2 = 10

  num1 &&= num2
  console.log(num1) // 10

  let num3 = 0
  num3 &&= 99
  console.log(num3) // 0 (因为 0 是假值，不会赋值)

  // 等价于
  // num1 && (num1 = num2)
  // if (num1) {
  //   num1 = num2
  // }
}

{
  let num1
  let num2 = 10

  num1 ||= num2
  console.log(num1) // 10

  let num3 = 'existing'
  num3 ||= 'default'
  console.log(num3) // 'existing' (已有值，不会被替换)

  // 等价于
  // num1 || (num1 = num2)
  // if (!num1) {
  //   num1 = num2
  // }

  // 实际应用：设置默认值
  let config = {}
  config.timeout ||= 5000
  config.retries ||= 3
  console.log(config) // { timeout: 5000, retries: 3 }
}

{
  let num1
  let num2 = 10

  num1 ??= num2
  console.log(num1) // 10

  // 与 ||= 的区别
  let num3 = false
  num3 ??= num2
  console.log(num3) // false (false 不是 null 或 undefined，不会赋值)

  let num4 = null
  num4 ??= 123
  console.log(num4) // 123

  // 等价于
  // num1 ?? (num1 = num2)

  // 实际应用：保留 0、false、'' 等假值
  let settings = {
    volume: 0,
    enabled: false,
    theme: null
  }
  
  settings.volume ??= 50    // 保持 0
  settings.enabled ??= true // 保持 false
  settings.theme ??= 'dark' // 设置为 'dark'
  
  console.log(settings) // { volume: 0, enabled: false, theme: 'dark' }
}

{
  // 整数
  const million = 1_000_000
  const billion = 1_000_000_000
  
  console.log(million) // 1000000
  console.log(billion) // 1000000000

  // 小数
  const decimal = 1000.12_34_56
  console.log(decimal) // 1000.123456

  // 二进制、八进制、十六进制
  const binary = 0b1010_0001_1000_0101
  const octal = 0o777_444
  const hex = 0xFF_EC_DE_5E

  console.log(binary) // 41349
  console.log(octal) // 261924
  console.log(hex) // 4293837150

  // 科学计数法
  const scientific = 1.234_567e8
  console.log(scientific) // 123456700

  // 注意：分隔符不影响实际值，只是视觉上的分组
  console.log(1_000 === 1000) // true
}

{
  // 基本用法：返回最快成功的 Promise
  Promise.any([
    new Promise(resolve => setTimeout(() => resolve('Fast'), 100)),
    new Promise(resolve => setTimeout(() => resolve('Slow'), 500)),
    Promise.reject('Error')
  ])
  .then(result => console.log(result)) // 'Fast'

  // 与 Promise.race() 的区别
  Promise.race([
    Promise.reject('Error 1'),
    new Promise(resolve => setTimeout(() => resolve('Success'), 100))
  ])
  .catch(err => console.log('Race failed:', err)) // 'Race failed: Error 1'

  Promise.any([
    Promise.reject('Error 1'),
    new Promise(resolve => setTimeout(() => resolve('Success'), 100))
  ])
  .then(result => console.log('Any succeeded:', result)) // 'Any succeeded: Success'

  // 所有 Promise 都失败时返回 AggregateError
  Promise.any([
    Promise.reject('Error 1'),
    Promise.reject('Error 2'),
    Promise.reject('Error 3')
  ])
  .catch(err => {
    console.log(err.name) // 'AggregateError'
    console.log(err.errors) // ['Error 1', 'Error 2', 'Error 3']
  })

  // 实际应用：多个资源竞争加载
  async function loadResource() {
    try {
      const data = await Promise.any([
        fetch('/api/data-server1'),
        fetch('/api/data-server2'),
        fetch('/api/data-server3')
      ])
      return await data.json()
    } catch (error) {
      console.log('All servers failed:', error.errors)
      throw new Error('All servers are unavailable')
    }
  }
}

{
  const str = 'I belong to ES12 new API, ES12 is great, ES12!'

  // 传统方法：只替换第一个匹配
  console.log(str.replace('ES12', 'ES2021')) 
  // 'I belong to ES2021 new API, ES12 is great, ES12!'

  // 传统方法：使用全局正则替换所有
  console.log(str.replace(/ES12/g, 'ES2021'))
  // 'I belong to ES2021 new API, ES2021 is great, ES2021!'

  // 新方法：replaceAll 直接替换所有
  console.log(str.replaceAll('ES12', 'ES2021'))
  // 'I belong to ES2021 new API, ES2021 is great, ES2021!'

  // 使用函数作为替换值
  const result = 'hello world hello'.replaceAll('hello', (match, offset) => {
    return `${match}(${offset})`
  })
  console.log(result) // 'hello(0) world hello(12)'

  // 使用正则表达式（必须带全局标志）
  console.log(str.replaceAll(/ES12/g, 'ES2021'))
  // 'I belong to ES2021 new API, ES2021 is great, ES2021!'

  // 错误用法：正则表达式不带全局标志会报错
  // console.log(str.replaceAll(/ES12/, 'ES2021'))
  // TypeError: String.prototype.replaceAll called with a non-global RegExp argument

  // 实际应用：安全地替换特殊字符
  const template = 'Hello {{name}}, welcome to {{place}}!'
  const filled = template
    .replaceAll('{{name}}', 'Alice')
    .replaceAll('{{place}}', 'Wonderland')
  console.log(filled) // 'Hello Alice, welcome to Wonderland!'
}

{
  // 基本用法
  const obj = { name: 'example', data: [1, 2, 3] }
  const weakRef = new WeakRef(obj)

  // 获取引用的对象
  const target = weakRef.deref()
  if (target) {
    console.log(target.name) // 'example'
  } else {
    console.log('Object has been garbage collected')
  }

  // 实际应用：缓存管理
  class Cache {
    constructor() {
      this.cache = new Map()
    }

    set(key, value) {
      this.cache.set(key, new WeakRef(value))
    }

    get(key) {
      const ref = this.cache.get(key)
      if (!ref) return undefined

      const value = ref.deref()
      if (value === undefined) {
        // 对象已被回收，清理缓存
        this.cache.delete(key)
        return undefined
      }
      return value
    }

    cleanup() {
      for (const [key, ref] of this.cache.entries()) {
        if (ref.deref() === undefined) {
          this.cache.delete(key)
        }
      }
    }
  }

  const cache = new Cache()
  let largeObject = { data: new Array(1000000).fill('data') }
  
  cache.set('large', largeObject)
  console.log(cache.get('large')) // 对象存在
  
  largeObject = null // 移除强引用
  // 在垃圾回收后，cache.get('large') 可能返回 undefined
}

{
  // 创建清理注册表
  const registry = new FinalizationRegistry((heldValue) => {
    console.log(`Cleaning up: ${heldValue}`)
  })

  // 注册对象
  let obj = { name: 'test' }
  registry.register(obj, 'test-object')

  // 当 obj 被垃圾回收时，会执行回调

  // 实际应用：DOM 元素计数器示例
  class Counter {
    constructor(element) {
      this.ref = new WeakRef(element)
      this.count = 0
      
      // 注册清理
      const registry = new FinalizationRegistry(() => {
        console.log('Counter element was garbage collected')
        this.stop()
      })
      registry.register(element, undefined, this)
      
      this.start()
    }

    start() {
      if (this.timer) return

      const tick = () => {
        const element = this.ref.deref()
        if (element) {
          element.textContent = ++this.count
        } else {
          console.log('Element no longer exists')
          this.stop()
        }
      }

      tick()
      this.timer = setInterval(tick, 1000)
    }

    stop() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    }
  }

  // 使用示例（在 DOM 环境中）
  /*
  const counterElement = document.createElement('div')
  document.body.appendChild(counterElement)
  
  const counter = new Counter(counterElement)
  
  // 5秒后移除元素
  setTimeout(() => {
    counterElement.remove()
  }, 5000)
  */
}

{
  const user = {
    name: 'Alice',
    address: {
      street: 'Main St',
      getNum() {
        return '123'
      },
      dataList: [
        { details: 'detail1' },
        { details: 'detail2' }
      ]
    }
  }

  // 传统方式 - 冗长且易出错
  const street = user && user.address && user.address.street
  const num = user && user.address && user.address.getNum && user.address.getNum()
  const details = user && user.address && user.address.dataList && 
                  user.address.dataList[0] && user.address.dataList[0].details

  // 使用可选链 - 简洁安全
  const street2 = user?.address?.street
  const num2 = user?.address?.getNum?.()
  const details2 = user?.address?.dataList?.[0]?.details

  console.log(street2) // 'Main St'
  console.log(num2) // '123'
  console.log(details2) // 'detail1'

  // 处理不存在的属性
  const nonExistent = user?.profile?.avatar?.url
  console.log(nonExistent) // undefined (而不是报错)

  // 动态属性访问
  const property = 'street'
  const dynamicValue = user?.address?.[property]
  console.log(dynamicValue) // 'Main St'
}

{
  // 与 || 的区别
  console.log('' || 'default')  // 'default'
  console.log('' ?? 'default')  // ''

  console.log(0 || 'default')   // 'default'
  console.log(0 ?? 'default')   // 0

  console.log(false || 'default') // 'default'
  console.log(false ?? 'default') // false

  console.log(null ?? 'default')      // 'default'
  console.log(undefined ?? 'default') // 'default'

  // 实际应用场景
  function processConfig(config) {
    // 保留有意义的假值，只处理真正的"空值"
    const timeout = config.timeout ?? 5000
    const retries = config.retries ?? 3
    const debug = config.debug ?? false
    
    return { timeout, retries, debug }
  }

  console.log(processConfig({ timeout: 0, debug: false }))
  // { timeout: 0, retries: 3, debug: false }
  
  console.log(processConfig({ timeout: null, debug: undefined }))
  // { timeout: 5000, retries: 3, debug: false }

  // 与可选链结合使用
  const userSettings = {
    theme: null,
    notifications: {
      email: false,
      push: undefined
    }
  }

  const theme = userSettings?.theme ?? 'light'
  const emailNotifs = userSettings?.notifications?.email ?? true
  const pushNotifs = userSettings?.notifications?.push ?? true

  console.log({ theme, emailNotifs, pushNotifs })
  // { theme: 'light', emailNotifs: false, pushNotifs: true }
}

{
  // JavaScript Number 类型的限制
  console.log(Number.MAX_SAFE_INTEGER) // 9007199254740991
  console.log(2 ** 53) // 9007199254740992
  console.log(2 ** 53 + 1) // 9007199254740992 (精度丢失!)

  // BigInt 可以表示任意大的整数
  const bigInt1 = 9007199254740993n
  const bigInt2 = BigInt(9007199254740993)
  const bigInt3 = BigInt('9007199254740994')

  console.log(bigInt1) // 9007199254740993n
  console.log(typeof bigInt1) // 'bigint'

  // BigInt 运算
  const result = 9007199254740991n + 2n
  console.log(result) // 9007199254740993n

  // 大数计算示例
  const factorial = (n) => {
    if (n <= 1n) return 1n
    return n * factorial(n - 1n)
  }
  console.log(factorial(25n)) // 15511210043330985984000000n

  // 比较操作
  console.log(1n == 1)   // true (类型转换)
  console.log(1n === 1)  // false (类型严格比较)
  console.log(1n < 2)    // true
  console.log(2n > 1)    // true

  // 注意事项
  // 1. 不能与 Number 混合运算
  // console.log(1n + 1) // TypeError

  // 2. 需要显式转换
  console.log(Number(1n) + 1) // 2
  console.log(1n + BigInt(1)) // 2n

  // 3. BigInt 不能使用 Math 对象的方法
  // console.log(Math.sqrt(4n)) // TypeError

  // 4. JSON.stringify 不直接支持 BigInt
  const obj = { bigNum: 123n }
  // console.log(JSON.stringify(obj)) // TypeError
  
  // 需要自定义序列化
  console.log(JSON.stringify(obj, (key, value) =>
    typeof value === 'bigint' ? value.toString() : value
  )) // '{"bigNum":"123"}'
}

{
  // 传统方式 - 平台兼容性差
  function getGlobal() {
    if (typeof self !== 'undefined') return self         // Web Workers
    if (typeof window !== 'undefined') return window     // 浏览器
    if (typeof global !== 'undefined') return global     // Node.js
    throw new Error('Unable to locate global object')
  }

  // 现代方式 - 统一的全局对象访问
  console.log(typeof globalThis) // 'object'

  // 在不同环境中都能正常工作
  globalThis.myGlobalVar = 'Hello World'
  console.log(globalThis.myGlobalVar) // 'Hello World'

  // 实际应用：polyfill 检测
  if (!globalThis.fetch) {
    // 在 Node.js 环境中添加 fetch polyfill
    globalThis.fetch = require('node-fetch')
  }

  // 检查全局 API 是否存在
  if (typeof globalThis.setTimeout === 'function') {
    console.log('Timer APIs available')
  }

  // 跨平台的全局变量设置
  globalThis.APP_CONFIG = {
    version: '1.0.0',
    env: 'production'
  }
}

{
  // 基本用法
  async function loadModule() {
    try {
      const module = await import('./utils.js')
      module.doSomething()
    } catch (error) {
      console.error('Failed to load module:', error)
    }
  }

  // 条件导入
  async function loadFeature(featureName) {
    const modulePath = `./features/${featureName}.js`
    const module = await import(modulePath)
    return module.default
  }

  // 与传统 import 语句的区别
  // 静态导入 (编译时)
  // import { helper } from './helper.js'

  // 动态导入 (运行时)
  const loadHelper = async () => {
    const { helper } = await import('./helper.js')
    return helper
  }

  // 实际应用：路由懒加载
  const routes = {
    '/home': () => import('./pages/Home.js'),
    '/about': () => import('./pages/About.js'),
    '/contact': () => import('./pages/Contact.js')
  }

  async function navigateTo(path) {
    const loadPage = routes[path]
    if (loadPage) {
      const pageModule = await loadPage()
      pageModule.default.render()
    }
  }

  // 代码分割示例
  button.addEventListener('click', async () => {
    const { heavyLibrary } = await import('./heavy-library.js')
    heavyLibrary.process()
  })

  // 动态导入 JSON
  async function loadConfig() {
    const config = await import('./config.json', {
      assert: { type: 'json' }
    })
    return config.default
  }
}

{
  const str = `
    <html>
      <body>
        <div>第一个div</div>
        <p>这是一个p</p>
        <span>span</span>
        <div>第二个div</div>
      </body>
    </html>
  `
  const regExp = /<div>(.*?)<\/div>/g

  // 传统方法1：使用 exec() 循环
  function selectDivExec(regExp, str) {
    const matches = []
    let match
    while ((match = regExp.exec(str)) !== null) {
      matches.push(match[1])
    }
    return matches
  }

  // 传统方法2：使用 replace()
  function selectDivReplace(regExp, str) {
    const matches = []
    str.replace(regExp, (all, first) => {
      matches.push(first)
    })
    return matches
  }

  // 现代方法：使用 matchAll()
  function selectDivMatchAll(regExp, str) {
    const matches = []
    for (const match of str.matchAll(regExp)) {
      matches.push(match[1])
    }
    return matches
  }

  console.log(selectDivExec(regExp, str))      // ['第一个div', '第二个div']
  console.log(selectDivReplace(regExp, str))   // ['第一个div', '第二个div']
  console.log(selectDivMatchAll(regExp, str))  // ['第一个div', '第二个div']

  // 更复杂的示例：解析 URL 参数
  const url = 'https://example.com?name=Alice&age=25&city=NewYork&name=Bob'
  const paramRegex = /([^&=]+)=([^&]*)/g

  // 使用 matchAll 获取所有参数
  const params = new Map()
  for (const match of url.matchAll(paramRegex)) {
    const [, key, value] = match
    if (params.has(key)) {
      // 处理重复参数
      const existing = params.get(key)
      params.set(key, Array.isArray(existing) ? [...existing, value] : [existing, value])
    } else {
      params.set(key, value)
    }
  }

  console.log(params)
  // Map(3) {
  //   'name' => ['Alice', 'Bob'],
  //   'age' => '25',
  //   'city' => 'NewYork'
  // }

  // 获取匹配的详细信息
  const text = 'The dates are 2023-12-25 and 2024-01-01'
  const dateRegex = /(\d{4})-(\d{2})-(\d{2})/g

  for (const match of text.matchAll(dateRegex)) {
    console.log(`Full match: ${match[0]}`)
    console.log(`Year: ${match[1]}, Month: ${match[2]}, Day: ${match[3]}`)
    console.log(`Index: ${match.index}`)
    console.log('---')
  }
}

{
  // 与 Promise.all() 的对比
  const promises = [
    Promise.reject({ code: 500, msg: '服务异常' }),
    Promise.resolve({ code: 200, data: ['1', '2', '3'] }),
    Promise.resolve({ code: 200, data: ['4', '5', '6'] })
  ]

  // Promise.all() - 任一失败就整体失败
  Promise.all(promises)
    .then(res => console.log('All succeeded:', res))
    .catch(err => console.log('One failed:', err))
  // 输出: One failed: { code: 500, msg: '服务异常' }

  // Promise.allSettled() - 等待所有完成
  Promise.allSettled(promises)
    .then(results => {
      console.log('All settled:')
      results.forEach((result, index) => {
        if (result.status === 'fulfilled') {
          console.log(`Promise ${index} succeeded:`, result.value)
        } else {
          console.log(`Promise ${index} failed:`, result.reason)
        }
      })

      // 过滤成功的结果
      const successful = results
        .filter(result => result.status === 'fulfilled')
        .map(result => result.value)
      
      console.log('Successful results:', successful)
    })

  // 实际应用：批量 API 调用
  async function fetchMultipleAPIs() {
    const apiCalls = [
      fetch('/api/users'),
      fetch('/api/posts'),
      fetch('/api/comments')
    ]

    const results = await Promise.allSettled(apiCalls)
    
    const responses = {}
    results.forEach((result, index) => {
      const apiName = ['users', 'posts', 'comments'][index]
      
      if (result.status === 'fulfilled') {
        responses[apiName] = result.value
      } else {
        console.error(`Failed to fetch ${apiName}:`, result.reason)
        responses[apiName] = null
      }
    })

    return responses
  }

  // 批量文件上传示例
  async function uploadFiles(files) {
    const uploadPromises = files.map(file => 
      fetch('/upload', {
        method: 'POST',
        body: file
      })
    )

    const results = await Promise.allSettled(uploadPromises)
    
    const report = {
      successful: 0,
      failed: 0,
      errors: []
    }

    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        report.successful++
      } else {
        report.failed++
        report.errors.push({
          file: files[index].name,
          error: result.reason.message
        })
      }
    })

    return report
  }
}

{
  // 传统写法 - 必须提供参数
  function isValidJSONOld(text) {
    try {
      JSON.parse(text)
      return true
    } catch (error) {  // 即使不使用 error 也必须声明
      return false
    }
  }

  // ES10 新写法 - 可以省略参数
  function isValidJSON(text) {
    try {
      JSON.parse(text)
      return true
    } catch {  // 省略错误参数
      return false
    }
  }

  const validJson = '{ "key1": "value1", "key2": "value2" }'
  const invalidJson = '{ key1: value1 }'

  console.log(isValidJSON(validJson))   // true
  console.log(isValidJSON(invalidJson)) // false

  // 实际应用：功能检测
  function hasLocalStorage() {
    try {
      localStorage.setItem('test', 'test')
      localStorage.removeItem('test')
      return true
    } catch {
      return false
    }
  }

  // 检查是否支持某个 API
  function supportsWebP() {
    try {
      return document.createElement('canvas')
        .toDataURL('image/webp')
        .indexOf('data:image/webp') === 0
    } catch {
      return false
    }
  }
}

{
  // 基本用法
  const arr1 = [1, 2, [3, 4]]
  const arr2 = [1, 2, [3, 4, [5, 6]]]
  const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]]

  console.log(arr1.flat())        // [1, 2, 3, 4]
  console.log(arr2.flat())        // [1, 2, 3, 4, [5, 6]] (默认深度为1)
  console.log(arr2.flat(2))       // [1, 2, 3, 4, 5, 6]
  console.log(arr3.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7, 8] (完全扁平化)

  // 处理稀疏数组
  const sparse = [1, 2, , 4, [5, , 7]]
  console.log(sparse.flat()) // [1, 2, 4, 5, 7] (移除空槽)

  // 实际应用：数据结构扁平化
  const categories = [
    ['EF', ['JavaScript', 'TypeScript', 'React']],
    ['BE', ['Node.js', 'Python', 'Java']],
    ['DB', ['MySQL', 'MongoDB']]
  ]

  const allTechnologies = categories
    .map(([category, techs]) => techs)
    .flat()
  
  console.log(allTechnologies)
  // ['JavaScript', 'TypeScript', 'React', 'Node.js', 'Python', 'Java', 'MySQL', 'MongoDB']

  // 处理嵌套的用户权限
  const userRoles = [
    'user',
    ['admin', ['read', 'write', ['delete', 'modify']]],
    'guest'
  ]

  const flatRoles = userRoles.flat(3)
  console.log(flatRoles) // ['user', 'admin', 'read', 'write', 'delete', 'modify', 'guest']
}

{
  const numbers = [1, 2, 3, 4]

  // 对比 map() 和 flatMap()
  console.log(numbers.map(x => [x * 2]))      // [[2], [4], [6], [8]]
  console.log(numbers.flatMap(x => [x * 2]))  // [2, 4, 6, 8]

  // 等价于 map().flat()，但 flatMap 更高效
  console.log(numbers.map(x => [x * 2]).flat()) // [2, 4, 6, 8]

  // 处理多层嵌套
  console.log(numbers.flatMap(x => [[x * 2]])) // [[2], [4], [6], [8]]

  // 实际应用：字符串分词
  const sentences = ['Hello world', 'How are you', 'Fine thanks']
  const words = sentences.flatMap(sentence => sentence.split(' '))
  console.log(words) // ['Hello', 'world', 'How', 'are', 'you', 'Fine', 'thanks']

  // 处理异构数据
  const data = [
    { type: 'user', items: ['Alice', 'Bob'] },
    { type: 'admin', items: ['Charlie'] },
    { type: 'guest', items: [] }
  ]

  const allUsers = data.flatMap(group => group.items)
  console.log(allUsers) // ['Alice', 'Bob', 'Charlie']

  // 条件性展开
  const mixedData = [1, 2, 3, 4, 5]
  const result = mixedData.flatMap(x => 
    x % 2 === 0 ? [x, x * 2] : [x]  // 偶数展开为两个值
  )
  console.log(result) // [1, 2, 4, 3, 4, 8, 5]

  // 过滤并转换
  const items = ['apple', '', 'banana', null, 'cherry']
  const validItems = items.flatMap(item => 
    item && item.length > 0 ? [item.toUpperCase()] : []
  )
  console.log(validItems) // ['APPLE', 'BANANA', 'CHERRY']
}