JS 数组遍历和对象遍历的方法
JS数组遍历:
1、普通 for 循环遍历
var arr = [1,2,3,4,5] for(var i = 0; i < arr.length; i++){ console.log(arr[i]) } // 1 // 2 // 3 // 4 // 5
2、优化版 for 循环:使用变量,将长度缓存起来,避免重复获取长度,数组很大时优化效果明显
var arr = [1,2,3,4,5]; for(var j = 0, len = arr.length; j < len; j++){ console.log(arr[j]) } // 1 // 2 // 3 // 4 // 5
3、forEach,数组自带的循环,主要功能是遍历数组,实际性能比for还弱
var arr = [1,2,3,4,5]; arr.forEach(function(value, i){ console.log(i + ':' + value) }) // 0:1 // 1:2 // 2:3 // 3:4 // 4:5
forEach这种方法也有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。
4、map遍历,map此时不是‘地图’而是‘映射’,顾名思义就是将此数组映射到一个新数组。用法与 forEach 相同
var arr = [1,2,3,4,5]; arr.map(function(value,index){ console.log(index + ':' + value) })
同样,map语法不能使用break语句中断循环,但是map支持使用return语句,支持return返回值。是返回一个新数组,而不会改变数组。
var arr = [1,2,3,4,5] var arrNew = arr.map(function(val, index){ return val*2 }) console.log(arrNew) // [2, 4, 6, 8, 10]
map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。
['aaa', 'bbb', 'ccc'].map(function(elem, index, arr) { console.log(index); console.log(elem); console.log(arr) }); // 0 // aaa // ["aaa", "bbb", "ccc"] // 1 // bbb // ["aaa", "bbb", "ccc"] // 2 // ccc // ["aaa", "bbb", "ccc"]
此外,map()循环还可以接受第二个参数,用来绑定回调函数内部的this变量,将回调函数内部的this对象,指向第二个参数,间接操作这个参数(一般是数组)。
var arr = ['a', 'b', 'c']; [1, 2].map(function (e) { return this[e]; }, arr) // ["b", "c"]
5、for-of 遍历,是ES6新增功能
var arr = [1,2,3,4,5] for(let item of arr){ console.log(item) } // 1 // 2 // 3 // 4 // 5
for-of 性能更优;
与forEach 不同的是,它可以正常相应break、continue、return语句;
for-of 不仅支持数组,还支持大多数类数组对象;
for-of 还支持字符串遍历
6、for-in 遍历
for-in 是为了遍历对象而设计的,不适用于遍历数组。
遍历数组的缺点,数组的下标 index 是 number类型,for-in 遍历的index的值是 string 类型
var arr = {number:1, age:18, sex: '女'} for(var key in arr){ console.log(key + ':' + arr[key]) } // number:1 // age:18 // sex:女
任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的,for...
in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。
// 举例说明遍历不到继承属性 var obj = {}; for(var p in obj){ console.log(p) } // 无任何输出内容
如果只想遍历自身的属性,不会产生遍历失真的情况,应该结合hasOwnPropertty方法,在循环内部判断一下。
var person = { name: '老张' }; for (var key in person) { if (person.hasOwnProperty(key)) { console.log(key); } }
7、while循环
while循环语句包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。
var i = 0; while(i < 10){ console.log('当前i为:' + i) i++ }
8、do...while循环
do...while循环与while循环类似,唯一的区别就是先运行一次循环体,然后判断循环条件。
var x = 5; var y = 0; do { console.log(y); y++; } while(y < x)
9、forEach 循环
forEach方法与map方法很相似,也是对数组的所有成员依次执行参数函数。但是,forEach方法不返回值,只用来操作数据。也就是说,如果数组遍历的目的是为了得到返回值,那么使用map方法,否则使用forEach方法。forEach的用法与map方法一致,参数是一个函数,该函数同样接受三个参数:当前值、当前位置、整个数组。
function log(element, index, array) { console.log('[' + index + '] = ' + element); } ; [2, 5, 9].forEach(log);
10、filter过滤循环
filter 方法用户过滤数组中的成员,满足条件的成员组成一个新的数组返回。他的参数是一个函数,所有数组成员一次执行该函数,返回结果为true的成员组成一个新的数组返回。改方法不会改变原来的数组。
var arr = [1,5,3,2,4]; arr.filter(function(elem){ return elem > 3 }) // [5, 4]
filter方法的参数函数也可以接受三个参数:当前成员,当前位置和整个数 组。
[1, 2, 3, 4, 5].filter(function (elem, index, arr) { return index % 2 === 0; }); // [1, 3, 5]
此外,filter方法也可以接受第二个参数,用来绑定参数函数内部的this变量。
var obj = { MAX: 3 }; var myFilter = function (item) { if (item > this.MAX) return true; }; var arr = [2, 8, 3, 4, 1, 3, 2, 9]; arr.filter(myFilter, obj) // [8, 4, 9]
- js 的each()方法遍历对象和数组
- js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
- JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
- js 对象和数组的遍历方法总结
- 10-10 arguments存储实参、解决js获取CSS属性值兼容性、object对象、for语句遍历对象内容、数组中的方法
- JS中数组与对象的遍历方法实例小结
- js遍历数组和对象的方法
- js 的each()方法遍历对象和数组
- js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
- IE8对JS的数组,采用属性遍历的方法,解析不一样的地方:
- JS数组的遍历方法有两种
- js数组遍历的三种方法
- js、jquery遍历数组和对象
- JS遍历对象或者数组
- js使用sort()对数组对象排序的方法
- OC数组对象NSArray的常用方法 以及oc数组中常用的遍历
- IE8对JS的数组,采用属性遍历的方法,解析不一样的地方:
- js数组对象以及数组常用属性和方法
- json对象与数组以及转换成js对象的简单实现方法
- jquery遍历筛选数组的几种方法和遍历解析json对象