歹佬们,问个 js 小问题?

2022 年 1 月 25 日
 gaocc

在 vue2 框架里看到这样一段代码,有个细节没看懂

function getTypeIndex (type, expectedTypes): number {
  if (!Array.isArray(expectedTypes)) {
    return isSameType(expectedTypes, type) ? 0 : -1
  }
  for (let i = 0, len = expectedTypes.length; i < len; i++) {
    if (isSameType(expectedTypes[i], type)) {
      return i
    }
  }
  return -1
}

for (let i = 0, len = expectedTypes.length; i < len; i++)

这行代码框架里是这样的

for (let i = 0; i < expectedTypes.length; i++)

一般习惯是这样的

框架这种写法有什么好处吗?

2032 次点击
所在节点    问与答
9 条回复
clcx
2022 年 1 月 25 日
上满减少了计算次数,中间的比较语句只需要和一个固定值比较;
下面每次都要先计算数组长度,再进行比较
gaocc
2022 年 1 月 25 日
@clcx 哦哦对哦,一下没反应过来。thanks
kop1989smurf
2022 年 1 月 25 日
同意楼上。
拆开就能看出区别了,一个是:if(i<30),一个是 if(i<xx.length)
循环 n 次,下面就多获取了 n-1 次数组的长度。
murmur
2022 年 1 月 25 日
我刚才搜了一下,对于新浏览器没区别的,你知道缓存,浏览器也不是傻子,大多数场景下你感觉不出这个优化,还是要靠不要频繁操作 dom 来获取性能
sgiyy
2022 年 1 月 25 日
一般是作为性能优化的手段,用变量缓存后面重复调用的数据。涉及不同的场景,实际效果可能还不一样。
也可以看下这个讨论: https://www.zhihu.com/question/29714976
murmur
2022 年 1 月 25 日
https://stackoverflow.com/questions/9592241/javascript-is-the-length-method-efficient

Iterating over a thousand items, using array.length will only cost you an extra 2 ms. In other words: beware premature optimization.

1000 词循环只多不到 2ms ,换句话说,不要过度优化
gaocc
2022 年 1 月 25 日
gaocc
2022 年 1 月 25 日
看了下,性能问题没大区别。就凸显一个代码习惯和角度问题吧
我以后应该都是这样方式了 for (let i = 0, len = expectedTypes.length; i < len; i++)
jawilx
2022 年 1 月 25 日
就一个习惯问题吧,现在浏览器已经优化的很好了,没必要搞很复杂

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/830516

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX