手写数组操作常见方法的polyfill

SimonMa 发布于2019-08-23 11:48 / 2059人阅读

摘要：前言在操作当中，前端开发人员对数组的操作特别频繁，随着每一次的发版，对于数组所提供的也会增多，以增强数组的操作能力。下面整理了一些在工作当中常用的数据操作方法的方便大家更好的掌握其原理。默认从数组的第二个元素开始。

前言:在JS操作当中，前端开发人员对数组的操作特别频繁，随着每一次ECMAScript的发版，对于数组所提供的API也会增多，以增强数组的操作能力。下面整理了一些在工作当中常用的数据操作方法的polyfill,方便大家更好的掌握其原理。

数组map和forEach方法 forEach方法的polyfill

Array.prototype.forEachFn = function(callback){
  for(var i = 0;i< this.length;i++){
    callback.call(this,this[i],i,this);
  }
};

var list = [1,2,4,8,10];
list.forEachFn(function(item,index,arr){
  return list[index] = item*2;
});  //无返回值

[2, 4, 8, 16, 20] //list

map方法的polyfill

Array.prototype.mapFn = function(callback){
var newArr = [];
 for(var i = 0;i< this.length;i++){
  newArr.push(callback.call(this,this[i],i,this));
 }
 return newArr;
}


 var list = [1,3,5,7,9];
 list.mapFn(function(item){
   return item*2;
 });     //执行完后返回一个新数组 [2, 6, 10, 14, 18]

再看看两者的执行速度：

可以看出forEach()的执行速度比map()慢了70%

相同点:
能用forEach()做到的，map()同样可以。反过来也是如此。

差异:

forEach没有返回值，但可在callback里改变原数组，map返回一个新数组，不改变原数组，可链式调用数组的其他方法。

map执行速度比forEach更快。

数组every和some方法 every方法的polyfill

Array.prototype.everyFn = function(callback){
  for(var i = 0;i{
 return item>3
}); //返回false

some方法的polyfill

Array.prototype.someFn = function(callback){
 for(var i = 0;iitem>4) //返回true

var list = [1,2,4,8,10];
list.someFn(item =>item>12) //返回false

方法区别
every() 每一项都返回true才返回true
some() 只要有一项返回true就返回true

数组reduce和reduceRight方法 reduce方法的polyfill

Array.prototype.reduceFn = function(callback,initValue){
  var preValue = initValue || this[0];
  for(var i = initValue ? 0 : 1; i
求和:
var list = [1,3,5,7,9];
list.reduceFn(function(prev,current,currentIndex,arr){
  return prev+current;
});  //返回25

求和+10:
var list = [1,3,5,7,9];
list.reduceFn(function(prev,current,currentIndex,arr){
  return prev+current;
},10); //返回35

reduceRight方法的polyfill
Array.prototype.reduceRightFn = function(callback,initValue){
  var lastIndex = this.length - 1;
  var preValue = initValue || this[lastIndex];
  console.log(preValue);
  for(var i = initValue ? 0 : 1; i
求和:
var list = [1,3,5,7,9];
list.reduceRightFn(function(prev,current,currentIndex,arr){
  return prev+current;
});  //返回25

求和+10:
var list = [1,3,5,7,9];
list.reduceRightFn(function(prev,current,currentIndex,arr){
  return prev+current;
},10); //返回35

数组reduce方法其作用是对数组进行归并操作，传递两个数组，第一个是callback,第二个参数可选（初始值）。其中回调函数 callback 接收4个参数：
1.previousValue - 存放的是上一次callback返回的结果，其初始值默认为数组的第一个元素。
 2.currentValue - 是当前元素 。默认从数组的第二个元素开始。
 3.currentIndex - 是当前元素位置 。         
 4.array - 是当前数组。
今天就整理这么多了，如果有时间，我会继续丰富本页面，以提供更全的资料供大家参考，如果喜欢我的文章，请Star!!!/::)

云服务器 GPU云服务器数组常见操作数组操作方法 js数组操作方法常见的数据分析方法

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

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

给初学者：JavaScript 中数组操作注意点

摘要：使用遍历数组有三点问题遍历顺序不固定引擎不保证对象的遍历顺序。作为原生函数，和自身操作字符串的速度是很快的。由于没有返回值返回，所以它的回调函数通常是包含副作用的，否则这个写了毫无意义。接受一个回调函数，你可以提前，相当于手写循环中的。不要用 for_in 遍历数组这是 JavaScript 初学者常见的误区。for_in 用于遍历对象中包括原型链上的所有可枚举的（enumerab...

tianyu 2019-08-22 11:20 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研...

罗志环 2019-08-23 17:08 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研发体系...

isaced 2019-05-21 19:50 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换文件优化代码分割模块合并 ...

SunZhaopeng 2019-05-23 17:29 评论0 收藏0
VueJS 开发常见问题集锦

摘要：由于公司的前端开始转向，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。查了一下，发现可能是打包或是资源引用问题，目前该问题还未被妥善处理，需要通过一些来解决这个问题。为解决这个问题，中提供了方法对象受现 showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端开始转向 VueJS，最近开始使用这...

hedge_hog 2019-08-20 18:07 评论0 收藏0