MS问题汇总小结～（持续更新记录）

// ******************* 伪数组转化为数组的方法*******************
function test () {console.log(arguments)let aa = arguments[Symbol.iterator]()console.log(aa.next())console.log(aa.next())console.log(aa.next())console.log(aa.next())console.log(Array.from(arguments))console.log([...arguments])console.log([].slice.call(arguments,0))console.log(Array.prototype.slice.call(arguments,0))var arr1 = [],len1 = arguments.length;for (var i = 0; i < len1; i++) {arr1.push(arguments[i]);}console.log(arr1)
}
test(45,765,6)// 数组去重，数组中的项为对象
// 闭包
// useReaction
// hook的更新原理
// 一键切换mock数据
// let,const,var
// 可枚举与不可枚举
// html加载顺序//***************************** v-for为什么要用key **********************
// key必须稳定且唯一，用来唯一标识同父同层级的兄弟元素，同级节点添加唯一的key进行区分至关重要，直接决定react组件的性能。当React作diff时，只要子元素有key属性，便会去原v-dom树中相应位置(当前横向比较的层级)寻找是否有同key元素，比较它们是否完全相同，若是则复用该元素，免去不必要的操作。
// key 属性是React用来匹配新旧组件树中子组件的标识，能够让 React 了解哪些组件需要被变更， key 属性能够大大提高启发式算法的性能，并保证 React 正常运行。// *******传统的diff算法，使用递归遍历，复杂度可能会极高，如果想用Fiber的方式中断任务，在递归中是很难处理的；
// *******而新的React diff算法，《由于在前端当中，很少出现跨越层级移动DOM元素的情况，所以React采用了简化的diff算法》将复杂度降为一维，使用大循环的方式，只会对virtual dom中同一个层级的元素进行对比，且任务可中断。
// ********大循环的方式：即执行某个fiber后， 会执行他的子元素， 如果没有子元素， 则兄弟元素， 然后又回到父元素， 父兄弟元素...，而寻找元素则是根据其上面几个属性return(父元素)，child(子元素)，sibiling(兄弟元素)// ******************************* react fiber ****************************
//  俗话可以理解为===》(虚拟domreact 中叫Fiber, diff算法react 中叫协调，新的任务调和器)。Fiber 架构就是用 异步的方式解决旧版本 同步递归导致的性能问题。
// Fiber实际上就是一个任务调和器，把一次更新拆成一个个的单元任务，每次做完一个单元任务后，就询问是否有更高的优先级任务，有就去执行，回头再来干这件事。
// （1）说下 react16 之前 stack架构，递归遍历组件树成本很高，会造成主线程被持续占⽤，结果就是主线程 上的布局、动画等周期性任务就⽆法⽴即得到处理，造成视觉上的卡顿，影响⽤户体验
// （2）Fiber架构 任务分解，把一个耗时长的任务分解为一个个的工作单元，避免主线程的持续占用造成卡顿问题，由浏览器判断是否有空余时间执行，有时间就执行工作单元
// （3）增量渲染，把渲染任务拆分成多块
// （4）更新时候能够暂停，终止，复用渲染任务。会在浏览器空闲时期依次调用函数， 这就可以让开发者在主事件循环中执行后台或低优先级的任务，而且不会对像动画和用户交互这样延迟触发而且关键的事件产生影响。函数一般会按先进先调用的顺序执行，除非函数在浏览器调用它之前就到了它的超时时间
// （5）给不同类型的更新赋予优先级// ***************************call，apply，bind的区别************************
// 1.call和apply返回的都是立即执行的函数，但是bind返回的只是一个函数，需要再次调用才可以，故bind的参数可以分多次传入调用
// 2.三个的存在都是为了改变this的指向，且第一个参数都是this要指向的新对象，如果没有这个参数或参数为undefined或null，则默认指向全局window
// 3.三个方法都接受参数，call是参数列表，apply是一个参数数组，且apply和call是一次性传入参数，而bind可以分为多次传入。// ***************************** setTimeout有最小延时 *******************
// setTimeout有最小延时4ms，前提是在一个执行的嵌套层级超过5层的结构里，并且设置的timeout时间小于4ms时，才会设置成4ms
// 但是在不同的浏览器中可能会有实际不相同的执行结果，比如在非嵌套5层的结构中，谷歌浏览器设置的最小timeout时间为1ms;嵌套层级超过或者等于5层的结构里，才会设置timeout时间最小为4ms
// 实现一个0ms的setTimeout使用postMessage// ***************************** Set数据/Map数据*******************
// set内部不能有重复的值，是通过三等运算符来确认的，所以两个对象总是不相等的,除非两个对象的内存地址相同；但是在set内部两个NaN是相等，所以只能存在一个NaN;
// 常用的方法：size(长度)/add(添加)/delete(删除)/has(存在)/clear(清空)// Map类似于对象的结构，是键值对的集合，但是键的范围不限于字符串，各种类型的值都可以当作键名。判断键名是否相同时，使用全等进行判断（除了NaN）。Map 可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。[['name':'dd'],['age',18]]
// 注意⚠️：当对象作为键名出现时，实际是以对象的内存地址绑定的，所以使用对象作为键名时，就不用慌和别人的键名同名的情况了
//  常用的方法：size(长度)/set(设置)/get(获取)/delete(删除)/has(存在)/clear(清空)/keys(遍历键名)/values(遍历键值)/entries(遍历键值对数组)/forEach(遍历所有成员)// *************************** for...of...***************************
// for...of循环可以使用的范围包括字符串、数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象），是用来循环具有iterator接口的数据（以上均是）
// for...in...可以用来循环数组和对象（但主要是为遍历对象而生的）
// for...of...和for...in...的区别：of是直接循环得到对象的键值，in是直接循环得到对象的键名；for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性，而for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上可枚举的键,比如这种产生的键名name ===》Object.protoType.name = 'liming'// *************************统计页面中最多的html标签***********************
// 或者使用document.getElementsByTagName('*')
// let arr = Array.from(document.querySelectorAll('*')).map(v => v.tagName)
// let obj1;
// // reduce的第二个参数是累加的初始值
// Object.entries(arr.reduce((total,next,index,arr) => {//   if(total[next]) {//     total[next]++
//   }else {//     total[next] = 1
//   }
//   return total
// },{})).sort((a,b)=> b[1] - a[1])[0][0]// **************************** Map数据结构的创造 **************************
let obj1 = new Map([[{sex:'2'},'女']]);
const key1 = {age:12};
obj1.set('name','jj')
obj1.set(key1,90)
obj1.set('name','gg')
console.log(obj1)// ******************* Object.prototype.toString.call(value) ********************
// 用来检测数据类型：
// 返回值如下：
// '[object Array]','[object Object]','[object Null]','[object Undefined]','[object String]','[object Set]'等等// ****************require/extends和import/export的区别********************
// require是Commonjs的语法，动态加载，在运行的时候调用，导入的是值的拷贝；import是ES6语法，静态加载，编译的时候调用，所以必须放在最上面，导入的是值的引用。// ***************Proxy对象***********************
// const proxy = new Proxy({},{//   get: function(target,proKey,receiver){//     return Object.prototype.toString.call(target)
//   }
// })
// console.log(proxy.gg)// **********************广度优先遍历******************************let tree = [{id: '1',title: '节点1',children: [{id: '1-1',title: '节点1-1',children: [{id:'1-1-1',title:'节点1-1-1'},{id:'1-1-2',title:'节点1-1-2'},]},{id: '1-2',title: '节点1-2',}]},{id: '2',title: '节点2',children: [{id: '2-1',title: '节点2-1'}]}]
//   function treeForeach(tree){//     let node,list = [...tree]
//     let aa = [];
//     while(node = list.shift()){//       aa.push(node.title)
//       node.children && list.push(...node.children)
//     }
//       console.log(aa)
//   }
//   function treeForeach(tree){//     let list = [...tree]
//     let aa = [];
//     for(let i of list){)
//         aa.push(i.title);
//         i.children && list.push(...i.children)
//     }
//       console.log(aa)
//   }
// **********************二叉树-中序遍历/前序遍历/后序遍历******************************// **********************实现一个类似reduce的函数**********************
// const reduce = (list,cb,...base) => {//   console.log(base.length);
//   let num = base.length?base[0]:list[0];
//   for(let i = base.length?0:1;i++;i<list.length) {//     num = cb(num,base[i])
//   }
//   return num
// }
// // 测试调用
// reduce([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (x, y) => x + y, undefined)
//********************手动实现trim*****************
// const trim = (str) => str.replace(/^\s+|\s+$/,'')
function debounce (method, delay) {return (...argus) => {setTimeout(() => {method(...argus)},delay)}
}
debounce((a,b) => a+b,1000)(1,3)// ************************react和vue的区别 diff算法（为什么vue不用fiber）****************
// 1.react使用jsx,没有办法做静态节点分析;vue使用template进行模版编译，可以很好对静态节点进行分析然后进行打补丁标记，对于vue2在遇到静态节点会跳过过循环的diff对比,而vue3会把整个静态节点进行提升处理，Diff 的时候是不过进入循环的，故性能更快
// 2.react使用的fiber算法是基于单向的链表结构进行diff对比，无法进行反向链表结构查找，故是从左到右进行对比查找；而vue2是采用的双端对比算法，vue3是更快的最长递增子序列算法（基于双端对比）
// 3.Vue 通过响应式依赖跟踪，在默认的情况下可以做到只进行组件树级别的更新计算；而react则需要对比整颗的dom树，渲染开销过大，需要结合一些hook进行性能优化，并使用fiber
// 4.fiber主要针对100ms以上的开销计算，才能达到肉眼可感知的效果，而react会经常有，vue很少有，故vue不需要//****************************vue3的提升点（相比vue2）***************************************
//    一、diff算法方面:
// 1.patchFlag对虚拟DOM节点进行类型静态标记
// 2.静态节点提升，不参与更新的元素静态提升到了全局，重渲染的时候复用即可，无须重新创建，加快代码的执行速度(进行diff预处理，降低diff的操作量)
// 3.新增一个source数组来记录新节点的位置索引（针对节点顺序调换的情况，非重新渲染，而是复用原节点，进行节点的移动），而新增的节点索引为-1
// 4.事件缓存，cacheHandler可在第一次渲染后缓存我们的事件,相比于 Vue2,无需每次渲染都传递一个新函数
// （注：vue2是双端对比算法，vue3是最长递增子序列算法）
// 5.响应式使用proxy监听对象，虽然Proxy不能直接监听到内部深层次的对象变化，但是在getter中去递归响应式，这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑递归；vue2使用Object.defineProperty
//   二、打包优化方面：
// tree-shaking进行模块化打包时，移除 JavaScript 上下文中未引用的代码，主要依赖于import和export语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用；vue2没有动态引入相应的api写法，全局 API 暴露在 Vue 实例上，诸如nextTick、version、observable(v2.6新增，v3.0先替换为reactive)即使没有未使用，也会被打包；但是vue3使用动态引入，未使用的api将从最终的捆绑包中消除，获得最佳文件大小，更加轻量级// 事件委托/事件冒泡/事件捕获/react合成事件 target
// 发布订阅模式/观察者模式
// 服务端推送的过程（短轮询/长轮询/websocket）
// 发布订阅模式/观察者模式(区别/使用场景/手写vue的发布订阅)
// http2.0和http1.1的区别/http和https的区别
// 协商缓存和强缓存
// history/hash路由模式的原理
// react的函数组件和类组件的区别
// mixins（vue2使用中优先级问题）/vue3的组合式api的优点
// vue3和vue2的区别-响应式/算法区别
// 闭包的理解
// useRef的作用/useState为什么不能写在条件语句中
// react的新版生命周期
// this的指向问题let arr1 = [1,2,4,6,2]
function removeRepeat (arr,num) {// return Array.from(new Set(...arr))// let obj = {};// let newArr = arr.map((item,index,arr) => {//   if(obj.hasOwnProperty(item) && obj[item] < num) {//       obj[item]++;//       return item;//   } else if(!obj.hasOwnProperty(item)){//     obj[item] = 1;//     return item;//   }// })// return newArr.filter((item) => !!item)let obj = {};arr.forEach((item,index,arr) => {if(obj.hasOwnProperty(item) && obj[item] < num) {obj[item]++;return false;} else if(!obj.hasOwnProperty(item)){obj[item] = 1;return false;}arr.splice(index,1)})return arr
}
// function judge(arr) {//   for(let i=0;i<arr.length;i++) {//     console.log(arr[i])
//     if(arr[i] === 1) {//       throw new Error('ff')
//     }
//   }
// }

