美文网首页FE
js的forEach,for in , for of

js的forEach,for in , for of

作者: 小焲 | 来源:发表于2017-08-18 12:27 被阅读131次

    传统的for循环

    for (var index = 0; index < myArray.length; index++) {
      console.log(myArray[index]);
    }
    

    forEach循环数组

    自从JavaScript5起,我们开始可以使用内置的forEach

    var myArry =[1,2,3,4];
    myArry.desc ='four';
    myArry.forEach((value,index,arr)=>{
      console.log(value);
     
    });
    //1
    //2
    //3
    //4
    

    句法

    arr .forEach(function callback(currentValue,index,array){
        //你的迭代器
    } [,thisArg ]);
    

    参数
    callback:执行每个元素的函数,采用三个参数:
    currentValue:在数组中正在处理的当前元素的值。
    index:在数组中正在处理的当前元素的索引。
    array:forEach()正在应用的数组 。

    缺点:forEach遍历数组,而不是遍历对象哦,而且在遍历的过程中不能被终止,必须每一个值遍历一遍后才能停下来,不能使用break语句或使用return语句。

    for-in循环

    循环遍历对象的key,是键值对前面的那一个

    var myArry =[1,2,3,4];
    myArry.desc ='four';
     for(var value in myArry){ //循环key
      console.log(value)
    }
    
    //"0"
    //"1"
    //"2"
    //"3"
    //"desc" 注意这里添加上去的属性也被遍历出来了
    

    缺点:一般不推荐遍历数组,因为for in遍历后的不能保证顺序,而且原型链上的属性也会被遍历到,因此一般常用来遍历非数组的对象并且使用hasOwnProperty()方法去过滤掉原型链上的属性

    for-of循环

    循环遍历对象的值,是遍历键值对后面的那一个value哦 ,与for in遍历key相反

    var myArry =[1,2,3,4];
    myArry.desc ='four';
    for(var value of myArry){
      console.log(value)
    }
    //1
    //2
    //3
    //4
    

    优点

    1. 这是最简洁、最直接的遍历数组元素的语法
    2. 这个方法避开了for-in循环的所有缺陷
    3. 与forEach()不同的是,它可以正确响应break、continue和return语句

    循环一个数组(Array):

    let iterable = [10, 20, 30];
    
    for (let value of iterable) {
      console.log(value);
    }
    // 10
    // 20
    // 30
    

    我们可以使用const来替代let,这样它就变成了在循环里的不可修改的静态变量。

    let iterable = [10, 20, 30];
    
    for (const value of iterable) {
      console.log(value);
    }
    // 10
    // 20
    // 30
    

    循环一个字符串:

    let iterable = "boo";
    
    for (let value of iterable) {
      console.log(value);
    }
    // "b"
    // "o"
    // "o"
    

    循环一个类型化的数组(TypedArray):

    let iterable = new Uint8Array([0x00, 0xff]);
    
    for (let value of iterable) {
      console.log(value);
    }
    // 0
    // 255
    

    循环一个Map:

    let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
    
    for (let [key, value] of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    
    for (let entry of iterable) {
      console.log(entry);
    }
    // [a, 1]
    // [b, 2]
    // [c, 3]
    

    循环一个 Set:

    let iterable = new Set([1, 1, 2, 2, 3, 3]);
    
    for (let value of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    

    循环一个 DOM collection

    // Note: This will only work in platforms that have
    // implemented NodeList.prototype[Symbol.iterator]
    let articleParagraphs = document.querySelectorAll("article > p");
    
    for (let paragraph of articleParagraphs) {
      paragraph.classList.add("read");
    }
    

    循环一个拥有enumerable属性的对象

    for–of循环并不能直接使用在普通的对象上,但如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()方法:

    for (var key of Object.keys(someObject)) {
      console.log(key + ": " + someObject[key]);
    }
    

    循环一个生成器(generators)

    function* fibonacci() { // a generator function
      let [prev, curr] = [0, 1];
      while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
      }
    }
    
    for (let n of fibonacci()) {
      console.log(n);
      // truncate the sequence at 1000
      if (n >= 1000) {
        break;
      }
    }
    

    参考资料:
    for in ,for-of,for-each联系与区别;
    js的forEach,for in , for of

    相关文章

      网友评论

        本文标题:js的forEach,for in , for of

        本文链接:https://www.haomeiwen.com/subject/scoorxtx.html