談一談let與var和const的區別

let為ES6新新增申明變數的命令，它類似於var，但是有以下不同：

• let命令不存在變數提升，如果在let前使用，會導致報錯
• let暫時性死區的本質，其實還是塊級作用域必須“先聲明後使用”的性質，let 暫時性死區的原因：var 會變數提升，let 不會。
• let，const和class宣告的全域性變數不是全域性物件的屬性
• const可以在多個模組間共享
• const宣告的變數與let宣告的變數類似，它們的不同之處在於，const宣告的變數只可以在宣告時賦值，不可隨意修改，否則會導致SyntaxError（語法錯誤）
• const只是保證變數名指向的地址不變，並不保證該地址的資料不變

說說箭頭函式的特點

• 箭頭函式不屬於普通的 function，所以沒有獨立的上下文。
• 箭頭函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。
• 由於箭頭函式沒有自己的this，函式物件中的call、apply、bind三個方法，無法"覆蓋"箭頭函式中的this值。
• 箭頭函式沒有原本(傳統)的函式有的隱藏arguments物件。
• 箭頭函式不能當作generators使用，使用yield會產生錯誤。

在以下場景中不要使用箭頭函式去定義：

1. 定義物件方法、定義原型方法、定義建構函式、定義事件回撥函式。

2. 箭頭函式裡不但沒有 this，也沒有 arguments, super

對Symbol，Map和Set的理解

Symbol 是一種特殊的、不可變的資料型別，可以作為物件屬性的識別符號使用，即使使用同樣的引數例項化symbol，得到的symbol例項也不會相等

let _symbol1 = Symbol('test');
let _symbol2 = Symbol('test');
console.log(_symbol1 == _symbol2);//false

Map物件儲存鍵值對，有點類似於Object，但是Object的鍵只能是字串或者Symbols，而Map可以是任何值

        let myMap = new Map()
        let str1 = 'dog'
        let str2 = 'cat'
        myMap.set(str1, '汪')
        myMap.set(str2, '喵')
        console.log(myMap) // {0: {"dog" => "汪"}1: {"cat" => "喵"}}
        console.log(myMap.get(str1)) // 汪
 

Set 物件允許你儲存任何型別的唯一值（陣列去重），有點類似於Array，Set中的元素只會出現一次

        let mySet = new Set()
        mySet.add('hello')
        mySet.add('1')
        mySet.add('2')
        mySet.add('2')
        console.log(mySet) // {0: "hello",1: "1",2: "2"}

使用ES6如何監測陣列變化（proxy監測讀寫）

        let list = [1, 2, 3]
        // 代理
        let _proxy = new Proxy(list, {
            set: function (target, prop, val, rec) {
                console.log('寫入')
                target[prop] = val
                return true
            },
            get: function (target, prop) {
                console.log('讀取')
                return target[prop]
            }
        })
        _proxy[0] = 4 // 寫入
        console.log(_proxy[1]) // 讀取

JS有哪些處理非同步的方法

回撥函式：回撥是一個函式被作為一個引數傳遞到另一個函式裡，在那個函式執行完後再執行

優點：簡單，方便，實用，易懂
缺點：當邏輯複雜時，會產生回撥函式地獄，耦合度高，流程會很混亂

        // 回撥
        let cb = (props) => {
            console.log(props) // 2
        }
        let init = (props) => {
            // 非同步操作
            setTimeout(() => {
                cb(props) // 非同步傳參
            }, 1000)
        }
        init(2)
        console.log(1) // 1

事件釋出/訂閱：採用事件驅動模式，任務的執行取決於某一個事件是否發生

優點：事件監聽方式相對回撥實現了程式碼的解耦，對模組化開發很友好
缺點：每次執行任務都需要釋出/訂閱事件

        // 事件釋出/訂閱
        let cb = (event) => {
            console.log(event.props) // 2
        }
        let init = (props) => {
            // 非同步操作
            setTimeout(() => {
                let event = new Event('myEvent')
                event.props = props // 非同步傳參
                document.dispatchEvent(event)
            }, 1000)
        }
        init(2)
        console.log(1) // 1
        document.addEventListener('myEvent', cb)

Promise：Promise是非同步程式設計，它將非同步操作以同步的方式表現出來，避免回撥地獄的產生

