模塊管理使用babel工具來做ES5以上代碼的瀏覽器解析的兼容處理
url: https://babeljs.io/

1羽资、解構(gòu)賦值

// // 數(shù)組
var arr = ['aaa', 'zzz', 'ddd', 'fff']

// // 解構(gòu)賦值
var [a, z, d, f] = arr
console.log(a); // aaa
console.log(z); // zzz
console.log(d); // ddd
console.log(f); // fff

// // 設(shè)置默認(rèn)值
var [a, z, d, f, e="eee"] = arr
console.log(e); // eee

// // 向后解構(gòu)
var [, , d1] = arr
console.log(d1); // ddd

// // 數(shù)組解構(gòu)數(shù)組
var [a, ...itemArr] = arr
console.log(a); // aaa
console.log(itemArr); // [ 'zzz', 'ddd', 'fff' ]

// 對(duì)象
var obj = {
    number: 1,
    local: '深圳'
}

var {number, local} = obj
console.log(number); // 1
console.log(local); // 深圳

// 默認(rèn)值
var { time: newTime = '12:30 '} = obj
console.log(newTime); // 12:30

// 參數(shù)解構(gòu)
function foo({number, local}) {
    console.log(number, local) // 1 深圳
}
foo(obj)

2、類方法class

class foo {
    // 接受參數(shù)
    constructor(value) {
        this.value = value
    }
    thing() {
        console.log(this.value + 1);
    }
    // 靜態(tài)方法
    static personMethod() {
        console.log("static1")
    }
}

// 類也是構(gòu)造函數(shù)
console.log(foo);

// extends關(guān)鍵字實(shí)現(xiàn)類的繼承
class fee extends foo {
    // 接受參數(shù)
    constructor(value) {
        super(value)
    }
    // 重寫父類方法
    personMethod() {
        super.thing()
        console.log(this.value + 2)
        console.log(this.value + 3)
    }
    // 重寫父類靜態(tài)方法
    static staticMethod() {
        super.personMethod()
        console.log("static2")
        console.log("static3")
    }
}

var p1 = new fee(1) // 傳參數(shù)調(diào)用

p1.thing() // 調(diào)用原型方法

fee.staticMethod() // 靜態(tài)方法可以直接調(diào)用

p1.personMethod() // 調(diào)用重寫父類靜態(tài)方法

3、模板字符串

let num = 10
let local = '深圳'
let thing = `在${local}有${num}元人民幣`

console.log(thing); // 在深圳有10元人民幣

thing = `在${local}有${num * 100}元人民幣`
console.log(thing); // 在深圳有1000元人民幣

thing = `在${local}有${num===10 ? "三千萬" : 100}元人民幣`
console.log(thing); // 在深圳有三千萬元人民幣

function moneyFn() {
    return "六千萬"
}
thing = `在${local}有${moneyFn()}元人民幣`
console.log(thing); // 在深圳有六千萬元人民幣

4、Symbol在對(duì)象中表示唯一的屬性名

// 1.ES6之前, 對(duì)象的屬性名(key)
var obj = {
  name: "why",
  friend: { name: "kobe" },
  age: 18
}


obj['newName'] = "james"
console.log(obj)


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

console.log(s1 === s2)

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


// 3.Symbol值作為key
// 3.1.在定義對(duì)象字面量時(shí)使用
const obj = {
  [s1]: "abc",
  [s2]: "cba"
}

// 3.2.新增屬性
obj[s3] = "nba"

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

console.log(obj[s1], obj[s2], obj[s3], obj[s4])
// 注意: 不能通過.語法獲取
// console.log(obj.s1)

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

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

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

5、Set數(shù)據(jù)結(jié)構(gòu)，Set中存放的元素是不會(huì)重復(fù)

// 10, 20, 40, 333
// 1.創(chuàng)建Set結(jié)構(gòu)
const set = new Set()
set.add(10)
set.add(20)
set.add(40)
set.add(333)

set.add(10)

