• 由于不同浏览器,不同版本性能不一,且控制台本质是是套用了一大堆eval,沙盒化程度高,所以需使用node环境测试来提高准确性

// 准备待测数组
const NUM = 1e7;
let arr = new Array(NUM).fill(1);
// for 测试
let arr1 =[];
console.time('for');
for (let i = 0; i < arr.length; i++) {
arr1.push(arr[i])
} console.timeEnd('for'); // Chrome/75.0.3770.100 Safari/537.36 环境
//VM1324:10 for: 576.733154296875ms // node v10.11.0 环境
// for: 412.087ms

for 几种写法

  • 常规写法
let arr1 = []
console.time('one')
for (let i = 0; i < arr.length; i++ ){
arr1.push(arr[i])
}
console.timeEnd('one')

数组长度是会动态变化,每次循环会重新计算length长度,可能会出现死循环

  • cache arr.length
for (let i = 0, len = arr.length; i < len; i++ ){
arr1.push(arr[i])
}

缓存length 值,无需重新计算length

  • 倒序
for (let i = arr.length-1; i >= 0; i--){
arr1.push(arr[i])
}

比第二种方法更简洁

  • 倒叙简洁版
for (let i = arr.length-1; i--;){
arr1.push(arr[i])
}

两个分号之间的表达式为 true 会一直执行直到 判断为 false (i = 0)

  • 正序简洁版
for (let i = 0, len;len = arr[i++]; ){
arr1.push(arr[i])
}

当 i 大于等于数组长度或arr[i++]值为false时 将停指循环,同时由于arr.length动态变化时可能会造成死循环

for...of

for (let value of arr){
arr1.push(value)
}

es6推出的迭代器,最简洁,可以是用 break,continue和return 终止循环

for...in

for (let key in arr){
arr1.push(arr[key])
}

for...in 一般用于遍历对象,他会将本身属性和原型链上的属性(除系统内置属性)全部遍历出来即便是不可枚举属性(enumerable:false), 可以通过 items.hasOwnProperty来遍历本身属性,由于查询到自己的原型链上,所以性能方面比较差

forEach

arr.forEach(function(value){
arr1.push(value)
})

数组的迭代方法,没有返回值

map

arr.map(function(value){
return arr1.push(value)
})

浅拷贝原数组,并且返回一个新数组

性能测试

测试次数 常规for cache for 倒序 for 倒叙简版 for 正序简版 for for..of for..in forEach map
1 542.121ms 573.618ms 764.181ms 755.961ms 571.464ms 945.199ms 4077.020ms 625.859ms 3573.946ms
2 430.008ms 541.933ms 524.474ms 668.276ms 553.475ms 897.442ms 4402.246ms 605.271ms 2732.859ms
3 409.531ms 661.765ms 534.167ms 655.481ms 600.939ms 1141.093ms 3806.704ms 584.712ms 2779.192ms
4 412.972ms 643.868ms 536.026ms 674.081ms 725.149ms 930.655ms 3201.387ms 599.780ms 3152.499ms
5 417.034ms 624.323ms 520.674ms 799.568ms 574.713ms 943.449ms 3261.512ms 587.182ms 2954.195ms
6 525.771ms 955.737ms 526.208ms 771.443ms 531.962ms 954.199ms 4351.009ms 608.264ms 2888.752ms
7 498.039ms 602.703ms 555.588ms 531.464ms 541.599ms 916.678ms 3264.334ms 596.168ms 2834.663ms
8 431.694ms 523.381ms 544.974ms 527.472ms 517.833ms 1049.283ms 3744.972ms 600.286ms 3467.499ms
9 417.521ms 518.093ms 547.404ms 611.024ms 594.503ms 767.059ms 4979.348ms 601.420ms 3638.023ms
10 424.806ms 557.961ms 535.541ms 837.561ms 541.882ms 772.686ms 3284.424ms 602.443ms 3599.642ms
11 409.402ms 521.131ms 534.265ms 517.709ms 551.397ms 752.101ms 3228.123ms 629.625ms 3535.545ms
12 425.362ms 532.882ms 406.637ms 522.287ms 570.259ms 914.135ms 3449.256ms 800.857ms 3429.123ms
平均值 439.2738ms 578.3565ms 553.1468ms 651.7057ms 507.8718ms 909.0785ms 3,686.9 6ms 605.6298ms 3,221.5056ms
堆值差 357245536Byte 357245808Byte 357245624Byte 357245872Byte 357246824Byte 199268080Byte 757187208Byte 357244456Byte 43724764Byte

测试总结

  1. 运行效率: 常规for > 正序简版 for > 倒序 for > cache for > 倒叙简版 for > forEach > for..of > map > for..in
  2. 几种普通 for 循环占用内存相差不大, 而 for..of 占用运行内存最小
  3. for..in 性能最差,内存占用高,速度很慢

