知識盲點 隨筆筆記

盲點知識

redux 和mobx狀態管理庫的區別

1. mobx 使用的是 @inject 裝飾器語法注入，redux 使用的是 connect 語法注入
2. mobx 使用 @observer 語法，讓一個 component 能響應 store 字段更新
3. mobx 會動態精確綁定數據字段和對應 component 關係， redux 使用 connect 參數手動控制傳遞哪些字段
4. mobx 直接修改 store 的狀態，可是必須在 @action 修飾的函數中完成，@action 的語義，表示這是一個修改狀態的操做
5. redux Provider 傳遞 store 是強約定，mobx Provider 靈活傳遞 store actions，也能夠是其它名字，好比 db
6. redux 使用了比較難以理解的高階函數和參數 connect combineReducers bindActionCreators mapStateToProps mapDispatchToProps ，mobx 方案，除了使用 decorator 語法，沒有其它讓人感受理解困難的函數。 7.redux 引入了數據流，mobx 沒有數據流的概念，經過 actions 直接改變數據

Fetch實現請求

Fetch和ajax的不一樣

1. 當接收到一個表明錯誤的 HTTP 狀態碼時，從 fetch()返回的 Promise 不會被標記爲 reject， 即便該 HTTP 響應的狀態碼是 404 或 500。相反，它會將 Promise 狀態標記爲 resolve （可是會將 resolve 的返回值的 ok 屬性設置爲 false ），僅當網絡故障時或請求被阻止時，纔會標記爲 reject。
2. 默認狀況下，fetch 不會從服務端發送或接收任何 cookies, 若是站點依賴於用戶 session，則會致使未經認證的請求（要發送 cookies，必須設置 credentials 選項）。

OPTIONS請求方法的主要用途有兩個：

1. 獲取服務器支持的HTTP請求方法；

2. 用來檢查服務器的性能。

js基礎知識

toLocaleTimeString()根據本地時間把Date對象的時間轉換爲字符串

var d=new Date()
var n=d.toLocaleTimeString()   //輸出"2019/2/26"
複製代碼

ES6 知識

async/await

async關鍵字表示該函數內部有異步，async函數返回一個Promise對象，可使用then方法添加回調，遇到await就返回，等到異步操做完成，再接着執行函數體後面的語句。

async使用形式

// 函數申明
async function foo(){}
// 函數表達式
const foo=async foo(){}
// 對象形式
let obj={async foo(){}}
obj.foo().then()
// 箭頭函數
const foo=async () => {}
複製代碼

使用注意點

1. await命令最好放在try...catch代碼塊中，或者await後面跟一個catch方法
2. await命令只能用在async函數之中，若是用在普通函數，就會報錯
3. 多個await命令後面的異步操做，若是不存在繼發關係，最好讓它們同時觸發

Set和Map數據結構

Set

1. 用法,set自己是一個構造函數，用來生成Set數據結構

const set=new Set([1,1,2,2,3,3])
[...set]    // [1,2,3]

const item=new Set([1,2,3,3,3,3])
item.size     //3
複製代碼

實際應用

//去除數組的重複成員
[...new Set(array)]

//去除字符串中的重複字節
[...new Set('abbbcccc')].join()    //abc

//Array.from方法能夠將 Set 結構轉爲數組
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
複製代碼

set和map實例屬性和方法

• 遍歷操做,set默認遍歷操做是values,map默認遍歷操做是entries
• keys() 返回鍵名
• values() 返回鍵值
• entries() 返回鍵值對
• forEach() 使用回調函數遍歷每個成員

Set/Map/Array/Object使用場景

Array和Set對比

• Set沒有重複值
• Set經過delete刪除，Array經過splice
• Set沒有Array的Map/filter/some/every等新方法
• Array的indexof沒有Set的has()方法效率高

Object和Map對比

• Object的鍵是string，Map的鍵能夠是任意類型
• Object的尺寸須要手動計算，而Map.size能夠獲取尺寸

for...of循環

• 一個數據結構只要部署了Symbol.iterator屬性，就被視爲具備 iterator 接口，就能夠用for...of循環遍歷它的成員。也就是說，for...of循環內部調用的是數據結構的Symbol.iterator方法。

• for...of循環可使用的範圍包括數組、Set 和 Map 結構、某些相似數組的對象（好比arguments對象、DOM NodeList 對象）、後文的 Generator 對象，以及字符串

for..of 和for...in的區別

• for...in只能獲取對象的鍵名，不能直接讀取對象的鍵值，for...of容許直接獲取對象的鍵值

var arr=['a','b','c']
for(let a in arr){
    console.log(a) //0 1 2
}
for(let a of arr){
    console.log(a) // a b c
}
複製代碼

• 普通的對象，for...in循環能夠遍歷鍵名，for...of循環會報錯

//Object.keys方法將對象的鍵名生成一個數組，而後遍歷這個數組
for (var key of Object.keys(someObject)) {
  console.log(key + ': ' + someObject[key]);
}
複製代碼

for..of 和其餘語法的比較

//for循環，比較麻煩
for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

//forEach循環，沒法中途跳出forEach循環，break命令或return命令都不能奏效
myArray.forEach(function(value){
    console.log(value)
})

//for...in,主要是爲遍歷對象而設計的，不適用於遍歷數組,只可遍歷數組鍵值
for (var index in myArray) {
  console.log(myArray[index]);
}

//for...of
for (let value of myArray) {
  console.log(value);
}
複製代碼