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

网络编程 2024/12/22 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

前言

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

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

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

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

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

前言

参数说明

forEach 函数

filter 函数

find 函数

findIndex 函数

fill函数

some 函数

every 函数

reduce 函数

reduceRight 函数

最后

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

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

JavaScript实现点击图片换背景

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接