JavaScript for 、for...of 、for...in 等 iteration 效率测试的更多相关文章

  1. JavaScript的个人学习随手记(一)

    JavaScript 简介  要学习的人可以到W3School http://www.w3school.com.cn/b.asp JavaScript 是世界上最流行的编程语言. 这门语言可用于 HT ...

  2. 100个直接可以拿来用的JavaScript实用功能代码片段

    目录如下: 1.原生JavaScript实现字符串长度截取2.原生JavaScript获取域名主机3.原生JavaScript清除空格4.原生JavaScript替换全部5.原生JavaScript转 ...

  3. 十大免费教程资源帮助新手快速学习JavaScript

    “JavaScript”的名头相信大家肯定是耳熟能详,但只有一小部分人群了解它的使用与应用程序构建方式.这“一小部分”人指的当然是技术过硬的有为青年.网络程序员以及IT专业人员.但对于一位新手或者说外 ...

  4. Javascript之高效编程

    前言: Javascript绝对是最火的编程语言之一,一直具有很大的用户群,具有广泛的应用前景.而在前端开发中,它也是三驾马车之一,并且是最重要的一环.要想给用户提供更流畅的操作体验,更友好的交互,对 ...

  5. 用JavaScript往DIV动态添加内容

    参考:http://zhidao.baidu.com/link?url=6jSchyqPiEYCBoKdOmv52YHz9r7MTBms2pK1N6ptOX1kaR2eg320mlW1Sr6n36hp ...

  6. 前端之JavaScript第一天学习(1)-JavaScript 简介

    javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...

  7. javascript 高效按字节截取字符串

    做为一个前端开发人员在网页展示中经常会碰到,标题过长,需要截取字符串,用CSS的实现的话各种兼容问题,各种坑. 让后台程序截一下,又各种推托,让后台按字节截一下更是和要了后台老命一样,最后可能只会安字 ...

  8. 100个直接可以拿来用的JavaScript实用功能代码片段(转载)

    把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率. 目录如下: 1.原生JavaScript实现字符串长度截取2.原生JavaS ...

  9. 【JavsScript】JavaScript MVC 框架技术选型

    你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...

随机推荐

  1. 17.JAVA-Dom、Sax解析XML详解

    在JAVA中,解析有三种方式: Dom解析(支持改删,耗内存). Sax解析(不支持改删,不耗内存). Pull解析(在Android中推荐使用的一种解析XML的方式,在下章学习). 1.支持Dom与 ...

  2. 洛谷 题解 P1351 【联合权值】

    Problem P1351 [联合权值] record 用时: 99ms 空间: 13068KB(12.76MB) 代码长度: 3.96KB 提交记录: R9883701 注: 使用了 o1 优化 o ...

  3. 正则去掉html标签之间的空格、换行符、tab符,但是保留html标签内部的属性空格

    今天遇到一个比较少见的去空格: 正则去掉html标签之间的空格.换行符.tab符,但是保留html标签内部的属性空格 JS 举例: "<a href='baidu.com' name= ...

  4. vs里 .sln和.suo 文件 Visual Studio里*.sln和*.suo文件的作用

    Visual Studio里*.sln和*.suo文件的作用      VS项目采用两种文件类型(.sln   和   .suo)来存储特定于解决方案的设置.这些文件总称为解决方案文件,为解决方案资源 ...

  5. 贝壳2020——Java校招笔试题

    算法题4道: 题目描述: 给出n个正整数,要求找出相邻两个数字中差的绝对值最小的一对数字,如果有差的绝对值相同的,则输出最前面的一对数.(2<n<=100,正整数都在10^16范围内) 输 ...

  6. rails 创建项目、创建controller、model等

    rails2之前创建新项目: rails3以及更高版本创建新项目:rails new webname 创建数据表model:rails g model user name:string sex:str ...

  7. firefox浏览器写xpath

    最近在学xpath发现Firefox浏览器不支持xpath定位页面元素 百度为例: F12 页面前端代码  输入最简单的xpath发现并不能定位元素 解决方案:添加 Try Xpath 这个插件,因为 ...

  8. JS中forEach和map的区别

    共同点: 1.都是循环遍历数组中的每一项. 2.forEach()和map()里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中 ...

  9. [从今天开始修炼数据结构]图的最短路径 —— 迪杰斯特拉算法和弗洛伊德算法的详解与Java实现

    在网图和非网图中,最短路径的含义不同.非网图中边上没有权值,所谓的最短路径,其实就是两顶点之间经过的边数最少的路径:而对于网图来说,最短路径,是指两顶点之间经过的边上权值之和最少的路径,我们称路径上第 ...

  10. webpack学习3.1由浅入深-打包JS

    打包JS Step1:在新建的文件夹下新建一个sum.js文件,一个app.js文件 sum.js //es module export default function(a,b){ return a ...