前端实用笔记

100 阅读1分钟

字符串截取: 例如:a='啊🚗伟大伟大' a.slice(0,2) 结果是这样: 啊�"

因为js字符编码设置ysc-2,16位编码码元。

utf-16后·,可以改为32位。 length属性是码元属性,而这个表情🚗是2个码元,所以是“?”

要使用码点取值:codePointAt

sliceByPoint=function (pStart,pEnd){ let result = ''; let pIndex = 0; let cIndex = 0; while(1){ if(pIndex>=pEnd || cIndex>=this.length){ break; } const point = this.codePointAt(cIndex) if(pIndex>=pStart){ result+=String.fromCodePoint(point) } pIndex++; cIndex+=point>0xfff?2:1 } return result }

2.大文件数据请求:白屏问题。

分片之前: async function a(){ const url ="xxxx" const resp = await fetch(url) const text = await resp.text() }

后: async function a(){ const url ="xxxx"; const resp = await fetch(url);

const reader=resp.body.getReader();
const decoder=new TextDecoder();
for(;;){
     const {value,done}=await reader.read();
     if(done){break}
      const text =  decoder.decode(value)
      return tezt
}

}

3.请求取消; 防止搜索的响应不正确:

只能用fetch:const control=new AbortController() 网络请求处代码:

=>{ controller&&controller.abort() const control=new AbortController() list = await fetch({signal:controller.signal}).then({}) }

4.监听本地缓存实现跨标签页通信:

sendMsg(type,payload){ localStorage.setItem("@@"+type,Json.Stringfy(payload,temp:Date.now())) }

listenMsg(hander){ const storageHandler = e =>{ const data = JSON.parse(e.newValue) handler(e.key.subString(2),data.payload) } window.addEventListenter('storage',storageHandler) return ()=>{ window.removeEventListener('storage',storageHandler) } }