優點：避免回撥地獄，鏈式呼叫，函式思路清晰，邏輯相對前兩者更強
缺點：理解性差，非同步操作在promise建構函式內部

        // ES6  Promise
        let init = (props) => {
            return new Promise((resolve, reject) => {
                // 非同步操作
                setTimeout(() => {
                    resolve(props)
                }, 1000)
            })
        }
        init(2).then((res) => {
            console.log(res) // 2
        })
        console.log(1) // 1

Generator：generator（生成器）是ES6標準引入Python的新的資料型別

優點：取消鏈式呼叫的then，和釋出/訂閱模式非常相似，對於理解同步操作很直觀
缺點：多個非同步函式時不夠直觀，原函式需要通過next去維護外部函式的yield

        // ES6  Generator
        const fn = init(2)
        let cb = (props) => {
            console.log(props) // 2
        }
        function* init(props) {
            // 非同步操作
            yield setTimeout(() => {
                fn.next()
            }, 500)
            yield setTimeout(() => {
                fn.next()
            }, 500)
            cb(props)
        }
        fn.next()
        console.log(1) // 1

async/await：async函式是generator函式的語法糖，函式（function關鍵字）前新增async關鍵字，函式中通過await等待非同步執行

優點：同步流程清晰，簡潔，非同步操作可以返回promise物件，後續操作更方便
缺點：JS的執行器功能較其他co模組較弱

        // ES6+  async/await
        let cb = (props) => {
            console.log(props) // 2
        }
        let cb2 = (props) => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(props)
                }, 1000)
            })
        }
        async function init(props) {
            // 非同步操作
            let num2 = await cb2(props)
            cb(num2)
        }
        init(2)
        console.log(1) // 1

ES6中的class關鍵字跟function什麼區別

• 在function定義的建構函式中，其prototype.constructor屬性指向構造器自身，在class定義的類中，constructor其實也相當於定義在prototype屬性上
• function如果重複定義，會覆蓋之前定義的方法，而class重複定義則會報錯
• class中定義的方法不可用Object.keys(Point.prototype)列舉到，function構造器原型方法可被Object.keys(Point.prototype)列舉到
• class沒有變數提升，也就是說，必須先定義class，再使用，而function定義後，會被提升至當前作用域頂端
• class定義的類沒有私有方法和私有屬性，function可以通過閉包實現私有方法和屬性

ES6新增哪些陣列方法

find()：返回陣列中第一個滿足條件的元素（如果有的話）， 如果沒有，則返回 undefined
findIndex()：返回陣列中第一個滿足條件的元素的索引（如果有的話）， 如果沒有，則返回 -1
keys()：返回一個數組索引的迭代器
values()：返回一個數組迭代器物件，該物件包含陣列中每個索引的值
entries()：返回一個數組迭代器物件，該物件包含陣列中每個索引的鍵值對

for in 和 for of 的區別

for in適合用於遍歷物件，for of可以用來遍歷陣列，類陣列物件，argument，字串，Map和Set

for in 遍歷陣列時會有以下問題：

• index索引為字串型數字，不能直接進行幾何運算
• 遍歷順序有可能不是按照實際陣列的內部順序
• 使用for in會遍歷陣列所有的可列舉屬性，包括原型，原型上的方法和屬性

所以for in 不適合遍歷陣列，而適合用於遍歷物件

而for of遍歷陣列時：

只會遍歷陣列內的元素，而不包括陣列的原型屬性method和索引name

CommonJS 中的 require/exports 和 ES6 中的 import/export 區別

• CommonJS模組輸出的是一個值的拷貝，ES6模組輸出的是值的引用
• CommonJS模組是執行時載入，ES6模組是編譯時輸出介面，ES6可以在編譯時就完成模組載入，效率要比CommonJS模組的載入方式高
• CommonJS模組輸出的是值的拷貝，也就是說，一旦輸出一個值，模組內部的變化就影響不到這個值。而Es6模組的執行機制與CommonJS不一樣。JS引擎對指令碼靜態分析的時候，遇到模組載入命令import，就會生成一個只讀引用。等到指令碼真正執行時，在根據引用到被載入的那個模組裡面去取值。ES6模組是動態引用，並且不會快取值，模組裡面的變數繫結其所在的模組。
• require/exports是CommonJS在Node中實現的，import/export是ES6的模組
• require/exports是同步匯入，因為用於服務端，檔案都在本地，同步匯入即使卡住主執行緒影響也不大。而ES6模組是非同步匯入，因為用於瀏覽器，需要下載檔案，如果也採用匯入會對渲染有很大影響
• ES6模組的設計思想，是儘量靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數，ES6模組會編譯成 require/exports 來執行的
• export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能

