JavaScript中遍历数组和对象的方法
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中遍历数组和对象的方法的更多相关文章
- javaScript中Math内置对象基本方法入门
概念 Math 是javaScript的内置对象,包含了部分数学常数属性和数学函数方法. Math 不是一个函数对象,用户Number类型进行使用,不支持BigInt. Math 的所有属性与方法都是 ...
- JavaScript中,数组和对象的遍历方法总结
循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现. 这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识. 数组遍历 方法一:for 循环 for 循环是使 ...
- Javascript中遍历数组方法的性能对比
Javascript中常见的遍历数组的方法 1.for循环 for(var i = 0; i < arr.length; i++) { // do something. } 2.for循环的改进 ...
- javascript 中遍历数组的简单方法
在Javascript中有自带方便遍历数组的方法(此方法非彼方法不要误会哦): 1 .利用for( index in array ){}; 2.利用 array.forEach( function(e ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
- JS中遍历数组、对象的方式
1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...
- JavaScript中的数组和对象 增删遍
由于 JavaScript 的语言特性,我们可以向通用对象动态添加和删除属性.所以 Object 也可以看成是 JS 的一种特殊的集合. 虽然这个集合的 key 只能是 String 类型,不像 Ja ...
- JavaScript中遍历数组 最好不要使用 for in 遍历
先看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JavaScript中遍历数组,最好不要用for...in
先看一段代码 var arr = [2,3,4,5]; for(var i = 0; i < arr.length; i++){ console.log(i,"类型:"+ty ...
随机推荐
- leetcode — median-of-two-sorted-arrays
import java.util.HashSet; import java.util.Set; /** * Source : https://oj.leetcode.com/problems/long ...
- 【Flask-RESTPlus系列】Flask-RESTPlus系列译文开篇
0x00 背景介绍 因为工作上的需要,最近开始研究Python中实现Restful API的框架和工具包.之前粗略学习过Flask,由于它比较轻量级,感觉用它来实现Restful API再适合不过了. ...
- SQL Where in (1,2,3,4) 换成字段一列的值
) ; , ) ) FROM r_resource WHERE id IN ( @resource) 换成 ) : , ) ) FROM r_resource )) SELECT cid,id FRO ...
- AngularJS+Ionic开发-1.搭建开发环境
临时项目需要使用AngularJS+Ionic+Cordova技术,半年前跟别人用过一段时间做过几个页面,目前别人已经无法联系了,只能我自己上了. 上次做完项目后,想抽时间好好巩固一下这方面的知识面来 ...
- org.apache.catalina.LifecycleException错误解决方案
1.org.apache.catalina.LifecycleException错误 一般是由于在tomcat中运行web应用时为所在的jvm分配的堆空间过小,具体错误截图如下所示: 2.为特定程序分 ...
- 【Quartz】问题记录注意事项【四】
记录一:queartz 在同时启动多个任务是,触发器名称不能设置一致,不然第二次启动会不成功 记录二:quartz 在使用任务与触发器分离写法时,任务必须要带(.StoreDurably()) IJo ...
- hive命令的三种执行方式
hive命令的3种调用方式 方式1:hive –f /root/shell/hive-script.sql(适合多语句) hive-script.sql类似于script一样,直接写查询命令就行 不 ...
- Web前端基础——jQuery(一)
前几天回老家呆了几天,几乎没有怎么学习新的知识,这期间一直有断断续续的看<Java编程思想>,还刷了一些前沿消息,也算没闲着.今天开始学习jQuery啦,继续前进. 在网上查了,买了这本书 ...
- Javassm连接数据库报错129 ERROR [com.alibaba.druid.pool.DruidDataSource] - {dataSource-1} init error
Javassm连接数据库报错129 ERROR [com.alibaba.druid.pool.DruidDataSource] - {dataSource-1} init error 发现jdbc这 ...
- (三)Sass和Compass--制作精灵图片
6.1 精灵的工作原理 // 将各种图片合并到一张图片里面,并在不同的状态下改变背景图片的位置; 6.2 精灵的重要性 // 压缩图片的内存; // 减少HTTP请求 6.2.3 Compass处理精 ...