var name = 'xxx'
var age = 12
var obj = {
  // 1.property shorthand(屬性的簡寫)
  name: name,
  age,

  // 2.method shorthand(方法的簡寫)
  foo: function () {
    console.log(1)
  },

  foo2: () => {
    console.log(2)
  },

  foo3() {
    console.log(3)
  },

  // 3.computed property name(計算屬性名)
  [name + 123]: 'yyy'
}

obj.foo() //1
obj.foo2() //2
obj.foo3() //3
obj[name + 456] = 'zzz'
console.log(obj)
// {
//   name: 'xxx',
//   age: 12,
//   foo: [Function: foo],
//   foo2: [Function: foo2],
//   foo3: [Function: foo3],
//   xxx123: 'yyy',
//   xxx456: 'zzz'
// }

var arr = ['aaa', 'bbb', 'ccc']
// 以前的做法
// var a1 = arr[0]
// var a2 = arr[1]
// var a3 = arr[2]

// 1、對數(shù)組的解構(gòu)
var [a1, a2, a3] = arr
console.log(a1, a2, a3) //aaa bbb ccc

// 2、解構(gòu)后面的元素
var [, , a4] = arr
console.log(a4) //ccc

// 3、解構(gòu)出一個元素,后面的元素放到一個新數(shù)組中
var [a5, ...newArr] = arr
console.log(a5, newArr) //aaa [ 'bbb', 'ccc' ]

// 4、解構(gòu)的默認(rèn)值
var [a6, a7, a8, a9 = 'ddd'] = arr
console.log(a6, a7, a8, a9) //aaa bbb ccc ddd

var obj = {
  name: 'xxx',
  age: 123,
  address: '廣東'
}

//1、全部解構(gòu)
var { name, age, address } = obj
console.log(name, age, address) //xxx 123 廣東

//2、解構(gòu)單個
var { age } = obj
console.log(age) //123

// 3、重新命名
var { age: newAge } = obj
console.log(newAge) //123

//4、解構(gòu)的默認(rèn)值
var { color: newColor = 'red' } = obj
console.log(newColor) //red

//5、函數(shù)中
function foo(o) {
  console.log(o.name, o.age) //xxx 123
}
foo(obj)

function foo2({ name, age }) {
  console.log(name, age) //xxx 123
}
foo2(obj)

function foo3({ name, age=456}) {
  console.log(name, age) //xxx 123
}
foo3(obj)

// 1、從直觀的角度來說，let和var是沒有太大的區(qū)別的，都是用于聲明一個變量
let bar = "bar"

// 2、const constant(常量/衡量)
const name = "abc"

// 3、
// 注意事項一: const本質(zhì)上是傳遞的值不可以修改
// 但是如果傳遞的是一個引用類型(內(nèi)存地址), 可以通過引用找到對應(yīng)的對象, 去修改對象內(nèi)部的屬性, 這個是可以的
const obj = {
    foo: "foo"
}

obj2.foo = "aaa"
console.log(obj.foo)// aaa

// 4、
// 注意事項二: 通過let/const定義的變量名是不可以重復(fù)定義
// let foo = "abc"
// let foo = "cba"

// 作用域提升: 能提前被訪問
console.log(foo)// undefined
var foo = "foo"

// let/const他們是沒有作用域提升
// foo被創(chuàng)建出來了, 但是不能被訪問
// Reference(引用)Error: Cannot access 'foo' before initialization(初始化)
console.log(foo)
let foo = "foo"

var a = 123
let b = 456

console.log(window.a) //123
console.log(window.b) //undefined

// 在ES5中只有兩個東西會形成作用域
// 1.全局作用域

// 2.函數(shù)（局部）作用域
function foo() {
    var bar = "bar"
}

// ES6的代碼塊級作用域
// 對let/const/function/class聲明的類型是有效
{
  let foo = 'why'
  function demo() {
    console.log('demo function')
  }
  class Person {}
}

