JavaScript for 、for...of 、for...in 等 iteration 效率测试
// 准备待测数组
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 |
测试总结
- 运行效率:
常规for
>正序简版 for
>倒序 for
>cache for
>倒叙简版 for
>forEach
>for..of
>map
>for..in
- 几种普通 for 循环占用内存相差不大, 而
for..of
占用运行内存最小 for..in
性能最差,内存占用高,速度很慢
JavaScript for 、for...of 、for...in 等 iteration 效率测试的更多相关文章
- JavaScript的个人学习随手记(一)
JavaScript 简介 要学习的人可以到W3School http://www.w3school.com.cn/b.asp JavaScript 是世界上最流行的编程语言. 这门语言可用于 HT ...
- 100个直接可以拿来用的JavaScript实用功能代码片段
目录如下: 1.原生JavaScript实现字符串长度截取2.原生JavaScript获取域名主机3.原生JavaScript清除空格4.原生JavaScript替换全部5.原生JavaScript转 ...
- 十大免费教程资源帮助新手快速学习JavaScript
“JavaScript”的名头相信大家肯定是耳熟能详,但只有一小部分人群了解它的使用与应用程序构建方式.这“一小部分”人指的当然是技术过硬的有为青年.网络程序员以及IT专业人员.但对于一位新手或者说外 ...
- Javascript之高效编程
前言: Javascript绝对是最火的编程语言之一,一直具有很大的用户群,具有广泛的应用前景.而在前端开发中,它也是三驾马车之一,并且是最重要的一环.要想给用户提供更流畅的操作体验,更友好的交互,对 ...
- 用JavaScript往DIV动态添加内容
参考:http://zhidao.baidu.com/link?url=6jSchyqPiEYCBoKdOmv52YHz9r7MTBms2pK1N6ptOX1kaR2eg320mlW1Sr6n36hp ...
- 前端之JavaScript第一天学习(1)-JavaScript 简介
javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...
- javascript 高效按字节截取字符串
做为一个前端开发人员在网页展示中经常会碰到,标题过长,需要截取字符串,用CSS的实现的话各种兼容问题,各种坑. 让后台程序截一下,又各种推托,让后台按字节截一下更是和要了后台老命一样,最后可能只会安字 ...
- 100个直接可以拿来用的JavaScript实用功能代码片段(转载)
把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率. 目录如下: 1.原生JavaScript实现字符串长度截取2.原生JavaS ...
- 【JavsScript】JavaScript MVC 框架技术选型
你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...
随机推荐
- 17.JAVA-Dom、Sax解析XML详解
在JAVA中,解析有三种方式: Dom解析(支持改删,耗内存). Sax解析(不支持改删,不耗内存). Pull解析(在Android中推荐使用的一种解析XML的方式,在下章学习). 1.支持Dom与 ...
- 洛谷 题解 P1351 【联合权值】
Problem P1351 [联合权值] record 用时: 99ms 空间: 13068KB(12.76MB) 代码长度: 3.96KB 提交记录: R9883701 注: 使用了 o1 优化 o ...
- 正则去掉html标签之间的空格、换行符、tab符,但是保留html标签内部的属性空格
今天遇到一个比较少见的去空格: 正则去掉html标签之间的空格.换行符.tab符,但是保留html标签内部的属性空格 JS 举例: "<a href='baidu.com' name= ...
- vs里 .sln和.suo 文件 Visual Studio里*.sln和*.suo文件的作用
Visual Studio里*.sln和*.suo文件的作用 VS项目采用两种文件类型(.sln 和 .suo)来存储特定于解决方案的设置.这些文件总称为解决方案文件,为解决方案资源 ...
- 贝壳2020——Java校招笔试题
算法题4道: 题目描述: 给出n个正整数,要求找出相邻两个数字中差的绝对值最小的一对数字,如果有差的绝对值相同的,则输出最前面的一对数.(2<n<=100,正整数都在10^16范围内) 输 ...
- rails 创建项目、创建controller、model等
rails2之前创建新项目: rails3以及更高版本创建新项目:rails new webname 创建数据表model:rails g model user name:string sex:str ...
- firefox浏览器写xpath
最近在学xpath发现Firefox浏览器不支持xpath定位页面元素 百度为例: F12 页面前端代码 输入最简单的xpath发现并不能定位元素 解决方案:添加 Try Xpath 这个插件,因为 ...
- JS中forEach和map的区别
共同点: 1.都是循环遍历数组中的每一项. 2.forEach()和map()里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中 ...
- [从今天开始修炼数据结构]图的最短路径 —— 迪杰斯特拉算法和弗洛伊德算法的详解与Java实现
在网图和非网图中,最短路径的含义不同.非网图中边上没有权值,所谓的最短路径,其实就是两顶点之间经过的边数最少的路径:而对于网图来说,最短路径,是指两顶点之间经过的边上权值之和最少的路径,我们称路径上第 ...
- webpack学习3.1由浅入深-打包JS
打包JS Step1:在新建的文件夹下新建一个sum.js文件,一个app.js文件 sum.js //es module export default function(a,b){ return a ...