JavaScript手写数组的常用函数总结


Posted in Javascript onNovember 22, 2020

前言

在开发过程中,我们常常使用数组的一些 api 相关操作,其中包含 forEach 、 filter 、 find 、 findIndex 、 map 、 some 、 every 、 reduce 、 reduceRight 等函数方法。

今天,我们试试手写这些函数,实现数组这些函数方法。为了方便,直接在数组原型对象 prototype 上扩展。

本文 Githab 已上传,更多往期文章已分类整理。

正文

参数说明

callbackFn 回调函数

thisArg 执行 callbackFn 时使用的 this 值

currentValue 数组中正在处理的元素

index 当前索引

array 源数组

accumulator 累加器

initialValue reduce reduceRight 第一次调用 callbackFn 函数时的第一个参数的值默认值

element 自己实现的 this 对象

forEach 函数

语法: arr.forEach(callbackFn(currentValue [, index [, array]])[, thisArg])

方法功能: 对数组的每个元素执行一次给定的函数。

返回:undefined。

自定义函数:myForEach。

Array.prototype.myForEach = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn参数必须是函数');
 let element = this,
 len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 callbackFn.call(thisArg, element[index], index, element);
 }
};

filter 函数

语法: var newArray = arr.filter(callbackFn(currentValue[, index[, array]])[, thisArg])

方法功能: 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

返回:一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。

自定义函数:myFilter。

Array.prototype.myFilter = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn参数必须是函数');
 let element = this,
 len = element && element.length || 0,
 result = [];
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg, element[index], index, element)) result.push(element[index]);
 }
 return result;
};

find 函数

语法: arr.find(callbackFn[, thisArg])

方法功能: 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

返回:数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。

自定义函数:myFind。

Array.prototype.myFind = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn参数必须是函数');
 let element = this,
 len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg, element[index], index, element)) {
  return element[index];
 }
 }
 return
}

findIndex 函数

语法: arr.findIndex(callbackFn[, thisArg])

方法功能: 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

返回:数组中通过提供测试函数的第一个元素的索引。否则,返回-1。

自定义函数:myFindIndex。

Array.prototype.myFindIndex = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn参数必须是函数');
 let element = this,
 len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg, element[index], index, element)) return index;
 }
 return -1;
}

fill函数

语法: arr.fill(value[, start[, end]])

方法功能: 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

返回:返回替换的值,原数组发生改变。

自定义函数:myFill。

Array.prototype.myFill = function(value, start = 0, end) {
 let element = this,
 len = element && element.length || 0;
 end = end || len;
 let loopStart = start < 0 ? 0 : start, // 设置循环开始值
 loopEnd = end >= len ? len : end; // 设置循环结束值

 for (; loopStart < loopEnd; loopStart++) {
 element[loopStart] = value;
 }
 return element;
}

map 函数

语法: var new_array = arr.map(function callbackFn(currentValue[, index[, array]]) {// Return element for new_array }[, thisArg])

方法功能: 创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

返回:测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。 一个由原数组每个元素执行回调函数的结果组成的新数组。

自定义函数:myMap。

Array.prototype.myMap = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn参数必须是函数');
 let element = this,
 len = element && element.length || 0,
 result = [];
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 result[index] = callbackFn.call(thisArg, element[index], index, element);
 }
 return result;
}

some 函数

语法: arr.some(callbackFn(currentValue[, index[, array]])[, thisArg])

方法功能: 测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

返回:数组中有至少一个元素通过回调函数的测试就会返回true;所有元素都没有通过回调函数的测试返回值才会为false。

自定义函数:mySome。

Array.prototype.mySome = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn参数必须是函数');
 let element = this,
 len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg, element[index], index, element)) return true;
 }
 return false;
}

every 函数

语法: arr.every(callbackFn(currentValue[, index[, array]])[, thisArg])

方法功能 :测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

返回:如果回调函数的每一次返回都为 true 值,返回 true,否则返回 false。

自定义函数:myEvery。

Array.prototype.myEvery = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn参数必须是函数');
 let element = this,
  len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for(let index = 0; index < len; index++) {
  if (!callbackFn.call(thisArg, element[index], index, element)) return false;
 }
 return true;
}

reduce 函数

语法: arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

方法功能: 对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

返回:函数累计处理的结果。

自定义函数:myReduce。

Array.prototype.myReduce = function(callbackFn, initialValue) {
 if (typeof callbackFn !== 'function') throw ('callbackFn参数必须是函数');
 let element = this,
  len = element.length || 0,
  index = 0,
  result;
 if (arguments.length >= 2) {
  result = arguments[1];
 } else {
  while (index < len && !(index in element)) index++;
  if (index >= len) throw new TypeError('Reduce of empty array ' + 'with no initial value');
  result = element[index++];
 }

 while (index < len) {
  if (index in element) result = callbackFn(result, element[index], index, element);
  index++;
 }
 return result;
}

reduceRight 函数

语法: arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

方法功能: 接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

返回:执行之后的返回值。

自定义函数:myReduceRight。

Array.prototype.myReduceRight = function(callbackFn, initialValue) {
 if (typeof callbackFn !== 'function') throw ('callbackFn参数必须是函数');
 let element = this,
  len = element.length || 0,
  index = len - 1,
  result;
 if (arguments.length >= 2) {
  result = arguments[1];
 } else {
  while (index >= 0 && !(index in element)) {
   index--;
  }
  if (index < 0) {
   throw new TypeError('reduceRight of empty array with no initial value');
  }
  result = element[index--];
 }
 for (; index >= 0; index--) {
  if (index in element) {
   result = callbackFn(result, element[index], index, element);
  }
 }
 return result;
}

最后

到此这篇关于JavaScript手写数组常用函数总结的文章就介绍到这了,更多相关JS手写数组常用函数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
使用js显示当前时间示例
Mar 02 Javascript
JS实现div居中示例
Apr 17 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
JavaScript实现点击图片换背景
Nov 20 #Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 #Javascript
JavaScript实现复选框全选和取消全选
Nov 20 #Javascript
JavaScript实现网页下拉菜单效果
Nov 20 #Javascript
JavaScript实现网页tab栏效果制作
Nov 20 #Javascript
原生js实现弹窗消息动画
Nov 20 #Javascript
js实现限定区域范围拖拉拽效果
Nov 20 #Javascript
You might like
php实现jQuery扩展函数
2009/10/30 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
php远程下载类分享
2016/04/13 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python3基础之函数用法
2014/08/13 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python File readlines() 使用方法
2018/03/19 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
python用700行代码实现http客户端
2021/01/14 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
深圳茁壮笔试题
2015/05/28 面试题
2014年三八妇女节活动总结
2014/03/01 职场文书
党员服务承诺书
2014/05/28 职场文书
网络营销计划
2015/01/17 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android