先上代码:
for (let i = 0, j = handlers.length; i < j; i++) {
invokeWithErrorHandling(handlers[i], vm, null, vm, info)
}
// =>
// for (let i = 0; i < handlers.length; i++) {
// invokeWithErrorHandling(handlers[i], vm, null, vm, info)
// }
vue源码中for循环的代码,为什么会有循环,先定义循环的长度之后在进行比较??
带着问题去解决,验证问题回归。
此两份代码有什么去区别吗,那就让我门来验证一下。
首先相当的是我的猜想:提升性能,能够在循环的过程中不用每次都去寻找,数组的.length属性能直接使用定义的变量数字进行使用能够更快。
下面开始代码验证:
先定义来两个函数:
forFn: function(arr) {
//函数内容相同就是相互对比的两个函数
let a=[]
for(let i=0,j =arr.length; i<j; i++){
a.push(arr[i])
}
},
forLengthFn: function(arr) {
let a=[]
for(let i=0;i<arr.length; i++){
a.push(arr[i])
}
}
mounted(){
//就是多重结果判定数组
let resultArr=[];
//进行了一次数据的统计
for(let j=0;j<10;j++){
// 验证源码中是否有什么影响的作用
//数组中值的多少
for(i=0;i<1000000;i++){
this.arr.push(i)
}
// 时间戳是用来监视函数的执行时间
//forFn函数的开始时间
let timeNolengthstart = Date.now();
//函数的执行
this.forFn(this.arr);
//forFn函数的结束时间
let timeNolengtent=Date.now()
//时间戳的比较
let forFnTime = timeNolengtent-timeNolengthstart
//差值就是所谓的函数执行时间
// console.log(forFnTime)
let timeStart = Date.now();
//更换执行函数
this.forLengthFn(this.arr);
let timeEnt=Date.now()
let forLengthFnTime = timeEnt-timeStart;
//函数中两个函数执行时间的差值
resultArr.push(forLengthFnTime-forFnTime)
// console.log(forLengthFnTime)
console.log(forLengthFnTime-forFnTime)
}
//数组中的多少次验证是,定义i,j两个变量值,比未定义的完成时间快
console.log(resultArr.filter(item => item>=0).length)
},
此方法整体思路就是根据时间戳的方式,验证函数的执行时间,通过多次统计来完成,验证自己的猜想。 方法视频讲解