js数组遍历和对象遍历

针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等

JS数组遍历:

1,普通for循环,经常用的数组遍历

var arr = [1,2,0,3,9,10,20,30];
for ( var i = 0; i <arr.length; i++){
console.log(arr[i]);
}

2,优化版for循环:使用变量,将长度缓存起来,避免重复获取长度,数组不多的时候和普通for循环一样,数组很大时优化效果明显

var arr=[1,2,3,4,5,10,20,30];
for(var i=0,len=arr.length;i<len;i++){
console.log(arr[i]); }

3, 使用for in方法 进行遍历数组

  var arr = [1,2,3,10,15];
for(var index in arr){
// console.log(index);
console.log(index,arr[index]);
  } //所以数组的遍历中千万不要用for in,我们一般对对象的遍历使用。同时上面的i变量是string,并不是number

4, 使用for of 方法进行遍历数组,常用for of  性能比较好


var arr=[1,2,6,5,8];
for(var value of arr){
//console.log(value);//打印出来是值
console.log(arr); //打出来是一个数组
}

5, 使用forEach方法 ES5推出来的 数组自带循环,主要功能遍历数组,性能不好

   var arr=[,,,,];
var forEach= arr.forEach(function(value,index){ // 第一参数是值,第二个参数是索引
console.log('forEach数组:'+index+"--"+value);
});
    console.log(forEach); // undefined
// forEach循环的缺点就是,你不能使用break语句中断循环,也不能使用retrun返回到外层函数

6, 使用map方法遍历数组,和forEach使用方式以及语法一样,但是性能比forEach好很多,推荐使用

 var arr=[1,2,6,5,8];
var arr=[1,2,6,5,8];var dd= arr.map(function(value,index){// 第一参数是值,第二个参数是索引
      console.log('map数组:'+index+"--"+value);
      retrun value*2;
});
console.log(dd);
注意:map遍历数组方式支持retrun,并且返回一个新的数组。

JS对象遍历:

1.for in 来遍历对象

  var object={
name:"张三",
age:18,
sex:"男",
sing:function(){
console.log(this.name+":"+"八九不离十");
}
};
for(var key in object ){
console.log(key); //打印出来是属性名字
console.log(object);// 打印出来是对象
//console.log(key,object.sing());
}

jQuery遍历数组和对象:

1.each遍历数组

 var arr=["a","b","c","d","e"];
$.each(arr,function(key,item){
console.log(item[0]);//是值
 console.log(key);//是索引
console.log("arr:"+key+"--"+item);
});

2.each遍历对象

var obj = { one:1, two:2, three:3, four:4};
$.each(obj,function(key,value){
console.log("obj:"+key+"--"+value);
});
//结果:

     obj:one--1
    obj:two--2
    obj:three--3
    obj:four--4

 

JavaScript中遍历数组和对象的方法的更多相关文章

  1. javaScript中Math内置对象基本方法入门

    概念 Math 是javaScript的内置对象,包含了部分数学常数属性和数学函数方法. Math 不是一个函数对象,用户Number类型进行使用,不支持BigInt. Math 的所有属性与方法都是 ...

  2. JavaScript中,数组和对象的遍历方法总结

    循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现. 这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识. 数组遍历 方法一:for 循环 for 循环是使 ...

  3. Javascript中遍历数组方法的性能对比

    Javascript中常见的遍历数组的方法 1.for循环 for(var i = 0; i < arr.length; i++) { // do something. } 2.for循环的改进 ...

  4. javascript 中遍历数组的简单方法

    在Javascript中有自带方便遍历数组的方法(此方法非彼方法不要误会哦): 1 .利用for( index in array ){}; 2.利用 array.forEach( function(e ...

  5. vue遍历数组和对象的方法以及他们之间的区别

    前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组   1,使用vue数组变异方法 pop() 删除数组最后一 ...

  6. JS中遍历数组、对象的方式

    1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...

  7. JavaScript中的数组和对象 增删遍

    由于 JavaScript 的语言特性,我们可以向通用对象动态添加和删除属性.所以 Object 也可以看成是 JS 的一种特殊的集合. 虽然这个集合的 key 只能是 String 类型,不像 Ja ...

  8. JavaScript中遍历数组 最好不要使用 for in 遍历

    先看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. JavaScript中遍历数组,最好不要用for...in

    先看一段代码 var arr = [2,3,4,5]; for(var i = 0; i < arr.length; i++){ console.log(i,"类型:"+ty ...

随机推荐

  1. Deep Reinforcement Learning: Pong from Pixels

    这是一篇迟来很久的关于增强学习(Reinforcement Learning, RL)博文.增强学习最近非常火!你一定有所了解,现在的计算机能不但能够被全自动地训练去玩儿ATARI(译注:一种游戏机) ...

  2. Session会话保持机制的原理与Tomcat Session共享的几种实现方式(Session Cluster、memcached+MSM)

    一.Session的定义 在计算机科学中,特别是在网络中,session是两个或更多个通信设备之间或计算机和用户之间的临时和交互式信息交换.session在某个时间点建立,然后在之后的某一时间点拆除. ...

  3. 【测试记录】EF插入查询性能

    介绍     背景什么就不提了,无外乎出现了大数据需要处理.简单的说就是我测试了EF正常的插入以及一个优化小方式而已,然后做了查询记录.其余没有什么,写这篇只是为了记录结果方便以后数据参考吧. 代码介 ...

  4. ServiceFramework作为Java Web框架都有哪些不错的设计

    前言 最近需要开发一个纯API的项目,mlsql-cluster,从无到有,到最后完整的proxy功能开发完毕,只花了四个小时不到,自己不尽小感叹了一把 ServiceFramework的高效. 关于 ...

  5. Java集合框架——容器的快速报错机制 fail-fast 是什么?

    前言:最近看 java 集合方面的源码,了解到集合使用了 fail-fast 的机制,这里就记录一下这个机制是什么,有什么用,如何实现的. 一.fail-fast 简介 fail-fast 机制,即快 ...

  6. APP接口调用流程

  7. 微信小程序下拉框之二维数组或对象

    在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的值.像我项目中,需要获取到的是它对应的Id,那么我们如何通过它的这个下标值返回你想要的值呢? 通过picker返回的索引值,去获取匹配你想获 ...

  8. 使用CSS如何解决inline-block元素的空白间距

    早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...

  9. Windows下 webpack4.0 的安装

    这里我们通过npm来进行安装 1. 安装 webpack // 全局安装webpack npm install webpack -g 2. 通过 webpack -v 命令查看当前安装的版本 此时如果 ...

  10. C# 6 元组应用 Part 2:C# 也玩模式匹配

    C# 7给我们带来了一个半吊子的 switch 语句模式匹配,只能简单的匹配类型而已,完全没有什么用处.这里我提供个更好的简单实现,用 C# 6 的 ValueTuple 模拟函数式语言的模式匹配功能 ...