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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
ES6 Map结构的应用实例分析
Jun 26 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采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
c/c++某大公司的两道笔试题
2014/02/02 面试题
函授毕业生的自我鉴定
2013/11/26 职场文书
优秀教师获奖感言
2014/01/31 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
2014年环保工作总结
2014/11/26 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
党支部工作总结2015
2015/04/01 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
python实现批量移动文件
2021/04/05 Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python