console.log(foo) // foo is not defined
// 不同的瀏覽器有不同實現(xiàn)的(大部分瀏覽器為了兼容以前的代碼, 讓function是沒有塊級作用域)
demo() //demo function
var p = new Person() // Person is not defined

// 1、if語句的代碼就是塊級作用域
if (true) {
  var foo = 'foo'
  let bar = 'bar'
}

console.log(foo) //foo
console.log(bar) //bar is not defined

// 2、switch語句的代碼也是塊級作用域
var color = 'red'
switch (color) {
  case 'red':
    var foo2 = 'foo'
    let bar2 = 'bar'
}

console.log(foo2) //foo
console.log(bar2) //bar2 is not defined

// 3、for語句的代碼也是塊級作用域
for (var i = 0; i < 10; i++) {
  console.log('Hello World' + i)
  // Hello World0
  // Hello World1
  // Hello World2
  // Hello World3
  // Hello World4
  // Hello World5
  // Hello World6
  // Hello World7
  // Hello World8
  // Hello World9
}
console.log(i) //10

for (let j = 0; j < 10; j++) {}

console.log(j) //j is not defined

const btns = document.getElementsByTagName('button')
// 1、var沒有塊級作用域
for (var i = 0; i < btns.length; i++) {
  ;(function (n) {
    btns[i].onclick = function () {
      console.log('第' + n + '個按鈕被點擊')
    }
  })(i)
}

// 2、let有塊級作用域
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log('第' + i + '個按鈕被點擊')
  }
}

const names = ['abc', 'cba', 'nba']

// 1、不可以使用const，因為i的每次循環(huán)（生成一個塊級作用域）都不一樣，其實都是需要上一次的i進(jìn)行i++賦值給下一個i
for (let i = 0; i < names.length; i++) {
  console.log(names[i])
}

// 2、for...of: ES6新增的遍歷數(shù)組(對象)
// 因為每次遍歷（生成一個塊級作用域）的值都賦給一個item，所以不需要上一次item的值進(jìn)行操作
for (const item of names) {
  console.log(item)
}

var foo = 'foo'

// 塊級作用域
if (true) {
  console.log(foo) //Cannot access 'foo' before initialization

  let foo = 'abc'
}

// ES6之前拼接字符串和其他標(biāo)識符
const name = 'why'
const age = 18
const height = 1.88

console.log('my name is ' + name + ', age is ' + age + ', height is ' + height)

// ES6提供模板字符串 ``
// 1、
const message = `my name is ${name}, age is ${age}, height is ${height}`
console.log(message)

// 2、
const info = `age double is ${age * 2}`
console.log(info)

// 3、
function doubleAge() {
  return age * 2
}

const info2 = `double age is ${doubleAge()}`
console.log(info2)

// 第一個參數(shù)依然是模塊字符串中整個字符串, 只是被切成多塊,放到了一個數(shù)組中
// 第二個參數(shù)是模塊字符串中, 第一個 ${}
function foo(m, n, x) {
  console.log(m, n, x)
}

// 另外調(diào)用函數(shù)的方式: 標(biāo)簽?zāi)K字符串
foo`` //[ '' ] undefined undefined

foo`Hello World` //[ 'Hello World' ] undefined undefined

const name = 'why'
const age = 18
foo`Hello${name}Wo${age}rld` //[ 'Hello', 'Wo', 'rld' ] why 18

// 1.ES6可以給函數(shù)參數(shù)提供默認(rèn)值
function foo(m = 'aaa', n = 'bbb') {
  console.log(m, n)
}

foo(0)// 0 bbb

// 2.對象參數(shù)和默認(rèn)值以及解構(gòu)
function printInfo({ name, age } = { name: 'why', age: 18 }) {
  console.log(name, age)
}
printInfo({ name: 'kobe', age: 40 }) //kobe 40

// 另外一種寫法
function printInfo1({ name = 'why', age = 18 } = {}) {
  console.log(name, age)
}
printInfo1() //why 18

