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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
JS检测图片大小的实例
Aug 21 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
vuejs指令详解
Feb 07 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
js中有关IE版本检测
2012/01/04 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
单链表反转python实现代码示例
2018/02/08 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python 下载及安装详细步骤
2019/11/04 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
浙江文明网签名寄语
2014/01/18 职场文书
邀请函怎么写
2015/01/30 职场文书
同学毕业留言寄语
2015/02/27 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
7个关于Python的经典基础案例
2021/11/07 Python
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js