知识盲点 随笔笔记

盲点知识

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);
}
复制代码