// 聲明變量
let v = 100
v = 200
// 聲明常量
const V = 200
// 修改常量
// V = 300 // 報錯

{
  var v = 100
}
{
  let val = 200
}
console.log(v)
console.log(val) // 報錯 val is not defined

// es2015之前
function foo(v) {
  v = v ? v : 100
  return v
}
// es2015
function bar(v = 100) {
  return v
}

function foo(v) {
  return v``
}
// 箭頭函數寫法
const foo = (v) => {
  return v
}
// 簡寫形式 1
const foo = v => { // 只有一個參數可以省略括號
  return v
}
// 簡寫形式 2
const foo = v => v // 語句中只有return時可以省略return和花括號

const foo = (...args) => {
  // console.log(arguments) // ReferenceError: arguments is not defined
  console.log(args) // args 是一個數組
}
foo(1, 2, 3, 4) // [ 1, 2, 3, 4 ]

function foo(v) {
  return v
}
const bar = v => v
console.log(foo.name) // foo
console.log(bar.name) // bar

console.log(0b111111111 === 511) // true
console.log(0o777 === 511) // true

// 使用 ` 定義模板字符串
let str = `一碗周`
// 模板字符串可以保留格式
let str2 = `一
碗
周`
// 模板字符串可以使用變量
const myName = '一碗周'
let str3 = `author: ${myName}` // 使用 ${} 進行包裹

const arr = [1, 2, 3, 4, 5, 6]
const newArr = [...arr] // 復制數組
console.log(Math.max.call(null, ...arr)) // 將數組中的每一項作為參數使用

function foo() {
  return Array.from(arguments) // 將 arguments 轉換為數組
}

console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

Array.of(1) // [1]
Array.of(true, 1, '一碗周') // [true, 1, '一碗周']

const arr = [1, 2, 3, 4]

// 從索引 2 開始，到結束 將內容復制到索引 0 的位置
arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]

const arr = [1, 2, 3, 4]
arr.find(item => item === 2) // 2（表示元素）、

const arr = [1, 2, 3, 4]
arr.findIndex(item => item === 2) // 1 (表示索引)

const arr = [1, 2, 3, 4]
// 將給定值填充索引1-3
arr.fill('一碗周', 1, 3) // [ 1, '一碗周', '一碗周', 4 ]

const arr = [1, true, '一碗周']
const keys = arr.keys()
for (const i of keys) {
  console.log(i) // 遍歷結果 0 1 2
}

const arr = [1, true, '一碗周']
const values = arr.values()
for (const i of values) {
  console.log(i) // 遍歷結果 1 true 一碗周
}

const arr = [1, true, '一碗周']

const iterator = arr.entries()
console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, '一碗周' ] ]

const myName = '一碗周'
const age = 18
const person = { myName, age }
console.log(person) // { myName: '一碗周', age: 18 }

const myName = '一碗周'
const age = 18
const person = {
  myName,
  ['a' + 'g' + 'e']: age,
}
console.log(person) // { myName: '一碗周', age: 18 }

console.log(NaN === NaN) // false
console.log(+0 === -0) // true

console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(+0, -0)) // false

const person = Object.assign({}, { name: '一碗周' }, { age: 18 })
console.log(person) // { name: '一碗周', age: 18 }

class Person {
  constructor(age) {
    // 屬性
    this.myName = '一碗周'
    this.age = age
  }
  // 靜態(tài)方法
  static print() {
    console.log()
  }
  // 訪問器
  get myName() {
    console.log('getter')
    return '一碗周'
  }
  set myName(v) {
    console.log('setter' + v)
  }
  setName(v) {
    this.myName = v
  }
}
const person = new Person(18)
person.setName('ywanzhou') // 觸發(fā) setter 訪問器
console.log(person.myName) // 觸發(fā) getter 訪問器

import a from 'm' // 導入模塊 m 中的默認導出，將其命名為 a
import a, { b } from 'm' // 導入模塊 m 中的默認導出以及單獨導入成員 b
import * as A from 'm' // 導入模塊中的所有成員
import 'm' // 執(zhí)行 m 模塊

export const b = 1 // 單獨導出
export default b // 默認導出
export { b } // 按需導出
export { b as bb } // 改名導出
export { b } from 'm' // 導入模塊 m 中的成員 b 并導出

