字节前端100题

鲲天口
187 阅读4分钟

  1. 写react/vue项目项目时为什么在列表组件中写key，其作用是什么？

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

  2. ['1', '2', '3'].map(parseInt)结果是什么？

    答案是[1, NAN, NAN]，map的回调函数接收三个参数arr.map((item, index, arr)=>{})，所以
parseInt('1',0)=>1,parseInt('2', 1)=>NAN,parseInt('3', 2)=>NAN

  3. 什么是防抖和节流，有什么区别，一般应用场景，如何实现？

    1、概念：
   防抖：一定时间内，重复触发函数，只触发最后一次
   节流：持续不断输出，间隔一定时间触发一次
2、应用场景
   防抖：输入查询，防止连续点击
   节流：窗口resize，动画优化
3、实现
   /*
    每次触发都先清掉上次timer
   */
   function debounce(fn, delay = 500){
     let timer
     return function(){
       timer && clearTimeout(timer)
       timer = setTimeout(fn, delay)
     }
   }
   /*
     使用时间戳
   */
   function throttle(fn, delay = 500){
     let pre = Date.now()
     return function(){
       let now = Date.now()
       if(now - pre >= delay){
         fn()
         pre = now
       }
     }
   }
   /*
    使用定时器
  */
   function throttle(fn, delay){
     let timer
     return function(){
       if(!timer){
         timer = setTimeout(()=>{
           fn()
           timer = null
         }, delay)
       }
     }
   }

  4. 介绍一下Set，Map,WeekSet, WeekMap的区别？

  5. 介绍下深度优先遍历，广度优先遍历，如何实现？

    深度优先遍历（dfs）：像看书，看第一章->第一节->依次往下看，知道看完整本书
广度优先遍历(bfs)：看第一章-》第二章-》。。。-》第一章第一节-》第二章第一节。。。
const tree = {
	val: '1',
	children: [{
		val: '2',
		children: [{
			val: '4'
		}]
	}, {
		val: '3',
		children: [{
		  val: '5',
		  children: []
		}]
	}]
}
例如：以上树， 深度优先遍历dfs:1,2,4,3,5
广度优先遍历bfs:1,2,3,4,5
实现：
// 递归版
function dfs(root){
  console.log(root.val)
  if(root.children && root.children.length){
    root.children.forEach(item=>{
      dfs(item)
    })
  }
}
// 非递归版， 使用栈实现
function dfs2 (root) {  const stack = []  stack.push(root)  while (stack.length) {    const top = stack.pop()    console.log(top.val); if (top.children && top.children.length) {      const children = top.children      for (let i = children.length - 1; i >= 0; i--) { // 从尾部开始进栈            stack.push(children[i])      }    }  }}
// 非递归版，使用队列实现function bfs (root) {  const queue = []  queue.push(root)  while (queue.length) {    const top = queue.shift()    console.log(top.val)    if (top.children && top.children.length) {      top.children.forEach(item => {        queue.push(item)      })    }  }}

  6. 实现深拷贝，分别使用深度优先遍历递归版，深度优先遍历非递归版，广度优先遍历思想实现，考虑循环引用问题

    1.简易版，JSON序列化，可以应付绝大多数场景。特殊的类型，set,map,循环引用不能用此方式
  JSON.parse(JSON.stringify(obj))
2.深度优先递归版
 function deepClone(o, weakMap) {
   if (weakMap && weakMap.get(o)) return o     let res = {}     let map = new Map()     if (typeof o === 'object') {       if (Array.isArray(o)) {         res = []       }       for (let key in o) {         map.set(o[key], true)         if (typeof o[key] === 'object') {           res[key] = deepClone(o[key], map)         } else {           res[key] = o[key]         }       }     }     return res   }3.深度优先非递归版

  7. es5/es6的继承除了写法以外还有什么区别？

  8. setTimeout、promise、async/await的区别？

  9. async/await如何通过同步的方式实现异步？

  10. 异步笔试题

    async function async1() { console.log('async1start') await async2() console.log('async1end') } async function async2() { console.log('async2') } console.log('scriptstart') setTimeout(function () { console.log('setTimeout') },0) async1() new Promise(function (resolve) { console.log('promise1') resolve() }).then(function () { console.log('promise2') }) console.log('scriptend')

  11. 已知如下数组，编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

 \[\[1, 2, 2\], \[3, 4, 5, 5\], \[6, 7, 8, 9, \[11, 12, \[12, 13, \[14\]\]\]\], 10\]->\[1,2,3,4,5,6,7,8,9,10,11,12,13,14\]  

    function flat(arr){
      return [...new Set(arr.flat(Inifity))].sort((a,b)=>a-b)
    }

12. js异步解决方案的发展历程以及优缺点 13. promise构造函数是同步执行还是异步，then方法呢？ 14. 如何实现一个new? 15. 简单说一下http2多路复用 16. 谈谈对TCP三次握手和四次挥手的理解 17. A、B机器正常连接后，B机器突然重启，问A此时处于TCP什么状态? 18. react中setState什么时候是同步，什么时候是异步的？ 19. react setState笔试题 20. - 21. 有以下三个判断数组的方法，分别说出他们区别和优劣

    Object.prototype.toString.call()
    instanceof 
    Array.isArray

22. 介绍重绘和回流，以及如何进行优化 23. - 24. 聊聊redux和vuex的设计思想 25. 说说浏览器和node事件循环的区别？ 26. 介绍模块化发展历程 27. 全局作用域中，用const和let生命的变量不在window上，那到底在哪里，如何获取？ 28. cookie和token都存放在header中，为什么不会劫持token？ 29. 聊聊vue的双向数据绑定，Modal如何改变view，view又是如何改变modal的 30. 把两个数组合并成一个数组

    ['A1','A2','B1','B2','C1','C2','D1','D2']
    ['A','B','C','D']，
    ->['A1','A2','A','B1','B2','B','C1','C2','C','D1','D2','D']。
    
    function concatArr(arr1, arr2){      const res = [...arr1]      let index = 0      for (let i = 0; i < arr2.length; i++) {       while(index < res.length){         console.log(index);         ++index         if((res[index] && !res[index].includes(arr2[i])) ||
             (res[index] === undefined && res[index-1].includes(arr2[i]))){           res.splice(index, 0, arr2[i])           break         }       }              }      return res    }

31. 改造代码，输出0-9，写出所有你能想到的解法

    for(var i=0;i<10;i++){
      setTimeout(()=>{console.log(i)}) // 10个10
    }
    1、for(let i=0;i<10;i++){
       setTimeout(()=>{
        console.log(i) 
      })
    }
    2、for(var i=0;i<10;i++){
      (function(i){
        setTimeout(()=>{
         console.log(i)
        })
      })(i)
    }

32. vDom真的比操作dom快吗，谈谈你的看法 33. - 34. - 35. 浏览器缓存读取规则 36. 使用迭代方式实现flat函数 37. 为什么vuex的mutation和redux的reducer中不能做异步操作 38. - 39. 介绍一下bfc及其应用 40. 在vue中，子组件为何不可以改变父组件传递的prop 41. 实现add(1)(2,3)(4) // 10

    function add(){
      const args = [...arguments]
      const comulator = function(){ // 参数收集
       args.push(...arguments)
       return comulator 
      }
      comulator .toString = function(){
       return args.reduce((acc, cur)=>acc+cur)
      }
      return comulator
    }
avatar
文章
阅读
粉丝