JavaScript中的迭代器與循環

引言：

本文涉及內容包括：

• forEach方法
• for-in方法
• for-of方法
• eval（）方法
• map（）方法

今天來總結一下，JS中我們常見的循環方式與迭代器，深入了解他們之間的區別，及適合的使用場景。

最早的數組遍歷方式

var a = ["a", "b", "c"];
for(var index = 0;index < a.length;index++){
  console.log(a[index]);
}

for循環，我們最熟悉也是最常用的循環迭代方式，后來的許多迭代方法都是基於for循環封裝的。

1 forEach

語法：[].forEach(function(value, index, array) { // ... });

forEach遍歷數組，而不是遍歷對象哦，而且在遍歷的過程中不能被終止,必須每一個值遍歷一遍后才能停下來. 也就是說：你不能使用break來退出循環, 不能使用return語句來返回到外層 jquery中forEach 注意其與jQuery的$.each類似，只不過參數正好是相反的！ $.each([], function(index, value, array) { // ... });

2 for...in 適合進行普通對象的遍歷 for-in循環遍歷對象的key，即鍵值對的鍵名。 特性如下： 1. 方法遍歷到的index（或key）類型為String，若無意間進行了字符串計算，會帶來許多不便。 2. for-in循環會遍歷對象的所有可枚舉屬性。什么意思呢？就是除了遍歷數組元素之外，還會遍歷：自定義屬性，原型上的屬性。 3. 一般不推薦遍歷數組，因為for in遍歷順序是隨機的，適合進行普通對象的遍歷。

 

 var myArry =[1,2,3,4]; 
myArry.desc ='four'; 
for(var value in myArry){
//循環key console.log(value) 
}

//"0" 
//"1" 
//"2" 
//"3" 
//"desc"

 

注意這里添加上去的屬性也被遍歷出來了 for…in由於歷史遺留問題，它遍歷的實際上是對象的屬性名稱，一個Array數據也是一個對象，數組中的每個元素的索引被視為屬性名稱，所以我們可以看到使用for…in循環Array數組時，拿到的其實是每個元素的索引. PS:若要避免原型鏈上的屬性也被遍歷到，可采用hasOwnProperty()方法去過濾掉對象原型鏈上的屬性。 for…of for-of循環適合遍歷數組 循環遍歷對象的值，即鍵值對的鍵值。

var myArry =[1,2,3,4];
myArry.desc ='four';
for(var value of myArry){
  console.log(value)
}
//1
//2
//3
//4

 

特性如下：

- 這是最簡潔、最直接的遍歷數組元素的語法。

- 這個方法避開了for-in循環的所有缺陷，解決了forEach的不可中斷問題。

- for…of為ES6新增方法。

- 不推薦for…of遍歷普通對象，實在需要用for…of遍歷，可搭配Object.keys()實現。

代碼如下：

var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法獲取對象key的數組
    console.log(key+": "+student[key]);
}

for…of

for-of循環適合遍歷數組

循環遍歷對象的值，即鍵值對的鍵值。

 

var myArry =[1,2,3,4];
myArry.desc ='four';
for(var value of myArry){
  console.log(value)
}
//1
//2
//3
//4

 

特性如下：

- 這是最簡潔、最直接的遍歷數組元素的語法。

- 這個方法避開了for-in循環的所有缺陷，解決了forEach的不可中斷問題。

- for…of為ES6新增方法。

- 不推薦for…of遍歷普通對象，實在需要用for…of遍歷，可搭配Object.keys()實現。

代碼如下：

var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法獲取對象key的數組
    console.log(key+": "+student[key]);
}

總結：

for…in與for…of
語法格式對比：

for (var key in arr){
    console.log(arr[key]);
}

for (var value of arr){
    console.log(value);
}

1. 推薦在循環對象屬性的時候，使用for...in,在遍歷數組的時候的時候使用for...of。

2. for in是遍歷鍵名，for of是遍歷鍵值。

3. 注意，for...of是ES6新引入的特性。修復了ES5引入的for...in的不足。

map（）方法

map理解為“映射”的意思，基本用法同forEach，為ES5新增屬性方法。

 

❤map()方法返回一個新數組，數組中的元素為原始數組元素調用函數處理的后值。

❤map()方法按照原始數組元素順序依次處理元素。

 

注意：

map不會對空數組進行檢測

map不會改變原始數組

處理函數必須有返回值，否則會映射成undefined。

map使用語法：

arr.map(function(currentValue，index，arr),thisValue)

參數:
1. 處理函數（必須），下屬參數依次為：當前值value，序號index，原數組arr。
2. thisValue(可選)

❤另外，由於map方法為ES5新增方法，不支持IE9以下瀏覽器。如果需要兼容，可用原型擴展。
方法如下：

if (typeof Array.prototype.map != "function") {
  Array.prototype.map = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {      
         arr.push(fn.call(context, this[k], k, this));
      }
    }
    return arr;
  };
}

