资讯专栏INFORMATION COLUMN

javascript之遍历数组及对象

Shihira / 563人阅读

摘要:可用于数组的遍历为遍历会遍历对象所有可枚举的属性,包括的,可通过来过滤,使得只有私有属性被遍历遍历用于遍历所有可遍历有属性的的数值用于数组遍历用于对象属性值遍历这里的对象必须是的遍历适合用来遍历数组,也可用于遍历数组,但是如果通过为原生对象

var arr = [18,20,26];
var obj = {name:"xiaohong",sex:"f",age:"18"};

for 可用于数组的遍历

for(var i=0;i

for in/for of 遍历

for in 会遍历对象所有可枚举的属性,包括prototype的,可通过hasOwnProperty()来过滤,使得只有私有属性被遍历

for(var key in obj){
    //遍历key
    if(obj.hasOwnProperty(key)){
        console.log(key+":"+obj[key]);
    }
}

for of 用于遍历所有可遍历(有Symbol.iterator属性)的collection的数值

//用于数组遍历
for(var val of arr){
    console.log(val); 
}


//用于对象属性值遍历,这里的对象必须是iterable的

 for(var val of obj){
        console.log(val); 
    }

or 

  for(var [key,val] of obj){
        //遍历key & value
        console.log(key+":"+val); 
  }
    

Note: for...of适合用来遍历数组,for…in也可用于遍历数组,但是如果通过Array.prototype.xxx为Array原生对象添加了属性,则会在该遍历中被读到。

foreach,map,filter,reduce 用于数组遍历

foreach 用于数组遍历,无返回值

arr.foreach(function(value,index,thisArray){
    //三个参数,分别为索引,值,当前array
    console.log(index+":"+value);
});

mapfilter会返回一个新的数组

var newArr = arr.map(function(value,index,thisArray){
    //三个参数,分别为索引,值,当前array
    return value*2;
});

var newArr = arr.filter(function(value,index,thisArray){
    //三个参数,分别为索引,值,当前array
    return value>100;    //根据return为false或true来决定是否留下当前元素
});

reduce会返回一个累加值

    var sum = arrreduce.reduce(function(previousValue, currentValue, currentIndex, thisArray) {
          return previousValue + currentValue;
    });
    
    

Note: 以上函数都可以用箭头函数书写,例如reduce:

  var sum = arrreduce.reduce((previousValue, currentValue) => previousValue + currentValue);

使用iterator进行遍历

主要是通过iterator的next()函数进行遍历,需要定义generator和[Symbol.iterator]属性。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91060.html

相关文章

  • js遍历for forEach in of

    摘要:语法参数当前遍历项。遍历的范围在第一次调用前就会确定。已删除的项不会被遍历到。的是由提出的,目的是作为遍历所有数据结构的统一方法。不仅可以遍历数组,还可以遍历结构,某些类似数组的对象如对象对象,对象,以及字符串。 即使是最简单的循环,其中也深藏学问 ECMAScript5(es5)有三种for循环 简单for for in forEach ECMAScript6(es6)新增 fo...

    yeyan1996 评论0 收藏0
  • 类的加载机制 - 收藏集 - 掘金

    摘要:是现在广泛流行的代从开始学习系列之向提交代码掘金读完本文大概需要分钟。为了进行高效的垃圾回收,虚拟机把堆内存划分成新生代老年代和永久代中无永久代,使用实现三块区域。 React Native 开源项目 - 仿美团客户端 (Android、iOS 双适配) - Android - 掘金推荐 React Native 学习好项目,仿照美团客户端... 极简 GitHub 上手教程 - 工具...

    Gilbertat 评论0 收藏0
  • JavaScript数组

    摘要:数组的特别之处在于,当使用小于的非负整数作为属性名时数组会自动维护其属性值。返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定的位置之间的所有数组元素。数组中只需有一项满足给定条件则返回。 概念 JavaScript数组是JavaScript对象的特殊形式。数组索引实际上和碰巧是整数的属性名差不多,使用方括号访问数组元素就像用方括号访问对象的属性一样。JavaScript将...

    coolpail 评论0 收藏0
  • 读 Zepto 源码操作 DOM

    摘要:辅助方法这个方法递归遍历的子节点,将节点交由回调函数处理。对集合进行遍历,调用方法,如果为函数,则将回调函数返回的结果作为参数传给否则,如果为,则将也即包裹元素的副本传给,否则直接将传给。 这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法。 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto...

    beita 评论0 收藏0

发表评论

0条评论

Shihira

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<