談一談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) // 1Generator：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) // 1async/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) // 1ES6中的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) // 小白
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/227547.html
標籤：其他
上一篇：前端分頁功能（通用）
下一篇：三劍客var,let,const