知识点整理(随机整理)

1.JS预解析(变量提升)

JS在读取到一个script（或者一个函数作用域），会先进行一个预解析的过程，在这个过程中，会把var 声明的变量和 function 声明的函数体，提升到整个script（或者一个函数作用域）最前边去

- var 在预解析时，会把声明提升到最前边

- function 的函数体在预解析时，会把整个函数体提升至最前边，在预解析完之后，JS才会从上到下一行一行解析代码并执行

注意：var 的优先级要高于 function，预解析时，先预解析所有的 var ，然后再解析 function

console.log(a)
var a = 10
function a() {
    console.log(1)
}
console.log(a)
var a = function () 
{    
   console.log(2)
}
console.log(a)复制代码

以上代码执行时，会先预解析成如下结果：

var a;var a;function a() {    console.log(1)}console.log(a)a = 10console.log(a)a = function () {    console.log(2)}console.log(a)复制代码

2.获取计算后样式

function getStyle(el, attr) {    return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el)[attr];}复制代码

需要注意的是，getComputedStyle这个方法并不兼容IE8及以下浏览器，为了兼容IE浏览器，我们可以使用currentStyle这个属性来获取计算后样式，而currentStyle这个属性在非IE浏览器中会报错。

3、三次握手和四次挥手（抽象派）

三次握手

客户端：hello，你是server么？
服务端：hello，我是server，你是client么
客户端：yes，我是client复制代码

四次挥手

主动方：我已经关闭了向你那边的主动通道了，只能被动接收了
被动方：收到通道关闭的信息
被动方：那我也告诉你，我这边向你的主动通道也关闭了
主动方：最后收到数据，之后双方无法通信复制代码

4.npm模块安装机制

• 发出 npm install 命令
• 查询 node_modules 目录之中是否已经存在指定模块

• 若存在，不再重新安装
• 若不存在
  • npm 向 registry 查询模块压缩包的网址
  • 下载压缩包，存在在根目录下的 .npm 目录里
  • 解压压缩包到当前项目的 node_modules 目录

5.vue/react中key的作用

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中，在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的 map 映射）。如果没有找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言，map映射的速度更快。

key是给每一个vnode的唯一id，可以依靠key，更准确，更快的拿到oldVnode中对应的vnode节点

1.更准确

因为带key就不是就地复用了，在sameNode函数 a.key === b.key 对比中可以避免就地复用的情况，所以会更加准确

2.更快

利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。

6.字符串截取

slice(start,end)，从start截取到end的位置（不包括end）

substring(start,end)，同slice，从start截取到end的位置（不包括end）

substr(start,length)，从start开始截取length长度的字符串

7.every和some

every方法，每一项都返回true才会返回true,如果有一项返回了false就返回false

some方法和every方法相反，有一项返回true，就返回true，全部都返回false，才会返回false

var arr =  ["a","b","c",false,"e"];var isAllTrue = arr.every(function(item,index){        return item;});console.log(isAllTrue); // falsevar isSomeTrue = arr.some(function(item,index){        return item;});console.log(isSomeTrue); //true复制代码

8.reduce方法的常用场景

累加

        var arr = [1, 2, 3, 4, 5];        var result = arr.reduce((n1, n2) => {            return n1 + n2        })        console.log(result) // 15复制代码

求数组中的最大值

        var arr = [1, 2, 3, 4, 5];        var result = arr.reduce((n1, n2) => {            return n1 > n2 ? n1 : n2        })        console.log(result) // 5复制代码

9.input搜索防抖如何处理中文输入，可以使用compositionstart、compositionupdate、compositionend这三个方法来判断中文输入是否结束。

(function () {      let debounce = (time) => {        let timer = null        return function (value) {          if (timer) {            clearTimeout(timer)          }          timer = setTimeout(() => {            console.log(value)          }, time)        }      }      let input = document.querySelector('.input')      let dbFun = debounce(1000)      input.addEventListener('keyup', function (e) {        dbFun(e.target.value)      })      input.addEventListener('compositionstart', function (e) {        console.log('compositionstart')      })      input.addEventListener('compositionupdate', function (e) {        console.log('compositionupdate')      })      input.addEventListener('compositionend', function (e) {        console.log('compositionend')      })    })()复制代码

转载于:https://juejin.im/post/5d35104751882526916babda