一、一般的遍曆數組的方法: ~~~ var array = [1,2,3,4,5,6,7]; for (var i = 0; i { console.log(v); }); array.forEach（function(v){ console.log(v); }); ~~~ 四、 用for in不僅 ...
一、一般的遍曆數組的方法:
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);
};
let s = "helloabc";
for(let c of s) {
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
}文章來自：https://www.cnblogs.com/amujoe/p/8875053.html
