JS中遍歷陣列、物件的方式

Joyce-marmot發表於2018-11-05
JS陣列物件
1.標準的for迴圈遍歷陣列
//不列印自定義屬性和繼承屬性
var array = [1,2,3];  
for (var i = 0; i < array.length; i++) {  
    console.log(array[i]);  
}
2.for in 遍歷物件

不要用for in遍歷陣列，因為還會列印自定義屬性和繼承屬性

一般常用來遍歷非陣列的物件並且使用hasOwnProperty()方法去過濾掉原型鏈上的屬性

陣列的key是string型別,因為js中一切皆為物件。

var array = [1,2,3];  
//自定義屬性
array.desc =`four`;
//繼承屬性 擴充套件了js原生的Array 
Array.prototype.test=function(){}

array.hasOwnProperty(`desc`) //true
array.hasOwnProperty(`test`) //false

for(var key in array){
    console.log(array[key])
}
3.for of遍歷陣列

ES6裡引入了一種遍歷器(Iterator)機制，為不同的資料結構提供統一的訪問機制。只要部署了Iterator的資料結構都可以使用 for ··· of ··· 完成遍歷操作

它既比傳統的for迴圈簡潔，同時彌補了forEach和for-in迴圈的短板。

迴圈遍歷鍵值對的value，與for in遍歷key相反

如果實在想用for…of來遍歷普通物件的屬性，可以先獲取物件的所有key的陣列Object.keys()，然後遍歷

( Iterator詳解 ：http://es6.ruanyifeng.com/#docs/iterator )

( for of 例子：https://www.cnblogs.com/m2maomao/p/7743143.html )

//不列印自定義屬性和繼承屬性
for(var value of array){
  console.log(value)
}
4.forEach遍歷陣列 VS map VS $.each

forEach遍歷陣列，而且在遍歷的過程中不能被終止,必須每一個值遍歷一遍後才能停下來

//不列印自定義屬性和繼承屬性
array.forEach((value,index,arr)=>{
  console.log(value);
});

//注意其與jQuery的$.each類似，只不過第1個和第2個引數正好是相反的
//thisArg為執行回撥時的this值 
[].forEach(function(value, index, array) { /*...*/ } ,thisArg) //返回值:undefined
[].map(function(value,index,array){ return value*2 }, thisArg) //返回值：返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值。
$.each([], function(index, value) { /*...*/ }); //$.each遍歷陣列或者類陣列
5.$.each
$.each([], function(index, value) { /*...*/ }); //$.each遍歷陣列或者類陣列
$.each({}, function(key, value) { /*...*/ });   //$.each遍歷Object
$().each(function(index, value) { /*...*/ });   //遍歷Dom元素

跳出 JQuery each迴圈,要實現break和continue的功能

  • return false; ——跳出所有迴圈；相當於for中break 效果。
  • return true; ——跳出當前迴圈，進入下一個迴圈；相當於for中continue 效果
對於類似陣列的結構，可轉換為陣列
//divList不是陣列，而是nodeList
var divList = document.querySelectorAll(`div`);   
 
[].slice.call(divList)
 
Array.prototype.slice.call(divList)
 
[...divList]  //ES6寫法
總結：
  • forEach 遍歷陣列，而且在遍歷的過程中不能被終止,必須每一個值遍歷一遍後才能停下來
  • for in 以任意順序遍歷物件的可列舉屬性，（最好不要用來遍歷陣列） 因此當迭代那些訪問次序重要的 arrays 時用整數索引去進行 for 迴圈 (或者使用 Array.prototype.forEach() 或 for…of 迴圈) 。
  • （ES6）for…of 允許你遍歷 Arrays（陣列）, Strings（字串）, Maps（對映）, Sets（集合）等可迭代的資料結構等。不能遍歷普通物件
  • for…in 遍歷（當前物件及其原型上的）每一個key,而 for…of遍歷（當前物件上的）每一個value;

相關文章