jquery中map方法用法同原生

且從 1.6 開始，該函數也支持遍歷對象。它接受兩個參數，分別是要處理的數組/對象和處理函數，其處理函數也接受鍵值和鍵名兩個參數。

/**** jQuery $.map() ****/

// 篩選數組元素
var arrTmp = [1,2,3,4,5];
var bigNum = $.map(arrTmp,function(num){
    if(num>2){
        return num;
    }
});
// bigNum -> [3,4,5]

// 處理對象
var person = {
    jack:{age:9},
    tom:{age:20},
    bobo:{age:30}
}

var oldMan = $.map(person,function(value,key){

    if(value.age>26){

        return key;
    }
})

// oldMan -> ["bobo"]

map定義和方法

map理解為“映射”的意思，基本用法同forEach，為ES5新增屬性方法。

 

❤map()方法返回一個新數組，數組中的元素為原始數組元素調用函數處理的后值。

❤map()方法按照原始數組元素順序依次處理元素。

 

注意：

map不會對空數組進行檢測

map不會改變原始數組

處理函數必須有返回值，否則會映射成undefined。

map使用語法：

 

arr.map(function(currentValue，index，arr),thisValue)

1

參數:

1. 處理函數（必須），下屬參數依次為：當前值value，序號index，原數組arr。

2. thisValue(可選)

 

❤另外，由於map方法為ES5新增方法，不支持IE9以下瀏覽器。如果需要兼容，可用原型擴展。

方法如下：

if (typeof Array.prototype.map != "function") {
  Array.prototype.map = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {      
         arr.push(fn.call(context, this[k], k, this));
      }
    }
    return arr;
  };
}

jquery中map方法用法同原生

且從 1.6 開始，該函數也支持遍歷對象。它接受兩個參數，分別是要處理的數組/對象和處理函數，其處理函數也接受鍵值和鍵名兩個參數。

/**** jQuery $.map() ****/

// 篩選數組元素
var arrTmp = [1,2,3,4,5];
var bigNum = $.map(arrTmp,function(num){
    if(num>2){
        return num;
    }
});
// bigNum -> [3,4,5]

// 處理對象
var person = {
    jack:{age:9},
    tom:{age:20},
    bobo:{age:30}
}

var oldMan = $.map(person,function(value,key){

    if(value.age>26){

        return key;
    }
})

// oldMan -> ["bobo"]

eval（）方法

eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。

注意：
strong text該方法只接受原始字符串作為參數，如果 string 參數不是原始字符串，那么該方法將不作任何改變地返回。
例子：

<script type="text/javascript">

eval("x=10;y=20;document.write(x*y)")

document.write(eval("2+2"))

var x=10
document.write(eval(x+17))

</script>

 

