美文网首页
javascript 遍历数组/对象

javascript 遍历数组/对象

作者: meng_281e | 来源:发表于2018-07-20 18:56 被阅读0次

    for 循环遍历

     let array1 = ['a','b','c']; 
     for (let i = 0;i < array1.length;i++){  
        console.log(array1[i]); 
     }
     // a  b  c 
    

    foreach() 和map()

    Array.forEach(function(value , index , array){ 
    //value为遍历的当前元素,index为当前索引,array为正在操作的数组`
    //do something
    },this) 
    //this为执行回调时的this值
    Array.map(function(currentValue,index,arr){
    //value为遍历的当前元素,index为当前索引,array为正在操作的数组`
    //do something
    }, thisValue)
    

    不同点:
    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]   返回一个新的数组
    

    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

    let array2 = ['a','b','c']
    for(variable  of array2){ 
    //variable  为 value
    console.log(variable )  //'a','b','c'
    }
    let divList = document.querySelectorAll('div');
    for(element of divlist){  
    //可遍历所有的div节点
     //do something 
    }
    

    如何让普通对象可以用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
     }

    相关文章

      网友评论

          本文标题:javascript 遍历数组/对象

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