JavaScript循环语句的性能问题

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

在大部分编程语言中, 循环语句消耗了大部分时间
而循环语句又是十分重要的编程模式

在我们JavaScript中, 有四种循环类型

for循环
while循环
do-while循环
for-in循环

其中前三种循环在其他语言也很常见
for-in循环对于在学校学过C/C++的同学来说也许很新鲜
它每次迭代的同时会搜索实例和原型属性, 所以它每次迭代便会产生更多的开销
for-in循环最终只有其他三种类型速度的1/7
所以, 除非我们明确需要迭代一个属性数量未知的对象, 否则我们应尽量避免使用for-in
更不要用for-in循环去遍历数组

我们可以这样去迭代一个明确的对象

var props = ['prop1', 'prop2'],i = 0;
while(i < props.length){fn(obj[props[i++]]);
}

这段代码根据对象中的属性, 创建一个对象属性的数组, 然后通过while循环来遍历属性列表并处理对应属性值
这样就可以不用查找对象的每一个属性, 减少了循环的开销

上面做法的前提是对象内部的属性是已知的
如果我们不知道对象内部的实现
还要处理对象自身的属性，只能这样做了

for(var prop in obj){if(obj.hasOwnProperty(prop)){//...}
}

代价是每次迭代都要判断这个属性是不是对象自己的属性而不是继承来的

除了for-in以外, 其他的循环性能都差不多, 所以使用的时候应该去考虑需求从而选择循环类型

相信刚学习编程的小伙伴都是介样写循环的

for(var i = 0; i < arr.length; i++){fn(arr[i]);
}

这个循环语句每进行一次迭代, 都要去查找arr中的length属性,这样很耗时
所以我们可以进行优化,

for(var i = 0, len = arr.length; i < len; i++){fn(arr[i]);
}

把数组长度值缓存到一个局部变量, 这样问题就解决了
while, do-while也是同理
根据数组长度, 很多浏览器中能节省大概25%的运行时间

我们还可以通过颠倒数组顺序来略微提高性能

for(var i = items.length; i--;){process(items[i]);
}

var j = items.length;
while(j--){process(items[j]);
}

var k = items.length - 1;
do {process(items[k]);
}while(k--);

这样做每次迭代控制条件从两次判断(迭代数是否小于总数, 是否为true)
减少为一次判断(是否为true), 进一步提高了循环速度

最后补充几句
我们大家可能都用过一些数组方法比如arr.forEach()或者一些框架的迭代方法比如jQuery的$().each()去遍历数组,
这些方法对数组的每一个元素执行一个函数
尽管它们很方便, 但它们要比普通的循环要慢很多(调用了外部的方法)
在所有情况下, 基于循环的迭代比基于函数的迭代快大约8倍
所以我们在能使用普通循环（for，while，do-while）解决问题的时候尽量用这些普通循环

主页传送门

JavaScript循环语句的性能问题相关推荐

javascript 循环语句 while、do-while、for-in、for用法区别
本文章介绍了在学习javascript中的循环语句的用法,包while.do-while.for-in.for它们之间的区别,也是常用的循环语句了,有需要的朋友可以了解一下前两个唯一的差别就是循环和 ...
javascript循环语句及函数
循环语句 1.While 语法: while (exp) { //statements; } 说明: while (变量<=结束值) { 需执行的代码 } 例1: var i = 1; whil ...
网络应用之javascript循环语句
循环语句学习目标能够写出2种循环语句 1. 循环语句的介绍循环语句就是让一部分代码重复执行,javascript中常用的循环语句有: for while do-while 2. for循环 va ...
JavaScript循环语句for，while，与break，continue配合案例详解
目录 for循环语法: for循环案例 1.简单的for循环 2.使用for循环打印星星 3.使用for循环打印等腰三角形 4.倒三角,与拼成菱形 5.输出1000以内的水仙花数 6.输出九九乘法表 ...
JavaScript 循环语句
循环语句主要用于执行重复的某个操作 while 循环语句 while(bool){ // bool为true,则会循环(执行)代码块的语句.执行完成一次后就回到while判断bool,一直重复下去 ...
JavaScript循环语句
目录 1.do-while 2.while语句 3.for语句 4.for循环与while循环的关系 5.break 和 continue 6.双层for循环 7.案例集合 1.案列: 打印五行五列 ...
JavaScript循环语句（二）
for嵌套嵌套当循环与循环发生嵌套时遵循下列规则: 外层为假时,内层不执行先执行外层,再执行内层,直至内层的条件为假时再返回外层去执行选择练习1 下列关于循环嵌套,说法错误的是?(选择一项) ...
你可能不知道的java、python、JavaScript以及jquary循环语句的区别
一.概述 java循环语句分为四种形式,分别是 while, do/while, for, foreach: python中循环语句有两种,while,for: JavaScript中循环语句有四种, ...
Javascript中的条件语句和循环语句
Javascript条件语句有以下几种: 单项条件结构 (if条件语句) 双向条件结构 (if...else条件语句) 多项条件结构 (switch条件语句) If条件语句的语法如下: if (exp ...

JavaScript循环语句的性能问题

JavaScript循环语句的性能问题相关推荐

最新文章

热门文章