43、赋值表达式联合运算符

a += b 等价于 a = a + b能这样用的运算符还有*=、/=、%=、+=、-=、<<=>>=、>>>=、&=、^=、|=、**=

44、react setState办法立刻失效的方法

this.state = {  count:0}this.setState((prevState) => {  return { count: 0 }})this.setState((prevState) => {  return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，以后返回 1})this.setState((prevState) => {  return { count: prevState.count + 2 } // 以后返回 3})

下面咱们进行了三次 setState，然而实际上组件只会从新渲染一次，而不是三次；这是因为在 React.js 外部会把 JavaScript 事件循环中的音讯队列的同一个音讯中的 setState 都进行合并当前再从新渲染组件

45、获取textarea多行文本行数

text.split(/\r?\n|\r/).length

46、查问npm插件应用状况

https://www.npmjs.com/package/package

47、手机号脱敏

phoneHide(phone) {    var reg = /(\d{3})\d*(\d{4})/    var hiddenPhone = phone.replace(reg, "$1****$2")    return hiddenPhone}

48、forEach跳出循环

Array.forEach(item => {    if(true){        throw new error()    })

另外
every 和 some 都能够用return来终止循环

49、增删改url的参数

1、把参数提取成对象格局（qs库、url-parse）2、扭转对象3、对象再转换为参数格局拼接到url上

50、递归解决树型数据

const selectFormat = items => {  return items.map(({ title, value, children, id, name }) => {    const hasChildren = Array.isArray(children)    const selectKey = UUID()    return {      title: title || name,      value: hasChildren ? selectKey : value || id,      children: hasChildren ? selectFormat(children) : [],      key: selectKey,    }  })}

51、 一个款式解决表格信息为空

empty辨认空字符串

.ivu-table-cell>span:empty:after{    content:'暂无数据';    font-size:12px;    color:#ccc;}

52、命令行工具

# ~/.zshrc 结尾处减少以下内容# 重启命令行或者执行 `source ~/.zshrc` 之后能力失效 # 输出 `code` 命令在任意地位应用 VSCode 关上代码，例如输出 `code .` 关上当前目录alias code="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code" # 输出 `history` 命令查问历史操作alias history="fc -il 1" # 代码治理别名命令# 切换至 qa 分支并更新 qa 至最新代码alias reset-qa="git fetch --all && git checkout qa && git reset --hard upstream/qa"# 切换至 production 分支并更新 production 至最新代码alias reset-production="git fetch --all && git checkout production && git reset --hard upstream/production"# 推送代码并主动创立 Merge Request 至 qa 分支，Pipeline 胜利之后将会主动合并alias push-qa="git push origin -o merge_request.create -o merge_request.merge_when_pipeline_succeeds -o merge_request.target=qa"

53、复制文本

// 复制文本export const copyText = (text, cb) => {  if (window.clipboardData && window.clipboardData.setData) return window.clipboardData.setData('Text', text) // IE 兼容  function save(e) {    e.clipboardData.setData('text/plain', text)    e.preventDefault()  }  document.addEventListener('copy', save)  try {    if (!document.execCommand('copy')) throw new Error('复制失败')  } catch (err) {    window.prompt('Ctrl + C 复制剪切板', text)  } finally {    document.removeEventListener('copy', save)    cb && cb()  }}

54、【问题记录】 如何在不阻塞載入或期待載入的情況下載入 iframe

https://stackoverflow.com/questions/53583045/how-to-load-an-iframe-without-blocking-onload-or-waiting-for-onload

55、互联网罕用英文简称

人物类
  • PM-Product Manager-产品经理
  • -Project Manager-项目经理
  • RD-Research and Development- 研发
  • FE-Front-End-前端；web前端研发；
  • OP-Operations-运维
  • UI-User Interface-用户界面
  • UID-User Interface Design-用户界面设计
  • ID-Interaction Design-交互设计
  • UE or UX-User Experience-用户体验
  • UED-User Experience Design-用户体验设计
  • UCD-User Centered Design-以用户为核心的设计
  • DBA-Database Administrator-数据库管理员
文档类
  • PRD-Product Requirements Document-产品需要文档
  • BRD-Business Requirements Document-商业需要文档
  • MRD-Market Requirements Document-市场需求文档
  • FSD-Functional Specifications Document-性能具体阐明

  • 56、判断两个区间是否存在交加

    dayjs diff 办法能够判断两个时间段时候存在交加

  • 思考过程
    判断两个区间是否存在交加，状况太多，容易漏掉状况，曲线救国，判断两个区间不存在交加
    先排序，而后比大小

57、 生产环境强制开启Vue Devtools

https://blog.eh5.me/force-enable-vue-devtools/

58、 前端大文件上传

前端大文件上传网上的大部分文章曾经给出了解决方案，外围是利用 Blob.prototype.slice 办法，此办法和数组的 slice 办法类似，调用的 slice 办法能够返回原文件的某个切片。

这样咱们就能够依据事后设置好的切片最大数量将文件切分为一个个切片，而后借助 http 的可并发性，同时上传多个切片，这样从本来传一个大文件，变成了同时传多个小的文件切片，能够大大减少上传工夫。

另外因为是并发，传输到服务端的程序可能会发生变化，所以咱们还须要给每个切片记录程序。

59、 前端大文件断点续传

断点续传的原理在于前端/服务端须要记住已上传的切片，这样下次上传就能够跳过之前已上传的局部，有两种计划实现记忆的性能：

1、前端应用 localStorage 记录已上传的切片 hash。
服务端保留已上传的切片

2、hash，前端每次上传前向服务端获取已上传的切片。

第一种是前端的解决方案，第二种是服务端，而前端计划有一个缺点，如果换了个浏览器就失去了记忆的成果，所以这里选取后者。

60、检测文件类型插件

file-type

npm 链接： file-type

61、?. 和 ?? 操作符

  • ?.操作符 如果对象不存在，刚返回 undefined

    // 这样的写法能够使代码更强壮// 对象console.log(user.homeaddress?.country); // 数组 如果hobbies[3] 不存在name属性，就会报错user.hobbies[3].name  // 改写为user.hobbies?.[3].name
  • ?? 操作符 不返回 undefined 而是返回一个默认值
const country = user.officeaddress?.country;console.log(country);// undefined

须要返回默认值：

const country = user.officeaddress?.country ?? "中国";console.log(country);// 中国

62、浏览器重发申请

火狐浏览器

找到申请，右键编辑并重发，编辑申请数据后点击发送就能够重发申请

谷歌浏览器

右键 -> copy -> copy as fetch
而后复制粘贴到控制台，批改，回车执行代码

63、数据兜底

即便在对好接口后，也不要信赖后端的任何返回

所有页面 所有操作都要做好兜底操作

64、 waitOneSecond

waitOneSecond() {    return new Promise(resolve => {        setTimeout(resolve, 1000);    });}

65、Intersection Observer

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步察看指标元素与其先人元素或顶级文档视窗(viewport)穿插状态的办法。先人元素与视窗(viewport)被称为根(root)。