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

网络编程 2024/12/26 佚名

3 2 1

前言

在开发过程中，我们常常使用数组的一些 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 "htmlcode">

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;
}



最后

js,数组,常用函数,js数组排序的一些函数,js,数组函数

标签：

js,数组,常用函数,js数组排序的一些函数,js,数组函数

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JavaScript手写数组的常用函数总结”

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

暂无“JavaScript手写数组的常用函数总结”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年12月26日

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

前言

参数说明

forEach 函数

filter 函数

find 函数

findIndex 函数

fill函数

some 函数

every 函数

reduce 函数

reduceRight 函数

最后

js,数组,常用函数,js数组排序的一些函数,js,数组函数

Node.js文本文件BOM头的去除方法

JavaScript实现点击图片换背景

评论“JavaScript手写数组的常用函数总结”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接