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