// 3.有默認(rèn)值的形參最好放到最后
function bar(x, y, z = 30) {
  console.log(x, y, z)
}

bar(10, 20) //10 20 30

// 4.有默認(rèn)值的函數(shù)的length屬性
function baz(x, y, z, m, n = 30) {
  console.log(x, y, z, m, n)
}

console.log(baz.length)// 4

function foo(m, n, ...args) {
  console.log(m, n) //20 30
  console.log(args) //[ 40, 50, 60 ]
  console.log(arguments) //[Arguments] { '0': 20, '1': 30, '2': 40, '3': 50, '4': 60 }
}

foo(20, 30, 40, 50, 60)

//function foo (...args,m, n)
// rest paramaters必須放到最后
// Rest parameter must be last formal parameter

function foo() {}

console.log(foo.prototype) //{}
const f = new foo()
console.log(f.__proto__) //{}

var bar = () => {
  console.log(this, arguments) //箭頭函數(shù)本身沒有
}

console.log(bar.prototype) //undefined
const f2 = new bar() //bar is not a constructor

const names = ['abc', 'cba', 'nba']
const name = 'why'
const info = { name: 'why', age: 18 }

// 1.函數(shù)調(diào)用時
function foo(x, y, z) {
  console.log(x, y, z)
}

// foo.apply(null, names)
foo(...names) //abc cba nba
foo(...name) //w h y

// 2.構(gòu)造數(shù)組時
const newNames = [...names, ...name]
console.log(newNames) //[ 'abc', 'cba', 'nba', 'w', 'h', 'y' ]

// 3.構(gòu)建對象字面量時ES2018(ES9)
const obj = { ...info, address: '廣州市', ...names }
console.log(obj)
// {
//     '0': 'abc',
//     '1': 'cba',
//     '2': 'nba',
//     name: 'why',
//     age: 18,
//     address: '廣州市'
//   }

const info = {
  name: 'why',
  friend: { name: 'kobe' }
}

const obj = { ...info, name: 'coderwhy' }
// console.log(obj)
obj.friend.name = 'james'

console.log(info.friend.name) //james

const num1 = 100 // 十進(jìn)制
// b -> binary
const num2 = 0b100 // 二進(jìn)制
// o -> octonary
const num3 = 0o100 // 八進(jìn)制
// x -> hexadecimal
const num4 = 0x100 // 十六進(jìn)制

console.log(num1, num2, num3, num4) //100 4 64 256

// 大的數(shù)值的連接符(ES2021 ES12),該寫法方便閱讀
const num = 10_000_000_000_000_000
console.log(num) //10000000000000000

// 1.ES6之前, 對象的屬性名(key)
var obj = {
  name: 'why',
  friend: { name: 'kobe' },
  age: 18
}
obj['newName'] = 'james'
console.log(obj) //{ name: 'why', friend: { name: 'kobe' }, age: 18, newName: 'james' }

// 2.ES6中Symbol的基本使用
const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2) //false

// ES2019(ES10)中, Symbol還有一個描述(description)
const s3 = Symbol('aaa')
console.log(s3.description) //aaa

// 3.Symbol值作為key
// 3.1.在定義對象字面量時使用
const obj2 = {
  [s1]: 'abc',
  [s2]: 'cba'
}

// 3.2.新增屬性
obj2[s3] = 'nba'

// 3.3.Object.defineProperty方式
const s4 = Symbol()
Object.defineProperty(obj2, s4, {
  enumerable: true,
  configurable: true,
  writable: true,
  value: 'mba'
})

console.log(obj2[s1], obj2[s2], obj2[s3], obj2[s4]) //abc cba nba mba
// 注意: 不能通過.語法獲取
console.log(obj2.s1) //undefined

