[轉發]for 循環，jQuery循環遍歷詳解

1.for 循環
原生JS最基本的使用：

for (var i=0;i<cars.length;i++)
{
    .....
}

for - 循環代碼塊必定的次數
2.for in
for/in - 循環遍歷對象的屬性
以任意順序遍歷一個對象的可枚舉屬性。對於每一個不一樣的屬性，語句都會被執行

 

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);

// for (variable in object) {...}
// variable
// 在每次迭代時,將不一樣的屬性名分配給變量。
// object
// 被迭代其枚舉屬性的對象。

 

for…in 不該該被用來迭代一個下標順序很重要的 Array .

let array2 = ['a','b','c']
let obj1 = {
  name : 'lei',
  age : '16'
}
 
for(variable  in array2){   //variable  爲 index
  console.log(variable )   //0 1 2
}
 
for(variable  in obj1){   //variable 爲屬性名
  console.log(variable)   //name age
}

3.forEach()和map()
JavaScript 提供了 foreach() map() 兩個可遍歷 Array對象 的方法 forEach和map用法相似，均可以遍歷到數組的每一個元素，並且參數一致；
forEach() 方法對數組的每一個元素執行一次提供的函數。

let a = ['a', 'b', 'c'];
a.forEach(function(element) {
    console.log(element);
});

array.forEach(callback(currentValue, index, array){
    //do something
}, this)

array.forEach(callback[, thisArg])

參數：

callback爲數組中每一個元素執行的函數，該函數接收三個參數：

currentValue(當前值)
數組中正在處理的當前元素。
index(索引)
數組中正在處理的當前元素的索引。
array
forEach()方法正在操做的數組。
thisArg可選可選參數。當執行回調 函數時用做this的值(參考對象)。
forEach 遍歷的範圍在第一次調用 callback 前就會肯定。調用forEach 後添加到數組中的項不會被 callback 訪問到

二者的不一樣點：
不一樣點：

forEach() 方法對數組的每一個元素執行一次提供的函數。老是返回undefined；

map() 方法建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。返回值是一個新的數組；

var array1 = [1,2,3,4,5];
 
var x = array1.forEach(function(value,index){
 
    console.log(value);   //可遍歷到全部數組元素
 
    return value + 10
});
console.log(x);   //undefined    不管怎樣，總返回undefined
 
var y = array1.map(function(value,index){
 
    console.log(value);   //可遍歷到全部數組元素
 
    return value + 10
});
console.log(y);   //[11, 12, 13, 14, 15]   返回一個新的數組

4.for…of
ECMAScript 6新方法
for…of 語句建立一個循環來迭代可迭代的對象。在 ES6 中引入的 for…of 循環，以替代 for…in 和 forEach() ，並支持新的迭代協議。for…of 容許你遍歷 Arrays（數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數據結構等 for…of 循環僅適用於迭代。 而普通對象不可迭代

let array2 = ['a','b','c']
let obj1 = {
  name : 'lei',
  age : '16'
}
 
for(variable  of array2){   /variable  爲 value
  console.log(variable )   //'a','b','c'
}
 
for(variable  of obj1){  //<strong>普通對象不能這樣用</strong>
  console.log(variable)   // 報錯 ： main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function

總結 ：
:for in老是獲得對像的key或數組,字符串的下標,而for of和forEach同樣,是直接獲得值
結果for of不能對象用
對於新出來的Map,Set上面
for…in循環會遍歷一個object全部的可枚舉屬性。
for…of會遍歷具備iterator接口的數據結構

若是是數組循環：
原始的for循環比較麻煩，forEach，這種寫法的問題在於，沒法中途跳出forEach循環，break命令或return命令都不能奏效。
for…in數組循環有幾個缺點：
數組的鍵名是數字，可是for…in循環是以字符串做爲鍵名「0」、「1」、「2」等等。
for…in循環不只遍歷數字鍵名，還會遍歷手動添加的其餘鍵，甚至包括原型鏈上的鍵。
某些狀況下，for…in循環會以任意順序遍歷鍵名。
總之，for…in循環主要是爲遍歷對象而設計的，不適用於遍歷數組
for…of循環相比上面幾種作法，有一些顯著的優勢：
有着同for…in同樣的簡潔語法，可是沒有for…in那些缺點。
不一樣於forEach方法，它能夠與break、continue和return配合使用。
提供了遍歷全部數據結構的統一操做接口。

若是是循環對象，用for in

jquery 循環的用法
jQuery的each方法的幾種經常使用的用法

 var arr = [ "one", "two", "three", "four"];     
 $.each(arr, function(){     
    alert(this);     
 }); 

//上面這個each輸出的結果分別爲：one,two,three,four

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
$.each(arr1, function(i, item){     
   alert(item[0]);     
});    

//其實arr1爲一個二維數組，item至關於取每個一維數組，
//item[0]相對於取每個一維數組裏的第一個值
//因此上面這個each輸出分別爲：1 4 7

var obj = { one:1, two:2, three:3, four:4};     
$.each(obj, function(key, val) {     
    alert(obj[key]);           
});   

//這個each就有更厲害了，能循環每個屬性
//輸出結果爲：1 2 3 4

jQuery更適用的遍歷方法
1）先獲取某個集合對象
2）遍歷集合對象的每個元素
var d=$(「div」);
$.each(d,function (index,domEle){
d是要遍歷的集合
index就是索引值
domEle 表示獲取遍歷每個dom對
});

    $(function(){
        var con=[
            {
                "image1":"img/1524880084962.jpg",
                "shopName":"黑花生（100g*15袋/盒）",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879960117.jpg",
                "shopName":"黑花生（100g*15袋/盒）",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879605807.jpg",
                "shopName":"黑花生（100g*15袋/盒）",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879181488.jpg",
                "shopName":"黑花生（100g*15袋/盒）",
                "price":190,
                "markPrice":200
            }
            
        ]
        var html="";
        $.each(con, function(k,v) {//這裏的函數參數是鍵值對的形式，k表明鍵名，v表明值
            html+='<li class="shopBox">'+
                    '<div class="shopImg"><img src='+con[k].image1+'/></div>'+
                    '<div class="shopListName">'+con[k].shopName+'</div>'+
                    '<div class="shopPrice">'+
                        '<span class="price">￥'+con[k].price+'</span>'+
                        '<span class="marketPrice">￥'+con[k].markPrice+'</span>'+
                    '</div>'+
                '</li>'
        });
        $(".shop_box").append(html);
    })

 注意若是是後臺返回的是Json字符串請必定要轉換一下：

 //data是後臺傳過來的字符串
  $.each(JSON.parse(data), function (index, obj) {    //使用JSON.parse轉換爲JavaScript對象。 要不控制檯報錯  index是下標  obj是內容 若是是對象的話就 obj.(名稱就能夠)
  alert(index);
 });  

 若是不使用JSON.parse()來轉換  會報   Uncaught TypeError: Cannot use 'in' operator to search for '156'   錯誤

———————————————— 版權聲明：本文爲CSDN博主「_dalianmiao」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/hani_wen/article/details/81878112