談一談let與var和const的區別javascript
let爲ES6新添加申明變量的命令，它相似於var，可是有如下不一樣： java
- 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. 定義對象方法、定義原型方法、定義構造函數、定義事件回調函數。promise
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能夠是任何值app
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) // 小白