JavaScript中的迭代器與循環原創Little_ChenH 最后發布於2018-03-19 16:32:28 閱讀數 1119  收藏展開引言：本文涉及內容包括：
forEach方法for-in方法for-of方法eval（）方法map（）方法今天來總結一下，JS中我們常見的循環方式與迭代器，深入了解他們之間的區別，及適合的使用場景。
最早的數組遍歷方式var a = ["a", "b", "c"];for(var index = 0;index < a.length;index++){  console.log(a[index]);}1234for循環，我們最熟悉也是最常用的循環迭代方式，后來的許多迭代方法都是基於for循環封裝的。
1 forEach語法：
[].forEach(function(value, index, array) { // ... });1forEach遍歷數組，而不是遍歷對象哦，而且在遍歷的過程中不能被終止,必須每一個值遍歷一遍后才能停下來.也就是說：你不能使用break來退出循環, 不能使用return語句來返回到外層
jquery中forEach注意其與jQuery的$.each類似，只不過參數正好是相反的！
$.each([], function(index, value, array) { // ... });12 for...in適合進行普通對象的遍歷for-in循環遍歷對象的key，即鍵值對的鍵名。
特性如下：1. 方法遍歷到的index（或key）類型為String，若無意間進行了字符串計算，會帶來許多不便。2. for-in循環會遍歷對象的所有可枚舉屬性。什么意思呢？就是除了遍歷數組元素之外，還會遍歷：自定義屬性，原型上的屬性。3. 一般不推薦遍歷數組，因為for in遍歷順序是隨機的，適合進行普通對象的遍歷。
var myArry =[1,2,3,4];myArry.desc ='four'; for(var value in myArry){ //循環key  console.log(value)}//"0"//"1"//"2"//"3"//"desc" 注意這里添加上去的屬性也被遍歷出來了12345678910for…in由於歷史遺留問題，它遍歷的實際上是對象的屬性名稱，一個Array數據也是一個對象，數組中的每個元素的索引被視為屬性名稱，所以我們可以看到使用for…in循環Array數組時，拿到的其實是每個元素的索引.
PS:若要避免原型鏈上的屬性也被遍歷到，可采用hasOwnProperty()方法去過濾掉對象原型鏈上的屬性。
for…offor-of循環適合遍歷數組循環遍歷對象的值，即鍵值對的鍵值。
var myArry =[1,2,3,4];myArry.desc ='four';for(var value of myArry){  console.log(value)}//1//2//3//4123456789特性如下：- 這是最簡潔、最直接的遍歷數組元素的語法。- 這個方法避開了for-in循環的所有缺陷，解決了forEach的不可中斷問題。- for…of為ES6新增方法。- 不推薦for…of遍歷普通對象，實在需要用for…of遍歷，可搭配Object.keys()實現。代碼如下：
var student={    name:'wujunchuan',    age:22,    locate:{    country:'china',    city:'xiamen',    school:'XMUT'    }}for(var key of Object.keys(student)){    //使用Object.keys()方法獲取對象key的數組    console.log(key+": "+student[key]);}12345678910111213for…offor-of循環適合遍歷數組循環遍歷對象的值，即鍵值對的鍵值。
var myArry =[1,2,3,4];myArry.desc ='four';for(var value of myArry){  console.log(value)}//1//2//3//4123456789特性如下：- 這是最簡潔、最直接的遍歷數組元素的語法。- 這個方法避開了for-in循環的所有缺陷，解決了forEach的不可中斷問題。- for…of為ES6新增方法。- 不推薦for…of遍歷普通對象，實在需要用for…of遍歷，可搭配Object.keys()實現。代碼如下：
var student={    name:'wujunchuan',    age:22,    locate:{    country:'china',    city:'xiamen',    school:'XMUT'    }}for(var key of Object.keys(student)){    //使用Object.keys()方法獲取對象key的數組    console.log(key+": "+student[key]);}12345678910111213總結：for…in與for…of語法格式對比：
for (var key in arr){    console.log(arr[key]);}
for (var value of arr){    console.log(value);}1234567推薦在循環對象屬性的時候，使用for...in,在遍歷數組的時候的時候使用for...of。
for in是遍歷鍵名，for of是遍歷鍵值。
注意，for...of是ES6新引入的特性。修復了ES5引入的for...in的不足。
map（）方法map理解為“映射”的意思，基本用法同forEach，為ES5新增屬性方法。
❤map()方法返回一個新數組，數組中的元素為原始數組元素調用函數處理的后值。❤map()方法按照原始數組元素順序依次處理元素。
注意：map不會對空數組進行檢測map不會改變原始數組處理函數必須有返回值，否則會映射成undefined。map使用語法：
arr.map(function(currentValue，index，arr),thisValue)1參數:1. 處理函數（必須），下屬參數依次為：當前值value，序號index，原數組arr。2. thisValue(可選)
❤另外，由於map方法為ES5新增方法，不支持IE9以下瀏覽器。如果需要兼容，可用原型擴展。方法如下：
if (typeof Array.prototype.map != "function") {  Array.prototype.map = function (fn, context) {    var arr = [];    if (typeof fn === "function") {      for (var k = 0, length = this.length; k < length; k++) {               arr.push(fn.call(context, this[k], k, this));      }    }    return arr;  };}1234567891011jquery中map方法用法同原生且從 1.6 開始，該函數也支持遍歷對象。它接受兩個參數，分別是要處理的數組/對象和處理函數，其處理函數也接受鍵值和鍵名兩個參數。
/**** jQuery $.map() ****/
// 篩選數組元素var arrTmp = [1,2,3,4,5];var bigNum = $.map(arrTmp,function(num){    if(num>2){        return num;    }});// bigNum -> [3,4,5]
// 處理對象var person = {    jack:{age:9},    tom:{age:20},    bobo:{age:30}}
var oldMan = $.map(person,function(value,key){
    if(value.age>26){
        return key;    }})
// oldMan -> ["bobo"]123456789101112131415161718192021222324252627map定義和方法map理解為“映射”的意思，基本用法同forEach，為ES5新增屬性方法。
❤map()方法返回一個新數組，數組中的元素為原始數組元素調用函數處理的后值。❤map()方法按照原始數組元素順序依次處理元素。
注意：map不會對空數組進行檢測map不會改變原始數組處理函數必須有返回值，否則會映射成undefined。map使用語法：
arr.map(function(currentValue，index，arr),thisValue)1參數:1. 處理函數（必須），下屬參數依次為：當前值value，序號index，原數組arr。2. thisValue(可選)
❤另外，由於map方法為ES5新增方法，不支持IE9以下瀏覽器。如果需要兼容，可用原型擴展。方法如下：
if (typeof Array.prototype.map != "function") {  Array.prototype.map = function (fn, context) {    var arr = [];    if (typeof fn === "function") {      for (var k = 0, length = this.length; k < length; k++) {               arr.push(fn.call(context, this[k], k, this));      }    }    return arr;  };}1234567891011jquery中map方法用法同原生且從 1.6 開始，該函數也支持遍歷對象。它接受兩個參數，分別是要處理的數組/對象和處理函數，其處理函數也接受鍵值和鍵名兩個參數。
/**** jQuery $.map() ****/
// 篩選數組元素var arrTmp = [1,2,3,4,5];var bigNum = $.map(arrTmp,function(num){    if(num>2){        return num;    }});// bigNum -> [3,4,5]
// 處理對象var person = {    jack:{age:9},    tom:{age:20},    bobo:{age:30}}
var oldMan = $.map(person,function(value,key){
    if(value.age>26){
        return key;    }})
// oldMan -> ["bobo"]123456789101112131415161718192021222324252627eval（）方法eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。
注意：strong text該方法只接受原始字符串作為參數，如果 string 參數不是原始字符串，那么該方法將不作任何改變地返回。例子：
<script type="text/javascript">
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
var x=10document.write(eval(x+17))
</script>————————————————版權聲明：本文為CSDN博主「Little_ChenH」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。原文鏈接：https://blog.csdn.net/Little_ChenH/article/details/79613562