zoukankan      html  css  js  c++  java
  • js --- for in 和 for of

    前言:for of是ES6新增的循环方法。前面已经说到了 【JavaScript】for、forEach 、for in、each循环详解。那for of又是怎么使用的?

    一、使用例子

    使用例子(一)

    var arr = ['nick','freddy','mike','james'];
    for(var item of arr){    
        console.log(item);
    }

    输出结果:

    输出的是数组里面的值。

    二、使用例子(二)

    var arr = [
        { name:'nick', age:18 },
        { name:'freddy', age:24 },
        { name:'mike', age:26 },
        { name:'james', age:34 }
    ];
    for(var item of arr){    
        console.log(item.name,item.age);
    }

    输出结果:

     

    二、与for in 区别

    区别①:for of无法循环遍历对象

    var userMsg = {
        nick: {
            name: 'nick',
            age: 18,
            sex: ''    
        },
        freddy: {
            name: 'freddy',
            age: 24,
            sex: ''
        }    
    };
     
    for(var i1 in userMsg){
        console.log(i1);    
        for(var i2 in userMsg[i1]){
            console.log(i2+': '+userMsg[i1][i2]);
        }
    }
    console.log('-----------分割线-----------');
    for(var item of userMsg){    
        console.log(item);
    }

    输出结果:

    区别②:遍历输出结果不同

    var arr = ['nick','freddy','mike','james'];
    for(var i in arr){
        console.log(i);    
    }
    console.log('-----------分割线-----------');
    for(var item of arr){    
        console.log(item);
    }

    输入结果:

    不难看出,for in循环遍历的是数组的键值(索引),而for of循环遍历的是数组的值

    区别③:for in 遍历定义属性,for of不会

    var arr = ['nick','freddy','mike','james'];
    arr.name = "数组";
     
    for(var i in arr){
        console.log(i+': '+arr[i]);    
    }
    console.log('-----------分割线-----------');
    for(var item of arr){    
        console.log(item);
    }

    输入结果:

    给数组添加一个自定义属性name,并且赋值"数组"。然后进行遍历输出的,会发现新定义的属性也被for in输出来了,而for of并不会对name进行输出。

  • 相关阅读:
    WebStorm破解方法
    jQuery学习笔记2
    jquery.js 3.0报错, Uncaught TypeError: url.indexOf is not a function
    animate.css –齐全的CSS3动画库--- 学习笔记
    MySQL数据库---表的操作
    MySQL数据库---库的操作
    MySQL数据库---前言
    CppUnit使用和源码解析
    代码覆盖率检查
    代码Verify简介
  • 原文地址:https://www.cnblogs.com/yuerdong/p/9713422.html
Copyright © 2011-2022 走看看