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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
javascript new fun的执行过程
Aug 05 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
js调用网络摄像头的方法
Dec 05 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 万年历实现代码
2012/10/18 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
ArrayList类(增强版)
2007/04/04 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
Node.js的进程管理的深入理解
2019/01/09 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
班主任班级寄语大全
2014/04/04 职场文书
党员志愿者活动方案
2014/08/28 职场文书
党校学习党性分析材料
2014/12/19 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
工作自我评价范文
2019/03/21 职场文书