// 數組的解構賦值
let [name, age, hobby = 'coding' /* 結構賦值的默認值 */] = ['一碗周', 18]
// 交換兩個變量的值
let a = 1
let b = 2
;[a, b] = [b, a]
console.log(a, b) // 2 1

// 對象的結構賦值
let { name: ObjName /* 解構賦值重命名 */, sex } = { name: '一碗周', sex: 1 }

// 函數參數的解構賦值
function bar({ name, age }) {
  return name + age
}
bar({ name: '一碗周', age: 18 }) // 一碗周18

/**
 * 語法
 * Symbol([description])
 * * description -> 是一個可選的描述信息
 */
// 創(chuàng)建一個 Symbol 類型的值
const mySymbol = Symbol()
console.log(mySymbol) // Symbol()

const myName = Symbol('一碗周')
console.log(typeof myName) // symbol

new Promise((resolve, reject) => {
    console.log('我是第一個Promise中的log')
    resolve()
})
    .then(() => {
        console.log('我是第一個then中的log')
    })
    .then(() => {
        console.log('我是第二個then中的log，但是我出現了異常')
        throw new Error('Error')
    })
    .then(() => {
        console.log('我是第三個then中的第一個回調的log，但是我不會執(zhí)行，因為我上面出現了異常')
    }, () => {
        console.log('我是第三個then中的第二個回調的log，我執(zhí)行了')
    })
    .then(() => {
        console.log('我是第四個then中的log，我可以正常執(zhí)行')
    })

/* 執(zhí)行結果如下
我是第一個Promise中的log
我是第一個then中的log
我是第二個then中的log，但是我出現了異常
我是第三個then中的第二個回調的log，我執(zhí)行了
我是第四個then中的log，我可以正常執(zhí)行
*/

const obj = {
    [Symbol.iterator] () {
        return {
            next () {
                console.log('迭代器執(zhí)行了');
                return {
                    value: '',
                    done: true // 標志是否結束，true表示已經結束
                }
            }
        }
    }
}

function* testGenerator() {
  // yield定義一個狀態(tài)
  yield '一碗周'
  yield 'es新特性'
  return 'generator' // 終結Generator，后面即使有yield關鍵字也無效
}
const g = testGenerator() // 返回 Generator 對象，通過next()方法移動狀態(tài)

g.next()
/* { value: '一碗周', done: false } */

g.next()
/* { value: 'es新特性', done: false } */

g.next()
/* { value: 'generator', done: true } */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link  rel="external nofollow"  rel="stylesheet" />
  <title>通過set自動更新dom</title>
</head>

<body>
  <div class="card" style="width: 300px; margin: 100px auto">
    <div class="card-body">
      <h1 id="name"></h1>
      <button id="btn" class="btn btn-primary">修改</button>
    </div>
  </div>
  <script>
    // 獲取DOM節(jié)點
    const name = document.getElementById('name')
    const btn = document.getElementById('btn')
    // 定義一個修改值的函數
    const updateDOM = (el, value) => {
      el.innerHTML = value
    }
    const person = new Proxy({
      name: '一碗粥',
    }, {
      set(target, propKey, value) {
        // 如果里面的值改變就去調用我們的updateDOM
        updateDOM(name, value)
        target[propKey] = value
        return true
      },
    })
    name.innerHTML = person.name
    // 點擊按鈕觸發(fā)修改操作
    btn.addEventListener('click', () => {
      person.name === '一碗周' ?
        (person.name = '一碗粥') :
        (person.name = '一碗周')
    })
  </script>
</body>
</html>

const arr = [1, 2, 2, 3, 4, 3, 5]
const set = new Set(arr)
// set對象可以使用 ... 展開 所有項
console.log([...set]) // [ 1, 2, 3, 4, 5 ]

console.log(2 ** 10 === Math.pow(2, 10)) // true

