js中forEach，for in，for of循环的用法

时间 2019-11-08 标签 js 中 foreach 循环用法

from:http://www.noobyard.com/article/p-eiftijpz-br.htmljavascript

1、通常的遍历数组的方法:html

    var array = [1,2,3,4,5,6,7];  
    for (var i = 0; i < array.length; i) {  
        console.log(i,array[i]);  
    }

2、用for in的方遍历数组java

    for(let index in array) {  
        console.log(index,array[index]);  
    };

3、forEachnode

array.forEach(v=>{  
    console.log(v);  
});

array.forEach（function(v){  
    console.log(v);  
});

4、用for in不只能够对数组,也能够对enumerable对象操做es6

var A = {a:1,b:2,c:3,d:"hello world"};  
for(let k in A) {  
    console.log(k,A[k]);  
}

5、在ES6中,增长了一个for of循环,使用起来很简单数组

    for(let v of array) {  
        console.log(v);  
    };

let s = "helloabc"; 数据结构

for(let c of s) { 函数

console.log(c); this

}spa

总结来讲: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
}