用foreach求数组之和_关于JavaScript原生数组的一些方法的封装（3）

前言：

    很感谢您在百忙中抽空看一眼我的文章，希望在接下来的文章中能给您带来一点点收获，这将是我最大的荣幸，若有写的不好的地方，希望可以得到您的一些建议和指导。

L_1_0:

    在JavaScript中，对数组的数据类型是使用的非常多的。无论是小demo还是大型项目，基本上都可以看到数组的身影。对于JavaScript原生给我们提供了很多封装好的方法，使用起来很简单，有小伙伴好奇过这些方法底层的实现原理吗？

L_1_1:

    今天给大家带来的是数组的 forEach()遍历，includes()查找元素，indexOf()查找元素，lastIndexOf()查找元素，今天分享的大多数都是关于查找，因为在平常工作中，必不可少的就是查找元素了，根据不同的需要，JavaScript也提供数组很多种查询元素的方式，接下来一一介绍每一个查询方法的使用和封装。

L_2_0:

    forEach:是一个ES6新推出的一种数组遍历方法，比原生的for循环使用起来会相对简单一点，参数灵活一点。

/*  数组方法封装之forEach()  语法：array.forEach(callback)  思路：    这个方法就是对数组进行遍历，返回值是undefined    平时使用的最多的情况就是需要对数组进行遍历的时候    不会像以前一样用for循环来做，现在可以直接调用    forEach方法，就可以很方便的调用了。接受一个回调    函数，回调函数接受三个参数    参数1：数组中的每一项    参数2：每一项的索引    参数3：数组本身  这个forEach是接受两个参数的第一个回调函数第二个是  一个thisValue，可选。传递给函数的值一般用 "this" 值。  如果这个参数为空， "undefined" 会传递给 "this" 值。  我基本没用过，所以封装的时候没有考虑它*/ //给数组的原型上添加一个forEach2方法 Array.prototype.forEach2 = function(callback){   //直接使用原生for循环调用回调函数就可以了   for(let i = 0,len = this.length;i < len;i++){     callback(this[i],i,this)   }   //返回值   return undefined } let arr = [1,2,3,4]; arr.forEach2((item,i,arr)=>{   console.log(item,i,arr) })

结果：

L_2_1:

    includes:是一个查询的方法，接受两个参数，第一个是需要查询的值，第二个是起始索引，如果在数组中查到该查询的值，返回true，没有返回false。

/*  数组方法封装之includes()  语法：array.includes("二哥",0)  思路：    这个方法是一个查询的方法，目的呢就是查找这个数组里    是否存在这个查找的元素，如果有，就返回true，没有就    返回false。接受两个参数    参数1：查找内容(必选)    参数2：查找起始索引 (可选)默认 0*///给数组的原型上添加一个includes2方法Array.prototype.includes2 = function(queryValue,startIndex = 0){  //定义一个返回值  let res = false;  //第一个参数必填，所以先判断一下第一个参数是否存在  if(!queryValue) return res  //判断一下起始索引是否合法  startIndex = Number(startIndex) ? startIndex * 1 > this.length ? this.length : startIndex * 1 :0;  //用for循环遍历数组，然后进行比对  for( let i = startIndex,len = this.length; i < len ;i++){    //判断是否相等    if( queryValue === this[i] ){      //更新返回值      res = true;      //如果匹配成功了，直接终止循环      break;    }  }  //返回结果  return res}  let arr = [1,2,3,1,4]; console.log(arr.includes2(1,2))

结果：

L_2_2:

    indexOf:也是一个查找的方法，跟上面的includes是在使用上完全一样，只是返回值不同，includes是返回布尔值，indexOf是直接返回查找到的元素所在的索引位置。

/*  数组方法封装之indexOf()  语法：array.indexOf("二哥",0)  思路：    由于这个方法跟includes是一样的使用方式    区别是返回值不同，查找成功返回对应索引，    查询不到返回-1.只需要修改一下返回值就行*///给数组的原型上添加一个indexOf2方法Array.prototype.indexOf2 = function(queryValue,startIndex){  //定义一个返回值  let res = -1;  //第一个参数必填，所以先判断一下第一个参数是否存在  if(!queryValue) return res  //判断一下起始索引是否合法  startIndex = Number(startIndex) ? startIndex * 1 > this.length ? this.length : startIndex * 1 :0;  //用for循环遍历数组，然后进行比对  for( let i = startIndex,len = this.length; i < len ;i++){    //判断是否相等    if( queryValue === this[i] ){      //更新返回值      res = i;      //如果匹配成功了，直接终止循环      break;    }  }  //返回结果  return res}let arr = [1,2,3,'二哥',1,4];console.log(arr.indexOf2('二哥',2))

结果：

L_2_3:

    lastIndexOf:使用方法和上面二者相似，因为这方法不是从第一个往最后一个匹配，而是从最后一个往前匹配。

/*  数组方法封装之lastIndexOf()  语法：array.lastIndexOf("二哥",4)  思路：    这个方法和indexOf类似，只是查询时，从后往前    返回值和参数都是一样的*///给数组的原型上添加一个lastIndexOf2方法Array.prototype.lastIndexOf2 = function(queryValue,startIndex){  //定义返回值  let res = -1;  //第一个参数必填，所以先判断一下第一个参数是否存在  if(!queryValue) return res  //判断一下起始索引是否合法  startIndex = Number(startIndex) ? startIndex * 1 > this.length ? this.length : startIndex * 1 < 0 ? this.length + startIndex * 1:startIndex * 1 : this.length;  //用for循环来匹配  for( let i = startIndex ; i >= 0 ;i-- ){    //匹配查找值    if(queryValue === this[i]){      //修改返回值      res = i;      //终止循环      break;    }  }  //返回结果  return res  }let arr = [1,2,3,'二哥',1,4];console.log(arr.lastIndexOf2('二哥',10))

结果：

L_3_0:

    以上就是今天的四种数组方法的封装的分享，关于封装方法，每个人都有自己不同的想法，没有标准答案，如果您有更好的方法，想法，希望可以得到您的指点，随时联系我 微信号：Accompany_life520 

 L_3_1: 

    每日鸡汤：少有所长，壮有所用，老有所养。

L_3_2:

    今天分享就结束了，希望可以给您带来一点点收获，如果有更多更好更有趣的想法希望您可以通过微信告诉我，我会非常非常感谢您。

                                                                                二哥祝您生活愉快