js中forEach,for in,for of迴圈的區別和用法
一、一般的遍歷陣列的方法:
var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,array[i]); }
二、用for in的方遍歷陣列
for(let index in array) { console.log(index,array[index]); };
三、forEach
array.forEach(v=>{ console.log(v); });
array.forEach(function(v){ console.log(v); });
四、用for in不僅可以對陣列,也可以對enumerable物件操作
var A = {a:1,b:2,c:3,d:"hello world"}; for(let k in A) { console.log(k,A[k]); }
五、在ES6中,增加了一個for of迴圈,使用起來很簡單
for(let v of array) { console.log(v); };
lets="helloabc";
for(letcofs){
console.log(c);
}
總結來說:for in總是得到對像的key或陣列,字串的下標,而for of和forEach一樣,是直接得到值
結果for of不能物件用
對於新出來的Map,Set上面
var set = new Set(); set.add("a").add("b").add("d").add("c"); var map = new Map(); map.set("a",1).set("b",2).set(999,3); for (let v of set) { console.log(v); } console.log("--------------------"); for(let [k,v] of map) { console.log(k,v); }
javascript遍歷物件詳細總結
1.原生javascript遍歷
(1)for迴圈遍歷
let array1 = ['a','b','c']; for (let i = 0;i < array1.length;i++){ console.log(array1[i]); // a b c }
(2)JavaScript 提供了 foreach() map() 兩個可遍歷 Array物件 的方
forEach和map用法類似,都可以遍歷到陣列的每個元素,而且引數一致;
Array.forEach(function(value , index , array){ //value為遍歷的當前元素,index為當前索引,array為正在操作的陣列 //do something },thisArg) //thisArg為執行回撥時的this值
不同點:
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] 返回一個新的陣列
對於類似陣列的結構,可先轉換為陣列,再進行遍歷
let divList = document.querySelectorAll('div'); //divList不是陣列,而是nodeList //進行轉換後再遍歷 [].slice.call(divList).forEach(function(element,index){ element.classList.add('test') }) Array.prototype.slice.call(divList).forEach(function(element,index){ element.classList.remove('test') }) [...divList].forEach(function(element,index){ //<strong>ES6寫法</strong> //do something })
(3)for ··· in ··· / for ··· of ···
for...in
語句以任意順序遍歷一個物件的可列舉屬性。對於每個不同的屬性,語句都會被執行。每次迭代時,分配的是屬性名
補充 : 因為迭代的順序是依賴於執行環境的,所以陣列遍歷不一定按次序訪問元素。因此當迭代那些訪問次序重要的 arrays 時用整數索引去進行for
迴圈(或者使用Array.prototype.forEach()
或for...of
迴圈) 。
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 }
ES6新增了 遍歷器(Iterator)機制,為不同的資料結構提供統一的訪問機制。只要部署了Iterator的資料結構都可以使用 for ··· of ··· 完成遍歷操作 (Iterator詳解 : http://es6.ruanyifeng.com/#docs/iterator ),每次迭代分配的是屬性值
原生具備 Iterator 介面的資料結構如下:
Array Map Set String TypedArray 函式的arguments物件 NodeList物件
let array2 = ['a','b','c'] let obj1 = { name : 'lei', age : '16' } for(variable of array2){ //<strong>variable 為 value</strong> 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 }<br><br>let divList = document.querySelectorAll('div');<br><br>for(element of divlist){ //可遍歷所有的div節點<br> //do something <br>}
如何讓普通物件可以用for of 進行遍歷呢? http://es6.ruanyifeng.com/#docs/iterator 一書中有詳細說明了!
除了迭代時分配的一個是屬性名、一個是屬性值外,for in 和 for of 還有其他不同(MDN文件: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)
for...in迴圈會遍歷一個object所有的可列舉屬性。
for...of會遍歷具有iterator介面的資料結構
for...in
遍歷(當前物件及其原型上的)每一個屬性名稱,而for...of遍歷(當前物件上的)每一個屬性值
Object.prototype.objCustom = function () {}; Array.prototype.arrCustom = function () {}; let iterable = [3, 5, 7]; iterable.foo = "hello"; for (let i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" } for (let i of iterable) { console.log(i); // logs 3, 5, 7 }