// 4.使用Symbol作為key的屬性名,在遍歷/Object.keys等中是獲取不到這些Symbol值
// 需要Object.getOwnPropertySymbols來獲取所有Symbol的key
console.log(Object.keys(obj2)) //[]
console.log(Object.getOwnPropertyNames(obj2)) //[]
console.log(Object.getOwnPropertySymbols(obj2)) //[ Symbol(), Symbol(), Symbol(aaa), Symbol() ]
const sKeys = Object.getOwnPropertySymbols(obj2)
for (const sKey of sKeys) {
  console.log(obj2[sKey])
  // abc
  // cba
  // nba
  // mba
}

// 5.Symbol.for(key)/Symbol.keyFor(symbol)
const sa = Symbol.for('aaa')
const sb = Symbol.for('aaa')
console.log(sa === sb) //true

const key = Symbol.keyFor(sa)
console.log(key) //aaa
const sc = Symbol.for(key)
console.log(sa === sc) //true

// 1.創(chuàng)建Set結(jié)構(gòu)
var set = new Set()
set.add(2)
set.add(2)
set.add(30)
set.add(40)
set.add(2)
set.add(230)
console.log(set) //Set(4) { 2, 30, 40, 230 }

// 2.添加對象時特別注意:
// 這是兩個不同的變量
set.add({})
set.add({})
console.log(set) //Set(6) { 2, 30, 40, 230, {}, {} }

// obj存儲的是地址，set存儲的元素不重復(fù)
const obj = {}
set.add(obj)
set.add(obj)
console.log(set) //Set(7) { 2, 30, 40, 230, {}, {}, {} }

// 3.對數(shù)組去重(去除重復(fù)的元素)
const arr = [43, 10, 26, 30, 43, 26, 10]
// 3.1第一種方法
// const newArr = []
// for (const item of arr) {
//   if (newArr.indexOf(item) !== -1) {
//     newArr.push(item)
//   }
// }

// 3.2第二種方法
const arrSet = new Set(arr)
// const newArr = Array.from(arrSet)
const newArr = [...arrSet]
console.log(newArr) //[ 43, 10, 26, 30 ]

// 4.size屬性
console.log(arrSet.size) //4

// 5.Set的方法
// add
arrSet.add(1000)
console.log(arrSet) //Set(5) { 43, 10, 26, 30, 1000 }

// delete
arrSet.delete(43)
console.log(arrSet) //Set(4) { 10, 26, 30, 1000 }

// has
console.log(arrSet.has(100)) //false

// clear
// arrSet.clear()
console.log(arrSet) //Set(0) {}

// 6.對Set進(jìn)行遍歷
arrSet.forEach(item => {
  console.log(item)
  //   10
  //   26
  //   30
  //   1000
})

for (const item of arrSet) {
  console.log(item)
  //   10
  //   26
  //   30
  //   1000
}

const weakSet = new WeakSet()

// 1.區(qū)別一: 只能存放對象類型
// TypeError: Invalid value used in weak set
// weakSet.add(10)

// 2.區(qū)別二: 對對象是一個弱引用
let obj = {
  name: 'why'
}

const set = new Set()
// 建立的是強(qiáng)引用
set.add(obj)

// 建立的是弱引用
weakSet.add(obj)
console.log(weakSet)// WeakSet { <items unknown> }

// 3.WeakSet的應(yīng)用場景
const personSet = new WeakSet()
class Person {
  constructor() {
    personSet.add(this)
  }

  running() {
    if (!personSet.has(this)) {
      throw new Error('不能通過非構(gòu)造方法創(chuàng)建出來的對象調(diào)用running方法')
    }
    console.log('running~', this) //running~ Person {}
  }
}

let p = new Person()
p.running()

// 拋出異常
// p.running.call({ name: 'why' })

// 1.JavaScript中對象中是不能使用對象來作為key的
const obj1 = { name: 'why' }
const obj2 = { name: 'kobe' }

const info = {
  [obj1]: 'aaa',
  [obj2]: 'bbb'
}

console.log(info) //{ '[object Object]': 'bbb' }