const arr = [1, 2, 3, 4, 5, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true

;(function () {
  function promise(v) {
    return new Promise((resolve, reject) => {
      resolve(v)
    })
  }
  const p = promise(1)
  p.then(res => {
    return promise(res)
  }).then(res => {
    console.log(res)
  })
})()

;(async function () {
  function promise(v) {
    return new Promise((resolve, reject) => {
      resolve(v)
    })
  }
  const r1 = await promise(1)
  const r2 = await promise(r1)
  const res = await promise(r2)
  console.log(res)
})()

function fun(
  aaaaa,
  bbbbb,
  ccccc,
) {}

const str = '一碗周'
console.log(str.padStart(10)) /*        一碗周 */
console.log(str.padEnd(10))   /* 一碗周        */

var asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return Promise.resolve({ value: this.i++, done: false })
        }

        return Promise.resolve({ done: true })
      },
    }
  },
}
;(async function () {
  for await (num of asyncIterable) {
    console.log(num)
  }
})()

// 0
// 1
// 2

const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/

const matchObj = RE_DATE.exec('2022-02-22')
const year = matchObj.groups.year // 2022
const month = matchObj.groups.month // 02
const day = matchObj.groups.day // 22

const n = { name: '一碗周' }
const a = { age: 18 }
const person = { ...n, ...a }
// 合并對象
console.log(person) // { name: '一碗周', age: 18 }

fetch(url)
  .then(res => {
    console.log(res)
  })
  .catch(error => {
    console.log(error)
  })
  .finally(() => {
    console.log('結束')
  })

try {
  console.log('一碗周')
} catch {
  console.error('一碗周')
}

const arr = [0, 1, 2, [3, 4]]
console.log(arr.flat()) // [ 0, 1, 2, 3, 4 ]

const person = {
  name: '一碗周',
  age: '18',
}
const e = Object.entries(person)

const p = Object.fromEntries(e)
console.log(p) // { name: '一碗周', age: '18' }

import('/modules/my-module.js').then(module => {
  // Do something with the module.
})

const theBiggestInt = 9007199254740991n;
const alsoHuge = BigInt(9007199254740991);
// ? 9007199254740991n
const hugeString = BigInt("9007199254740991");
// ? 9007199254740991n
const hugeHex = BigInt("0x1fffffffffffff");
// ? 9007199254740991n
const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
// ? 9007199254740991n

// 之前
var getGlobal = function () { 
  if (typeof self !== 'undefined') { return self; } 
  if (typeof window !== 'undefined') { return window; } 
  if (typeof global !== 'undefined') { return global; } 
  throw new Error('unable to locate global object'); 
}; 

var globals = getGlobal(); 

if (typeof globals.setTimeout !== 'function') { 
  // no setTimeout in this environment! 
}

// 之后

if (typeof globalThis.setTimeout !== 'function') {
  // no setTimeout in this environment!
}

console.log(null ?? 10) // 10
console.log(undefined ?? 10) // 10
console.log(false ?? 10) // false

var value

// 如果value的值不為 null 或者 undefined 為其賦值10
value = value ?? 10
console.log(value) // 10

var A = {}

// console.log(A.a.b) // 報錯
console.log(A.a?.b) // undefined

var obj = {}

// 如果存在 obj.fun() 這個方法，下面則會直接調用，如果不存在則會返回undefined
obj.fun?.A()

const str = '一碗粥'
const newStr = str.replaceAll('粥', '周')
console.log(newStr) // 一碗周

console.log(1_0000_0000) // 100000000

1_1 === 11 // true

const [f1, f2, f3] = [true, false]
f1 &&= '一碗周' // 等同于 str = str && '一碗周'
f2 ||= '一碗周' // 等同于 str = str || '一碗周'
f3 ??= '一碗周' // 等同于 str = str ?? '一碗周'

class C {
  myName = '一碗周'
}
/* 兩者是一致的 */
class C {
  constructor() {
    myName = '一碗周'
  }
}

class C {
  #myName = '一碗周'
}
const c = new C()
console.log(#myName) //  Private field '#myName' must be declared in an enclosing class

import { AsyncFun } from 'module'
await AsyncFun()
console.log(123)

const person = {
  name: '一碗周',
  age: 18,
}
console.log(Object.hasOwn(person, 'name')) // true
console.log(Object.hasOwn(person, 'sex')) // false

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.at(-1)) // 6
// 等同于 arr[arr.length - 1]

const str = 'JavaScript'
const r = /a/d

const m = r.exec(str)
console.log(m.indices[0]) //[ 1, 2 ]