// 2.添加對(duì)象時(shí)特別注意:
set.add({})
set.add({})

const obj = {}
set.add(obj)
set.add(obj)

// console.log(set)

// 3.對(duì)數(shù)組去重(去除重復(fù)的元素)
const arr = [33, 10, 26, 30, 33, 26]
// const newArr = []
// for (const item of arr) {
//   if (newArr.indexOf(item) !== -1) {
//     newArr.push(item)
//   }
// }

const arrSet = new Set(arr)
// const newArr = Array.from(arrSet)
// const newArr = [...arrSet]
// console.log(newArr)

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

// 5.Set的方法
// add
arrSet.add(100)
console.log(arrSet)

// delete
arrSet.delete(33)
console.log(arrSet)

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

// clear
// arrSet.clear()
console.log(arrSet)

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

for (const item of arrSet) {
  console.log(item)
}

5、WeakSet數(shù)據(jù)結(jié)構(gòu)锹引，WeakSet對(duì)元素的引用是弱引用矗钟，如果沒有其他引用對(duì)某個(gè)對(duì)象進(jìn)行引用，那么GC可以對(duì)該對(duì)象進(jìn)行回收,WeakSet不能遍歷

const weakSet = new WeakSet()

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

// 強(qiáng)引用和弱引用的概念(看圖)

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

// weakSet.add(obj)

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

// 建立的是弱引用
weakSet.add(obj)

// 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)建出來的對(duì)象調(diào)用running方法")
    }
    console.log("running~", this)
  }
}

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

p.running.call({name: "why"})

6嫌变、Map數(shù)據(jù)結(jié)構(gòu),可以通過其他數(shù)據(jù)類型作為key

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

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

// console.log(info)

// 2.Map就是允許我們對(duì)象類型來作為key的
// 構(gòu)造方法的使用
const map = new Map()
map.set(obj1, "aaa")
map.set(obj2, "bbb")
map.set(1, "ccc")
console.log(map)

const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])
console.log(map2)

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

// set
map2.set("why", "eee")
console.log(map2)

// get(key)
console.log(map2.get("why"))

// has(key)
console.log(map2.has("why"))

// delete(key)
map2.delete("why")
console.log(map2)

// clear
// map2.clear()
// console.log(map2)

// 4.遍歷map
map2.forEach((item, key) => {
  console.log(item, key)
})

for (const item of map2) {
  console.log(item[0], item[1])
}

for (const [key, value] of map2) {
  console.log(key, value)
}

7吨艇、WeakMap數(shù)據(jù)結(jié)構(gòu),沒有forEach和for of的方式進(jìn)行遍歷

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))

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

// delete方法
console.log(weakMap.delete(obj))
// WeakMap { <items unknown> }
console.log(weakMap)
// 應(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.對(duì)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.對(duì)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())

8、默認(rèn)參數(shù)和剩余參數(shù)

// ES5以及之前給參數(shù)默認(rèn)值
/**
 * 缺點(diǎn):
 *  1.寫起來很麻煩, 并且代碼的閱讀性是比較差
 *  2.這種寫法是有bug
 */
// function foo(m, n) {
//   m = m || "aaa"
//   n = n || "bbb"

//   console.log(m, n)
// }

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

// foo()
foo(0, "")

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

printInfo({name: "kobe", age: 40})

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

printInfo1()

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

// bar(10, 20)
bar(undefined, 10, 20)

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

console.log(baz.length)

function foo(...args, m, n) {
  console.log(m, n)
  console.log(args)

  console.log(arguments)
}

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


// rest paramaters必須放到最后
// Rest parameter must be last formal parameter

function foo(m, n = m + 1) {
  console.log(m, n)
}

foo(10);

9腾啥、let-const

// var foo = "foo"
// let bar = "bar"

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

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

// // obj = {}
// obj.foo = "aaa"
// console.log(obj.foo)


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

let foo = "abc"
// SyntaxError: Identifier 'foo' has already been declared
let foo = "cba"

console.log(foo)