资讯专栏INFORMATION COLUMN

ES5和ES6数组遍历方法详解

GitChat / 3249人阅读

摘要:和数组遍历方法详解在中常用的种数组遍历方法原始的循环语句数组对象内置方法数组对象内置方法数组对象内置方法数组对象内置方法数组对象内置方法数组对象内置方法数组对象内置方法数组对象内置方法循环语句中新增加了一种循环语句三种数组循环示例如下原始循

ES5和ES6数组遍历方法详解 在ES5中常用的10种数组遍历方法:
1、原始的for循环语句
2、Array.prototype.forEach数组对象内置方法
3、Array.prototype.map数组对象内置方法
4、Array.prototype.filter数组对象内置方法
5、Array.prototype.reduce数组对象内置方法
6、Array.prototype.some数组对象内置方法
7、Array.prototype.every数组对象内置方法
8、Array.prototype.indexOf数组对象内置方法
9、Array.prototype.lastIndexOf数组对象内置方法
10、for...in循环语句
ES6中新增加了一种:
1.for...of循环语句
ES5三种数组循环示例如下: 原始for循环语句

Example1

var a = [1,2,3];
for(var i=0;i

代码解读:原始for循环的优点在于大家都比较熟悉,容易理解,劣势是写起来比较繁琐,需要定义额外更多的变量,所以一下是针对于原始for循环的改良的两种写法:
Example1:写法改良版

var a = [1,2,3];
for(var i=a.length;i--;){
    console.log(a[i]);  //结果依次为3,2,1
}

Example2:性能改良版

var a = [1,2,3];
for(var i = 0,len=a.length; i < len; i++) {
   console.log(a[i]);  //结果依次为1,2,3
}

注意:以上代码可以写成这样呢,如果懵逼了的话接着看原始for循环的解读,我们都知道for循环包含三个语句块——>for(语句1;语句2;语句3){被执行的代码},其中,语句1一般为变量定义语句(不仅可以只定义一个变量哦),在循环开始前执行,而且只执行一次语句2定义循环的是否继续执行的条件,同样也是在循环开始前执行,语句1之后执行,每次重新开始循环都会再次执行语句3则在循环结束之后执行,并且每次结束的时候都会再次执行,这里要注意的是如果被执行的代码中途return出来了那是不会再执行一次语句3的,所以以上代码解释如下:因为i--这个语句在每次循环开始前都会再次先用 i 是true和false来判断是否继续执行,这里同样要注意的是由于i----i的区别,这里由于是i--所以会先判断i的值再去做‘减减’的操作,所以这里最后如果打印 i 的值,会发现其实是-1

数组内置方法Array.prototype.forEach

Example

var a = [1,2,3];
a.forEach(function(value,key,arr){
  console.log(value)    // 结果依次为1,2,3
  console.log(key)      // 结尾依次为0,1,2
  console.log(arr)      // 三次结果都为[1,2,3],该参数貌似没什么用
})

代码解读:forEach方法最大的好处就是便于使用,而且不用定义额外的参数变量,但是从效率以及性能角度来说它是劣于原始for循环的,而且也不能强制return结束循环,原因如下:

**forEach循环**一看就是通过**回调函数**来提供参数的,而回调函数在JS中是**闭包**的一种,闭包的作用是用来生成**私有作用域**的,所以,每一个回调函数都是一个**独立的作用域**,都拥有自己独立的存储空间,互不影响,而且内部变量还不及时释放,这也就是为什么在能不用闭包的情况下就不要用闭包的原因,而在闭包中return的话,也只是在当前回调函数中返回了,可是forEach中的其他的回调函数(闭包)仍然存在,所以,导致return是没办法结束循环的。下面写一个forEach循环实现例子供大家参考理解:

Example

Array.prototype.forEachCopy = function(callback){
    var arr =  this;
    for(var i=0;i
数组内置方法Array.prototype.map

Example

var a = [1,2,3];
var b = a.map(function(value,key,arr){
    console.log(value)    // 结果依次为1,2,3
    console.log(key)      // 结尾依次为0,1,2
    console.log(arr)      // 三次结果都为[1,2,3]
    return value+1;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 2, 3, 4 ]

代码解读:map和forEach不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,并且最终会返回一个新的被改变过值之后的数组(map如果不用return就和forEach一样了),由于这个特性,map一般用来处理需要修改某一个数组的值。map和forEach在其他的方面都是一样的,也不能return结束循环等特性,下面写一个map循环实现的例子供大家参考理解:
Example

Array.prototype.mapCopy = function(callback){
    var arr =  this;
    var arrCopy = [];
    for(var i=0;i
数组内置方法Array.prototype.filter

Example

var a = [1,2,3];
var b = a.filter(function(value,key,arr){
    console.log(value)    // 结果依次为1,2,3
    console.log(key)      // 结尾依次为0,1,2
    console.log(arr)      // 三次结果都为[1,2,3]
    if(value === 3){
      return false;
    }
    return true;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 1,2 ]

代码解读:filter和map不同,map目的是为了改变值,而filter目的是为了去掉不要的值,在循环的时候如果返回的是false那么就表示本次循环的不添加该值,返回true则相反是表示要添加到新建的数组中,下面写一个filter循环实现例子供大家参考:
Example

Array.prototype.filterCopy = function(callback){
    var arr =  this;
    var arrCopy = [];
    for(var i=0;i
数组内置方法Array.prototype.reduce

Example

var a = [1,2,3];
var b = a.reduce(function (count, value,key,arry) {
  console.log(count);   // 结果依次为0,1,3
  console.log(value);   // 结果依次为1,2,3
  console.log(key);     // 结果依次为0,1,2
  console.log(arry)     // 三次结果都为[1,2,3]
  return count + value;
},0);
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b)          // 结果为6

代码解读:reduce的不同之处在于累加,和其他几个内置方法不同的地方,它的第二个参数不是this对象,而是初始累加值(如果不设置的话数组会乱掉),而且回调函数的的个数也不同,比其他的多了一个,而且还在在开始的多加了一个参数,第一个参数记录的是上一次循环的累加值,下面写一个reduce循环实现例子供大家参考:
Example

Array.prototype.reduceCopy = function(callback,countInit){
    var arr =  this;
    for(var i=0;i
数组内置方法Array.prototype.some

Example

var a = [1,2,3];
var b = a.some(function(value,key,arry){
  console.log(value);   // 结果依次为1,2
  console.log(key);     // 结果依次为0,1
  console.log(arry);    // 两次次结果都为[1,2,3]
  return value===2;
})
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为true

代码解读:some的不同之处在它返回的布尔值,它的作用有点像filter,不过它的目的不是为了筛选返回数组,而是为了筛选该数组是否有满足你要的值,而且找到符合条件的值返回了一次true之后就不会再继续执行了,下面写一个some循环实现例子供大家参考:

Example

Array.prototype.someCopy = function(callback,countInit){
    var arr =  this;
    var isBool = false;
    for(var i=0;i
数组内置方法Array.prototype.every

Example

var a = [1,2,3];
var b = a.every(function(value,key,arry){
  console.log(value);   // 结果依次为1,2
  console.log(key);     // 结果依次为0,1
  console.log(arry);    // 两次次结果都为[1,2,3]
  return value===2;
})
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为false

代码解读:其实从看例子可以看出来,some和every作用是一样的,只不过some当找到之后返回的是true,而every找到之后返回的是false而已,下面写一个every循环实现例子供大家参考:

Example

Array.prototype.everyCopy = function(callback){
    var arr =  this;
    var isBool = true;
    for(var i=0;i
数组内置方法Array.prototype.indexOf

Example

var a = [1,2,3];
var b = a.indexOf(2);
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为1

代码解读:对于indexOf方法来说,在数组循环过程中会和传入的参数比对,如果是比对成功,那么终止循环,返回对比成功的下标,下面写一个indexOf循环实现例子供大家参考:

Example

Array.prototype.indexOfCopy = function(value){
    var arr =  this;
    var index = -1;
    for(var i=0;i
数组内置方法Array.prototype.lastIndexOf

Example

var a = [1,2,3,1];
var b = a.lastIndexOf(1);
console.log(a);         // 结果为[ 1, 2, 3, 1 ]
console.log(b);         // 结果为1

代码解读:lastIndexOf方法和indexOf作用一致,但查找方向不同,indexOf是正向查找,lastIndexOf是你像查找,找到之后返回成功的下标,下面写一个lastIndexOf循环实现例子供大家参考:

Example

Array.prototype.lastIndexOf = function(value){
    var arr =  this;
    var index = -1;
    for(var i=arr.length;i--;){
        if(arr[i] === value){
          index = i;
          return index
        }
    }
    return index;
}
var a = [1,2,3,1];
var b = a.lastIndexOf(1);
console.log(a);         // 结果为[ 1, 2, 3 , 1 ]
console.log(b);         // 结果为3
小结:对于以上8个数组的内置方法,forEach方法仅仅只是为了循环,并不可以帮你做额外的事情;map方法相当于在循环的时候你告诉数组当前遍历的这个值需要改成什么样,那么它就会最后给什么样的数组;filter方法相当于在循环的时候数组遍历一个个对象,并问你这个是不是你要找的值,如果你说是,他就会给你返回一个到新的数组中,不是他就会剔除;reduce方法相当于循环遍历对象做统计(累加或者累减之类的);some和every方法相当于在遍历的时候拿着一个个对象问你这个是不是你找的,只要你说了一遍是,那么他就会给你分别返回的是true和false;indexOf和lastIndexOf方法相当于你告诉它你要找什么值,找到之后立马返回给你它的门牌号。
循环语句for...in

Example

var a = [1,2,3];
for(var key in a){
  console.log(key); //结果为依次为0,1,2
}
var b = {0:1,1:2,2:3};
for(var key in b){
  console.log(key); //结果为依次为0,1,2
}

代码解读:从结果得知,for...in遍历数组的时候是遍历数组的下标值,而在遍历对象的时候遍历的是key值,所以猜想,数组在JS中,本质上也是一个以键值对形式存在的对象,而为了证明这点,我们做如下一个例子的实验:

var a = [];
a["b"] = 2;
console.log(a);     //结果为[ b: 2 ]
console.log(a[0]);  //结果为undefined

我们发现数组的下标不在对应相应位置的值了,由此可以证明在JS中数组其实本质上就是一个以下标为key值的对象。
当然对于for...in循环语句本身而言,它是一个浅度遍历对象的循环语句,值遍历第一层节点(当然对象中设置不可枚举的属性的除外)。
Example

var a = {b:{c:2},d:{c:4}};
for(var key in a){
  console.log(key); //结果为依次为b,d
}
ES6循环for...of语句

Example

var a = [1,2,3];
for(var value of a){
  console.log(value)  // 结果依次为1,2,3
}

代码解读:for...of语句看着有点像for...in语句,但是和for...in语句不同的是它不可以循环对象,只能循环数组。

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

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

相关文章

  • 深入理解ES6(四)( 数组的扩展)

    摘要:例如,会删除数组中的前两项。插入的项数不必与删除的项数相等。对数组进行遍历循环,对数组中的每一项运行给定函数。判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回。 深入理解ECMA2015(四) —— 数组的扩展 一、JavaScript数组详解回顾(ES6之前) (1)数组的创建 使用 Array 构造函数: var arr1 = new Array(); //创建一个...

    big_cat 评论0 收藏0
  • 深入理解ES6(四)( 数组的扩展)

    摘要:例如,会删除数组中的前两项。插入的项数不必与删除的项数相等。对数组进行遍历循环,对数组中的每一项运行给定函数。判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回。 深入理解ECMA2015(四) —— 数组的扩展 一、JavaScript数组详解回顾(ES6之前) (1)数组的创建 使用 Array 构造函数: var arr1 = new Array(); //创建一个...

    melody_lql 评论0 收藏0
  • JavaScript中数组排序深度讲解

    摘要:结果为依次为循环语句结果依次为,,代码解读语句看着有点像语句,但是和语句不同的是它不可以循环对象,只能循环数组。 ES5和ES6数组遍历方法详解 在ES5中常用的10种数组遍历方法: 1、原始的for循环语句2、Array.prototype.forEach数组对象内置方法3、Array.prototype.map数组对象内置方法4、Array.prototype.filter数组对象...

    xbynet 评论0 收藏0
  • 温故js系列(16)-数组&数组方法使用详解

    摘要:创建数组数组字面量数组构造函数参数为数组建议使用数组字面量方式,性能好,代码少,简洁,毕竟代码少。数组判断方法用来判断某个值是否为。的这是最简洁最直接的遍历数组元素的语法。把数组转换为本地数组,并返回结果。 前端学习:前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:数组&数组方法使用详解 Array对象 之前一...

    morgan 评论0 收藏0
  • es6 -- 默认参数Default,不定参数Rest,扩展运算符Spread详解

    摘要:将数组中的每个元素展开为函数参数扩展运算符取代方法的一个实际的例子,应用方法,简化求出一个数组最大元素的写法。 欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 记录一下在实际开发中,很有用的三个es6的新方法 用法详解 默认参数 function f(x, y=13) { // 如果没有传入y或传入了undefined,y的默认值为13 retur...

    Betta 评论0 收藏0

发表评论

0条评论

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