// 2.Map就是允許我們對象類型來作為key的
// 構(gòu)造方法的使用
const map = new Map()
map.set(obj1, 'aaa')
map.set(obj2, 'bbb')
map.set(1, 'ccc')
console.log(map)
// Map(3) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     1 => 'ccc'
//  }

const map2 = new Map([
  [obj1, 'aaa'],
  [obj2, 'bbb'],
  [2, 'ddd']
])
console.log(map2)
// Map(3) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     2 => 'ccc'
//  }

// 3.常見的屬性和方法
console.log(map2.size) //3

// set
map2.set('why', 'eee')
console.log(map2)
// Map(4) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     2 => 'ddd',
//     'why' => 'eee'
//  }

// get(key)
console.log(map2.get('why')) //eee

// has(key)
console.log(map2.has('why')) //true

// delete(key)
map2.delete('why')
console.log(map2)
// Map(3) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     2 => 'ddd'
// }

// clear(),全部清空
// map2.clear()
// console.log(map2)

// 4.遍歷map
map2.forEach((item, key) => {
  console.log(item, key)
  // aaa { name: 'why' }
  // bbb { name: 'kobe' }
  // ddd 2
})

for (const item of map2) {
  console.log(item[0], item[1])
  // { name: 'why' } aaa
  // { name: 'kobe' } bbb
  // 2 ddd
}

for (const [key, value] of map2) {
  console.log(key, value)
  // { name: 'why' } aaa
  // { name: 'kobe' } bbb
  // 2 ddd
}

const obj = {name: "obj1"}
// 1.WeakMap和Map的區(qū)別二:弱引用
const map = new Map()
map.set(obj, "aaa")

const weakMap = new WeakMap()
weakMap.set(obj, "aaa")

// 2.區(qū)別一: 不能使用基本數(shù)據(jù)類型
// weakMap.set(1, "ccc")

// 3.常見方法
// get方法
console.log(weakMap.get(obj))//aaa

// has方法
console.log(weakMap.has(obj))//true

// delete方法
console.log(weakMap.delete(obj))//true
// WeakMap { <items unknown> }
console.log(weakMap)//WeakMap { <items unknown> }

// 應(yīng)用場景(vue3響應(yīng)式原理)
const obj1 = {
  name: 'why',
  age: 18
}

function obj1NameFn1() {
  console.log('obj1NameFn1被執(zhí)行')
}

function obj1NameFn2() {
  console.log('obj1NameFn2被執(zhí)行')
}

function obj1AgeFn1() {
  console.log('obj1AgeFn1')
}

function obj1AgeFn2() {
  console.log('obj1AgeFn2')
}

const obj2 = {
  name: 'kobe',
  height: 1.88,
  address: '廣州市'
}

function obj2NameFn1() {
  console.log('obj1NameFn1被執(zhí)行')
}

function obj2NameFn2() {
  console.log('obj1NameFn2被執(zhí)行')
}

// 1.創(chuàng)建WeakMap
const weakMap = new WeakMap()

// 2.收集依賴結(jié)構(gòu)
// 2.1.對obj1收集的數(shù)據(jù)結(jié)構(gòu)
const obj1Map = new Map()
obj1Map.set('name', [obj1NameFn1, obj1NameFn2])
obj1Map.set('age', [obj1AgeFn1, obj1AgeFn2])
weakMap.set(obj1, obj1Map)

// 2.2.對obj2收集的數(shù)據(jù)結(jié)構(gòu)
const obj2Map = new Map()
obj2Map.set('name', [obj2NameFn1, obj2NameFn2])
weakMap.set(obj2, obj2Map)

// 3.如果obj1.name發(fā)生了改變
// Proxy/Object.defineProperty
obj1.name = 'james'
const targetMap = weakMap.get(obj1)
const fns = targetMap.get('name')
fns.forEach(item => item())
// obj1NameFn1被執(zhí)行
// obj1NameFn2被執(zhí)行