一、一般的遍歷數(shù)組的方法:
var array = [1,2,3,4,5,6,7];?
? ? for(var i = 0; i < array.length; i) {?
? ? ? ? console.log(i,array[i]);?
? ? }?
二、用for in的方遍歷數(shù)組
for(let index in array) {?
? ? ? ? console.log(index,array[index]);?
? ? };?
三、for Each
array.forEach (v=>{? console.log(v);? });
array.forEach（function(v){?
? ? console.log(v);?
});
四、用for in不僅可以對數(shù)組,也可以對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循環(huán),使用起來很簡單
for(let v of array) {? ? ? ? ? console.log(v);? ? ? };
let?s?="helloabc";?
????? for(let?c?of?s)?{??
?? ?? console.log(c);?
???? }
總結(jié)來說:for in總是得到對像的key或數(shù)組,字符串的下標,而for of和forEach一樣,是直接得到值
結(jié)果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遍歷對象詳細總結(jié)
1.原生javascript遍歷
（1）for循環(huán)遍歷
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用法類似，都可以遍歷到數(shù)組的每個元素，而且參數(shù)一致；
Array.forEach(function(value , index , array){//value為遍歷的當(dāng)前元素，index為當(dāng)前索引，array為正在操作的數(shù)組//do something},thisArg)//thisArg為執(zhí)行回調(diào)時的this值
不同點：
? forEach()?方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)?？偸欠祷豼ndefined；
? map() 方法創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果。返回值是一個新的數(shù)組；
對于類似數(shù)組的結(jié)構(gòu)，可先轉(zhuǎn)換為數(shù)組，再進行遍歷
let divList = document.querySelectorAll('div');//divList不是數(shù)組，而是nodeList//進行轉(zhuǎn)換后再遍歷[].slice.call(divList).forEach(function(element,index){
? element.classList.add('test')
})
Array.prototype.slice.call(divList).forEach(function(element,index){ //偽數(shù)組轉(zhuǎn)成數(shù)組
? element.classList.remove('test')
})
[...divList].forEach(function(element,index){//<strong>ES6寫法</strong>//do something})
（3）for ··· in ···???? /????? for ··· of ···
for...in語句以任意順序遍歷一個對象的可枚舉屬性。對于每個不同的屬性，語句都會被執(zhí)行。每次迭代時，分配的是屬性名
補充 : 因為迭代的順序是依賴于執(zhí)行環(huán)境的，所以數(shù)組遍歷不一定按次序訪問元素。?因此當(dāng)?shù)切┰L問次序重要的 arrays 時用整數(shù)索引去進行for循環(huán)?(或者使用Array.prototype.forEach()或for...of循環(huán)) 。
let array2 = ['a','b','c']
let obj1 = {
? name : 'lei',
? age : '16'}
for(var i in array2){//i ?為 index?
console.log(i )//0 1 2}
for(var i in obj1){//i為屬性名
console.log(i)//name age}
ES6新增了 遍歷器(Iterator)機制，為不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機制。只要部署了Iterator的數(shù)據(jù)結(jié)構(gòu)都可以使用 for ··· of ··· 完成遍歷操作? (?Iterator詳解 ： ?http://es6.ruanyifeng.com/#docs/iterator )，每次迭代分配的是?屬性值
?原生具備 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)如下：
?Array?? Map Set String TypedArray 函數(shù)的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}
let divList = document.querySelectorAll('div');
for(element of divlist){//可遍歷所有的div節(jié)點<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循環(huán)會遍歷一個object所有的可枚舉屬性。
?? for...of會遍歷具有iterator接口的數(shù)據(jù)結(jié)構(gòu)
for...in遍歷（當(dāng)前對象及其原型上的）每一個屬性名稱,而for...of遍歷（當(dāng)前對象上的）每一個屬性值
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}
