javaScript中各种遍历的整理
当我们要对数组或者是集合进行读取数据的时候,就会用到遍历,那么,各种遍历都有什么特点呢,今天小编就带领大家一探javaScript中的遍历.
首先介绍数组的定义方法
//第一种:构造函数法 ,通过 new 关键字 定义数组
var array = new Array();
//第二种:直接定义法,这里 [] 里面的值,可有 可无,这种定义方式下的数组 长度是可扩展的
//注意:若[]中有元素时,需要用"," 分隔,否则 就是 一个元素了
var array2 = [];
//声明一系列数据结构
//构造函数
function Person ( name ){
this.name = name;
}
//数组:数组元素是构造函数生成的对象
var arr = [ new Person("小王") , new Person ("小红") , new
Person("小李") ];
//字面量对象
//注意:字面量对象中有多个元素的时候 用"," 逗号隔开
var game = {
"name" : "lili",
"type" : "USA"
}
1.普通的 for 循环遍历
第一种:最常用的 for 循环遍历 ,适合 所有的情况
//这种遍历需要通过下标的方式读取对象
for ( var i =0 ; i < arr.length ; i++ ) {
console.log( arr[i]);
}
2.for ..in 循环遍历
//遍历数组注意: 以后 能不用 for..in 遍历数组,就不用, for..in
性能不好,而且容易造成下标错乱问题
//tempIdx 表示数组的下标
//arr 表示要遍历的数组
for( var tempIdx in arr ){
console.log( arr[tempIdx].name);
}
//遍历对象:for..in非常适合去遍历字面量对象
//左边变量:是这个对象的每一个属性
//右边变量:要遍历的对象
for ( var tempProp in game ){
//这里要注意:当属性为变量的时候,要用方括号[]去访问!!!
//game.tempProp 访问game下的 tempProp属性
undefined
console.log( game[tempProp] );
}
3. forEach( ) 遍历
//遍历数组
//如果遍历数组,这个方法其实是Array.prototype.forEach( )
//数组的原型方法
//forEach 的参数 是一种匿名函数
//这个匿名函数的参数
//第一个参数: 数组的每个元素
//第二个参数: 数组的下标
//第三个参数: 当前数组对象
//注意:forEach 遍历有一个致命的 缺陷, 不能使用
break continue
return
arr.forEach ( function( ele , idx , array ){
console.log ( ele.name ) ;//每个元素
console.log ( idx );//下标
console.log ( array );//当前数组
});
//遍历Map
//如果遍历 Map,这个方法其实是 Map.prototype.forEach
//forEach 的参数: 是一个匿名回调 函数
//这个匿名 函数的参数
//第一个参数: value值
//第二个参数: key值
//第三个参数: 当前的对象
map.forEach( function( value , key , map ){
console.log( key ":" value );
}
4. for..of 遍历
//遍历数组
//第一个变量: 数组中的每一个元素
//第二个遍历: 要遍历的数组对象
for( var temple of arr ) {
console.log( tempEle.name );
}
//遍历map
//第一个参数: 是一个数组,数组中有两个元素 ,分别是key 和 value
//第二个参数: 要遍历的map对象
for( var [ key , value ] of map ){
console.log( key "--" value );
}
//另一种方式
for( var keyAndValue of map ){
console.log( keyAndValue[0] "--" keyAndValue[1] );
}
注意:for..of 不能遍历 object 集合,假如要遍历 object集合,需要先用普通的for循环
遍历object集合,添加到数组,再对其进行下一步操作
