一、一般的遍歷數(shù)組的方法:
vararray = [1,2,3,4,5,6,7];?
? ? for(vari = 0; i < array.length; i) {?
? ? ? ? console.log(i,array[i]);?
? ? }?
二、用for in的方遍歷數(shù)組
for(let indexin array) {?
? ? ? ? console.log(index,array[index]);?
? ? };?
三、forEach
array.forEach(v=>{? ? ? console.log(v);? });
array.forEach（function(v){?
? ? console.log(v);?
});
四、用for in不僅可以對數(shù)組,也可以對enumerable對象操作
varA = {a:1,b:2,c:3,d:"hello world"};? for(let kin 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上面
varset =new Set();?
? ? set.add("a").add("b").add("d").add("c");?
? ? varmap =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為遍歷的當前元素，index為當前索引，array為正在操作的數(shù)組
//do something
},thisArg)? //thisArg為執(zhí)行回調(diào)時的this值
不同點：
? forEach()?方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。總是返回undefined；
? map() 方法創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果。返回值是一個新的數(shù)組；
? 例子如下：
var array1 = [1,2,3,4,5];
var x = array1.forEach(function(value,index){
? ? console.log(value);? //可遍歷到所有數(shù)組元素
? ? return value + 10
});
console.log(x);? //undefined? ? 無論怎樣，總返回undefined
var y = array1.map(function(value,index){
? ? console.log(value);? //可遍歷到所有數(shù)組元素
? ? return value + 10
});
console.log(y);? //[11, 12, 13, 14, 15]? 返回一個新的數(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){
? 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ù)組遍歷不一定按次序訪問元素。?因此當?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(variable? in array2){? //variable? 為 index
? console.log(variable )? //0 1 2
}
for(variable? in obj1){? //variable 為屬性名
? console.log(variable)? //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遍歷（當前對象及其原型上的）每一個屬性名稱,而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
}