嘗試實現Promise

https://blog.csdn.net/time_____/article/details/109721703

Object.is()與“==”，“===”的區別

“==”會在比較時進行型別轉換

“===”比較時不進行隱式型別轉換

Object.is()在三等號判等的基礎上特別處理了NaN、-0和+0，保證-0和+0不再相同，但Object.is(NaN,NaN)會返回true

ES6中為何出現Class

Class的功能實際上在ES5都能實現，可以算是ES6的語法糖，其作用是使JS語法清晰，更像面向物件語法

基礎寫法

        class MyEvent extends EventTarget { // 繼承EventTarget
            constructor(e) {
                super(e) // 父類的建構函式
                this.consoleThis() // 執行函式
            }
            consoleThis() {
                console.log(this)
            }
        }
        let myEvent = new MyEvent(document) // EventTarget

ES6語法糖的物件的屬性簡寫和屬性名錶達式是什麼

屬性簡寫：物件的字面量可以直接寫入與之名稱相同的變數和函式

        let name = '小明'
        function showName() {
            console.log(this.name)
        }
        let person = {
            name,
            showName
        }
        console.log(person.name)// 小明
        person.showName()// 小明

屬性名錶達式簡寫：ES6允許把表示式放在方括號內，作為物件的屬性名

        let num = 0
        let obj = {
            "1": 'a',
            "2": 'b',
            "3": 'c'
        }
        console.log(obj[++num]) // a
        console.log(obj[++num]) // b
        console.log(obj[++num]) // c

談談解構賦值的理解

解構賦值是對賦值運算子的擴充套件，是一種針對陣列或者物件進行模式匹配，然後對其中的變數進行賦值

        // 陣列
        let [a, b, c] = [1, 2, 3];
        console.log(a, b, c) // 1,2,3
        // 物件
        let {
            d,
            e,
            f
        } = {
            d: 4,
            e: 5
        };
        console.log(d, e, f) // 4,5,undefined

使用ES6如何合併多個物件，複製物件

ES6中的物件新增（...）拓展運算子，用於取出引數物件所有可遍歷屬性然後拷貝到當前物件

ES6新增物件拷貝方法：Object.assign(target, source1，source2，source3， ···)，將源物件的所有可列舉屬性複製到目標物件中，即，將source1，source2，source3......複製到target中

合併：

        let name = {
            name: '小明'
        }
        let age = {
            age: 20
        }
        let hobby = {
            hobby: 'music'
        }
        let person = {// 拓展運算子
            ...name,
            ...age,
            ...hobby
        }
        console.log(person)// age: 20,hobby: "music",name: "小明"

        Object.assign(person, name, age, hobby)// 物件拷貝
        console.log(person) // age: 20,hobby: "music",name: "小明"

複製：

        let list = [1, 2, 3, 4, 5]
        let list2 = [...list]// 拓展運算子
        Object.assign(list2, list)// 物件拷貝
        let index = 0
        do {
            list[index] += 10
        } while (index++ < list.length - 1)
        console.log(list, list2) // [11, 12, 13, 14, 15]  [1, 2, 3, 4, 5]

如何控制類中屬性的讀寫性

setter...getter...

        class Animal {
            constructor() {
                this._dog = '小黑'
                this._cat = '小黃'
            }
            set cat(val) { // 只寫
                this._cat = val
            }
            get dog() { // 只讀
                return this._dog
            }
        }
        let animal = new Animal()
        animal.dog = '小白'
        animal.cat = '小灰'
        console.log(animal.dog, animal.cat) // 小黑 undefined
        console.log(animal._dog, animal._cat) // 小黑 小灰

Object.defineProperty（）修改物件只讀

        class Animal {
            constructor() {
                this.dog = '小白'
            }
        }
        let animal = new Animal()
        Object.defineProperty(animal, 'dog', {
            writable: false, // 可寫，false為只讀
        });
        animal.dog = '小黑'
        console.log(animal.dog) // 小白