1. Array.map()
-
循环简单的数组
map可以接受三个参数, 1. 得到数组的每个值,2. 得到索引 3. 得到原数组
var ArrayData = [1,2,3,4];
ArrayData.map(function(value,index,arr){
console.log(value); // 1234 每个值
console.log(index); // 0123 索引
console.log(arr); // [1,2,3,4] 原数组
console.log(arr[index]); //1234 每个值
});
var ArrayData = [
{key:1},
{key:2},
{key:3},
{key:4}
];
ArrayData.map(function(value,index,arr){
console.log(value); // Object {a: 1} Object {b: 2} ... 得到数组下面的所有对象
console.log(index); // 0123 索引
console.log(arr); // [Object, Object, Object, Object] 得到每一个对象
console.log(value.a); 1
console.log(value.b); 2
...
});
2. Array.forEach()
forEach()和map()在循环数组上很相似,区别是map方法有返回值,还有就是forEach只能循环数组
var arr = [1,2,3,4];
arr.forEach(function(item,index,arr){
console.log(item); //1234
// console.log(index); //0123
// console.log(arr); //[1, 2, 3, 4]
})
3. for in
语法:for(var i in arr){}
for in 遍历对象和数组都很方便的,建议遍历数组时候用for in 和 forEach()。
1. 遍历简单的数组
var arr = [1,2,3,4];
for(var i in arr){
console.log(i); //索引是0123
//console.log(arr[i]) //值 1234
}
2. 遍历简单的对象
var obj = {a:1,b:2,c:3,d:4}
for(var key in obj){
//console.log(key); //key a b c d
//console.log(obj[key]); //value 1234
}
4. for
for平常用的最多的,但是要注意写法,要把数组的length放在一个变量里面,性能会好些,如下:
var arr = [1,2,3,4];
for(var i = 0,len = arr.length; i < len; i++){
console.log(i); //索引 0123
//console.log(arr[i]); // 1234
}
5. $.map()
注意:$.map()和原生的map()在遍历对象的时候参数是相反的
// var arr = [1,2,3,4];
// $.map(arr,function(item,index){
// console.log(index); // 0123
// console.log(item); // 1234
// });
var obj = {a:1,b:2,c:3,d:4}
$.map(obj,function(item,key){
//console.log(item); // 1234
console.log(key); // 1234
});
还有一种each方法是用来遍历DOM元素的:如些:
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script>
$('li').each(function(i,item){
//console.log(i); // 索引 01234567
console.log(item) //得到全部标签 <li>1</li> <li>2</li>......
console.log($(item).text()) // 得到每个标签里面的文本值
});
</script>