1.vue 的 v-for为什么要加上 :key 以及为什么不能用做数组索引 从原理分析
因为vue和react的diff算法 需要判断更新前后节点的对应关系,比如下图的更新前的BDE,更新后为BCDE 插入了一个C,如果没有:key的话,算法无法判断这个C是插入的,就会认为B之后的节点全部对不上,都执行patch生成新的虚拟DOM,就浪费了性能。

当我们用一个唯一且稳定的值标识了数组的元素之后,算法就不用考虑顺序以及对应关系,只比较:key相同的元素即可

Q:为什么不能用数组索引当key?
A:因为数组索引明显不是一个唯一且稳定的值,比如通过Array.shift()等方法可以轻松改变索引和元素对应关系,但是元素本身是没有改变的,达不到减少性能开销的目的
2.为什么0.1+0.2!==0.3 分析并提出解决方案
3.虚拟DOM比操作真实DOM效率和性能更高吗?
真实DOM效率更高,虚拟DOM还需要diff算法等额外开销,因为他们最终都是要挂载到真实DOM上并触发重排的。两者都对于同步的修改有优化(只挂载/触发一次重排)
4.生成1000个不重复的六位验证码字符串数组:
生成1000个不重复的六位验证码字符串数组:
1.单个验证码6位数字0-9
2.一次1000个验证码。数组形式返回
3.单次生成一批不能重复
function random():string[]{ }
分析一下,此题关键是利用random()生成随机数,且不能重复。考虑到查重的算法,map是最简单的,同时也可以使用Set
/*
生成1000个不重复的六位验证码字符串数组:
1.单个验证码6位数字0-9
2.一次1000个验证码。数组形式返回
3.单次生成一批不能重复
function random():string[]{
} */
function random(){
let map=new Map()
let result=[]
for(let i=0;i<1000;i++){
randomApply(map,result)
}
return result
}
// 生成单个不重复的字符串
function randomApply(map,result){
let randomStr=productRandomStr()
while(map.has(randomStr)){
randomStr=productRandomStr()
}
map.set(randomStr,'')
result.push(randomStr)
}
// 生成六位random字符串函数
function productRandomStr(){
let str=``
for(let i=0;i<6;i++){
str+=`${Math.floor(Math.random()*10)}`
}
return str
}
console.log(random());
5.Promise.resolve(a+b)实现累加:
这题当时没做出来 后面问题锁住了不给看 大概是这么个题干和解答
/*
funciton add(a,b)=>Promise.resolve(a+b)
实现 function addUp(arr) 累加返回结果
*/
function add(a,b){
return Promise.resolve(a+b)
}
async function addUp(arr){
let total=0
// let res=await addUp(total,arr[0])
for(let i=0;i<arr.length;i++){
total=await add(total,arr[i])
console.log(total);
}
return total
}
console.log(addUp([1,2,3,4]).then((value)=>{console.log(value);}));
本文深入探讨了Vue中v-for指令使用:key的重要性及其原理,并解释为何不能使用数组索引作为key;分析了0.1+0.2!==0.3的原因及解决方法;对比了虚拟DOM与真实DOM的操作效率;提供了生成1000个不重复六位验证码的方法;最后展示了如何使用Promise实现数组元素的累加。
1549





