zoukankan      html  css  js  c++  java
  • 【ES6】for of用法,与for in的区别

    for of  遍历数组内的元素,而不包括数组的原型属性method和索引name;

    数组用法:

    const arr = [1,2,3,2,5,1];
        for(let i of arr){
            console.log(i);//打印出来为value 1 2 3 2 5 1
        };
        for(let i in arr){
            console.log(i);//打印出来为下标0 1 2 3 4 5
        }

    对象用法:

    const obj={
          a:1,
          b:2,
          c:3
        }
        for(let i in obj){
            console.log(i);//打印出来为key a b c
        };
        for(let i of obj){
            console.log(i);//error obj is not iterable,在es6中object没有规定默认的属性
        }

    解决:object.keys()  获取指定对象中的属性名称 或 方法名称

    Object.keys()返回值说明:
    此方法返回一个数组,数组中包含键名称和方法名称

    const obj={
          a:1,
          b:2,
          c:3
        }
        for(let i of Object.keys(obj)){
            console.log(i);//打印出为a b c
        }

    JS数组遍历:

    1.普通for循环

    var arr = [1,2,0,3,9];
     for ( var i = 0; i <arr.length; i++){
        console.log(arr[i]);
    }

    2.优化版for循环

    使用变量,将长度缓存起来,避免重复获取长度,数组很大时优化效果明显

    for(var j = 0,len = arr.length; j < len; j++){
        console.log(arr[j]);
    }

    3.forEach

    ES5推出的,数组自带的循环,主要功能是遍历数组,实际性能比for还弱

    arr.forEach(function(value,i){
      console.log('forEach遍历:'+i+'--'+value);

    })

    forEach这种方法也有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。

    4.map遍历

    map即是 “映射”的意思 用法与 forEach 相似,同样不能使用break语句中断循环,也不能使用return语句返回到外层函数。

    arr.map(function(value,index){
        console.log('map遍历:'+index+'--'+value);
    });

    map遍历支持使用return语句,支持return返回值

    var temp=arr.map(function(val,index){
      console.log(val);  
      return val*val           
    })
    console.log(temp);  

    forEach、map都是ECMA5新增数组的方法,所以ie9以下的浏览器还不支持

    5.for-of遍历

    ES6新增功能

    for( let i of arr){
        console.log(i);
    }
    • for-of这个方法避开了for-in循环的所有缺陷
    • 与forEach()不同的是,它可以正确响应break、continue和return语句 

    for-of循环不仅支持数组,还支持大多数类数组对象,例如DOM NodeList对象。for-of循环也支持字符串遍历

    JS对象遍历:

    1.for-in遍历

    for-in是为遍历对象而设计的,不适用于遍历数组。(遍历数组的缺点:数组的下标index值是数字,for-in遍历的index值"0","1","2"等是字符串)

    for-in循环存在缺陷:循环会遍历对象自身的和继承的可枚举属性(不含Symbol属性)

    for (var index in arr){
        console.log(arr[index]);
        console.log(index);
    }

    2.使用Object.keys()遍历

    返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

    var obj = {'0':'a','1':'b','2':'c'};
    
    Object.keys(obj).forEach(function(key){
    
         console.log(key,obj[key]);
    
    });

    3.使用Object.getOwnPropertyNames(obj)遍历

    返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性). 

    Object.getOwnPropertyNames(obj).forEach(function(key){
    
        console.log(key,obj[key]);
    });

    4.使用Reflect.ownKeys(obj)遍历

    返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.  

    Reflect.ownKeys(obj).forEach(function(key){
    
      console.log(key,obj[key]);
    
    });
  • 相关阅读:
    【LeetCode】Validate Binary Search Tree
    【LeetCode】Search in Rotated Sorted Array II(转)
    【LeetCode】Search in Rotated Sorted Array
    【LeetCode】Set Matrix Zeroes
    【LeetCode】Sqrt(x) (转载)
    【LeetCode】Integer to Roman
    贪心算法
    【LeetCode】Best Time to Buy and Sell Stock III
    【LeetCode】Best Time to Buy and Sell Stock II
    CentOS 6 上安装 pip、setuptools
  • 原文地址:https://www.cnblogs.com/tianping-ondo/p/14669352.html
Copyright © 2011-2022 走看看