知識盲點 隨筆筆記

leinizisky發表於2019-03-03
筆記

盲點知識

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);
}
複製程式碼

相關文章