javascript 数组遍历,几种循环方式的比较。

通常我们会用循环的方式来遍历数组。但是循环是 js 性能问题的诱因之一。所以有时候我们不得不在使用循环的方式上略加斟酌。一般我们有以下几种方式来进行数组的遍历:

方式1:

for in 循环:

  var array = [1,2,3,4,5];

  for( var val in array ){

    fn(val);

  }

方式2:

  for (var i=0; i<array.length; i++){

    fn(array[i]);

  }

这两种方法应该非常常见且使用很频繁。但实际上,这两种方法都存在性能问题。

在方式一中,for-in 需要分析出array 的每个属性,这个操作性能开销很大。用在 key 已知的数组上是非常不划算的。所以尽量不要用 for-in,除非你不清楚要处理哪些属性,例如 JSON 对象这样的情况。

在方式2中,循环每进行一次,就要检查一下数组长度。读取属性(数组长度)要比读局部变量慢,尤其是当 array 里存放的都是 DOM 元素,因为每次读取都会扫描一遍页面上的选择器相关元素,速度会大大降低。

所以这时候我们就有必要对方式2进行优化。

加速的 :

var array = [1,2,3,4,5];

var length = array.length;

for(var i=0; i<length; i++){

  fn(array[i]);

}

现在只需要读取一次 array 的 length 属性,速度已经加快了。但是还能不能更快呢?

事实是,如果循环终止条件不进行比较运算,那么循环的速度还可以更快。

加速且优雅的:

var array = [1,2,3,4,5];

var i = array.length;

while(i--){

  fn(arr[i]);

}

其实还有方式3:

for each:

var array = [1,2,3,4,5];

array.forEach(

  fn(e){

    //Do sth with e ;

  }

)

先写这么多,晚上工头查进度,得先干活儿了~

时间: 2024-10-06 00:16:42

javascript 数组遍历,几种循环方式的比较。的相关文章

Java Array数组 遍历 四种方式(包含 Lambda 表达式遍历)

package com.hello; import java.util.Arrays; /** * @Author Miracle Luna * @Date 2019/6/9 23:33 * @Version 1.0 */public class ArrayLambda { public static void main(String[] args) { Integer[] items = { 1, 2, 3 }; // 普通for循环遍历 System.out.println("第一种方式:普

数组的三种声明方式总结、多维数组的遍历、Arrays类的常用方法总结

1. 数组的三种声明方式 public class WhatEver { public static void main(String[] args) { //第一种 例: String[] test1 = new String[6]; test1[0] = "数组0"; test1[1] = "数组1"; //第二种 例: String[] test2 = {"数组0","数组1","数组2","

Javascript数组的5种迭代方法

#Javascript数组的5种迭代方法 数组当中定义了5个迭代方法,传入这些方法中的函数会接受三个参数,数组项的值,该项在数组的位置,和数组对象本身,以下是5个迭代方法的作用. 1.every方法: 对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true. let arr1 = [1,2,3,4,5,6]; let arr2 = [-1,-2,-3,-4,-5,-6]; let every1 = arr1.every((item,index,arr)=>{ return

1、打印二进制机器码,程序内存分析,大端序小端序,指针数组,数组指针,数组的三种访问方式,typedef,#if-0-#endif,求数组大小,括号表达式

 1.打印二进制机器码(分别表示32位的和64位的) #include <stdio.h> /*按照8位的长度打印一个数值*/ void dis8bit(char val) { int bit = 8; while(bit--) { if(1<<bit&val){ printf("1"); } else { printf("0"); } if(!(bit%4)) printf(" "); } putchar(1

数组的三种定义方式

// 数组的三种定义方式 var arr = ['zhangsan','lisi','wangwu']; var arr1 = new Array('zhangsan','lisi','wangwu'); var arr2 = new Array(3); arr2[0] = 'zhangsan'; //注意:下标一定要写,不像在php中,下标是可以不写,是一直追加 // console.log(arr2); // 说明:js中,没有关联数组一说,数组下标都是数字 // 如果一个数组的下标是自定义

【学习笔记】——原生js中常用的四种循环方式

一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出"欢迎下次光临" 在网页中弹出框输入1   网页输出"查询中--" 在网页中弹出框输入2   网页输出"取款中--" 在网页中弹出框输入3   网页输出"转账进行中--" 在网页中弹出框输入其他字符   网页输出"无效按键" 四种循环: for循环 while循环 for  in

一维数组的两种访问方式

一维数组指针,int *prt=new int[10],*ptr和ptr[0]是一样的吗? 通过下面代码测试: int * array = new int[10]; for(int i=0;i<10;i++) { array[i] = i; } for(int i=0;i<10;i++) { cout<<*(array+i)<<endl; } 所以数组可以用 array[i]和 *(array+i)两种方式访问. 一维数组的两种访问方式

JavaScript 数组遍历方法的对比

前言 JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 代码: var arr = [1,2,4,6] for(var i = 0, len = arr.length; i < len; i++){ console.log(arr[i]) } 复制代码 这是标准for循环的写法也是最传统的语句,字符串也支持,定义一个变量i作为索引,以跟踪访问的位置,len是数组的长度

JavaScript数组去重6种方法

数组去重涉及基础知识较多,总结了以下6个方法: 双重for循环,push新数组: 双重for循环,splice原数组: 单个for循环,遍历对象属性: 单个for循环,sort排序后遍历: ES5,indexOf,定位去重: ES6,... 及set方法. 1.双层循环,若有相同的值则跳过,不相同则push进新数组 1 Array.prototype.distinct1 = function(){ 2 var arr = this, 3 i,j, 4 len = arr.length, 5 re

JavaScript数组遍历map()的原型扩展

在 JavaScript 1.6 里,javascript 数组增加了几个非常有用的方法:indexOf.lastIndexOf.every. filter. forEach. map. some,其中前两个可以归为元素定位方法,而后面的几个则可以归为迭代(iterative)方法. 遗憾的是:这些新方法并非所有浏览器都支持,在这种情况下,我们就需要自己动手了,在这些介绍的文章中,我们同时提供了在不支持这些新特性的浏览器中的实现方法. 原生方法如下: 1 var mappedArray = ar