1. Array.map()
-
循環(huán)簡單的數(shù)組
map可以接受三個參數(shù), 1. 得到數(shù)組的每個值,2. 得到索引 3. 得到原數(shù)組
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] 原數(shù)組
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} ... 得到數(shù)組下面的所有對象
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()在循環(huán)數(shù)組上很相似,區(qū)別是map方法有返回值躁劣,還有就是forEach只能循環(huán)數(shù)組
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 遍歷對象和數(shù)組都很方便的嚎幸,建議遍歷數(shù)組時候用for in 和 forEach()躬存。
1. 遍歷簡單的數(shù)組
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平常用的最多的犁柜,但是要注意寫法,要把數(shù)組的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()在遍歷對象的時候參數(shù)是相反的
// 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>