传说中的前端100问

一、第1-10题

  1. (滴滴)写react、vue项目是为什么要在列表组件中写key,其作用是什么?

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

  2.什么是防抖、节流?有什么区别?如何实现?

防抖:触发高频事件后n秒内只会执行一次,如果n秒内高频事件再次被触发,测重新计算事件

思路:每次触发事件时都会取消之前的延时回调方法.

节流:高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率

思路:每次触发事件时都判断当前是否有等待执行的延时函数

  3.介绍一下set、map、weakSet和weakMap的区别?

set和map主要的应用场景在于数据重组和数据储存

set是一个叫做集合的数据结构类似于数组,但是成员时唯一且无序的,没有重复的值

//数组去重
let arr=[1,2,3,4,1]
[...new Set(arr)]

向set中加入值时,不会发生类型转换

weakSet对象允许你将弱引用对象储存在一个集合中

weakset对象于set的区别:

  weakset只能储存对象引用,不能存放值,而set对象都可以

Map(字典)集合与字典的区别:

  共同点:集合、字典可以储存不重复的值

  不同点:集合是以【vaue,value】的形式存储,字典是以[key,value]的形式储存

  • 本质上时键值对的集合,类似集合
  • 可以遍历,方法很多可以跟各种数据格式转化

weakMap

  • 只接受对象作为键名,不接受其他类型的值作为键名
  • 键名时弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
  • 不能遍历,方法有get、set、has、delete

  4.已知如下数组:

var arr=[ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化并去除其中重复部分数据,最终得到一个升序且不重复的数组

var arr=[ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
let arr1=[];
arr1=[...new Set(arr.flat(Infinity))].sort((a,b)=>a-b)
console.log(arr1)

  5.有以下3个判断数组的方法,请分别介绍他们的区别和优劣

Object.prototype.toString.call()、instanceof以及Array.isArray()

1.Object.prototype.toString.call()这种方法对于所有基本的数据类型都能进行判断,即使是null和undefined.

2.instanceof的内部机制是通过判断对象向的原型链中是不是能找到类型的prototype。

  [] instanceof Array;//true

3.Array.isArray()

  6.请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D'],合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。

let a1=['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'];
let a2=['A','B','C','D'].map((item)=>{
   return item+3 
});
let a3=[...a1,...a2].sort().map((item)=>{
   if(item.includes('3')){
       returen item.split('')[0]
}
return item
})

 

 

 

上一篇:vue3 + threejs 实现仿iView官网大波浪特效


下一篇:使用javap工具分析Java String(字符串)操作