MS问题汇总小结～（持续更新记录）相关推荐

自然语言处理评测汇总（持续更新）
自然语言处理评测汇总(持续更新) 目录自然语言处理评测汇总(持续更新) 一.评测相关会议 1. WSDM Cup 2021(3月份) 2. TAC相关评测(3月份) 3. CCKS 2021相关评测 ...
Python之Pandas使用知识汇总（持续更新）
Python之Pandas使用知识汇总一.Pandas简介二.环境三.使用 3.1 数据结构 3.1.1 Series 3.1.2 Dataframe 3.2 索引对象 3.3 读写文本格式数据 ...
Golang优秀开源项目汇总（持续更新。。。）
Golang优秀开源项目汇总(持续更新...) 我把这个汇总放在github上了, 后面更新也会在github上更新. https://github.com/hackstoic/golang-open ...
2020年| 最新自动驾驶数据集汇总，持续更新（2）
实时分享CVPR.ECCV等会议,关注深度学习.自动驾驶领域,我们期待你的加入.点击上方"CNNer",选择加"星标"或"置顶"精选干货,当 ...
声音数据集汇总【持续更新】
声音数据集汇总[持续更新] 用于对打鼾和非打鼾声音进行分类https://www.kaggle.com/datasets/tareqkhanemu/snoring 呼吸音数据库-使用音频记录来检测呼吸 ...
关于ASP.NET MVC开发设计中出现的问题与解决方案汇总【持续更新】
关于ASP.NET MVC开发设计中出现的问题与解决方案汇总 [持续更新] 参考文章: (1)关于ASP.NET MVC开发设计中出现的问题与解决方案汇总 [持续更新] (2)https://www. ...
2023届秋招提前批信息汇总（持续更新ing）
实时更新的文档:2023届秋招提前批信息汇总(持续更新ing) (qq.com) 公司投递链接面试网站工作地点截止时间互联网及私企(软件) 网易游戏网易游戏(互娱)校园招聘官网 https ...
动态规划题目汇总（持续更新）
动态规划题目汇总(持续更新) 目录动态规划题目汇总(持续更新) 1. 钢条切割问题描述解法 2. 矩阵链乘法问题描述解法 3. 最长公共子序列问题描述解法 4. 无重复字符的最长子串问 ...
Cisco 产品下载链接汇总 2023 持续更新中
Cisco 产品链接汇总 2023 持续更新中 IOS-XE, IOS-XR, NX-OS & FXOS based on linux kernel 请访问原文链接:https://sysin ...
有关树的常见算法汇总【持续更新中】
关于数据结构中--树的算法汇总[持续更新中] 0.树的顺序和链式存储结构 [完成] 1.树的前序遍历(递归和非递归java实现) [完成] 2.树的中序遍历(递归和非递归java实现) [完成] 3. ...

MS问题汇总小结～（持续更新记录）

MS问题汇总小结～（持续更新记录）相关推荐

最新文章

热门文章