javascript实现常用数组方法实现

已于 2022-08-12 22:00:27 修改
阅读量248 收藏 2
点赞数
分类专栏： javaScript实战篇 文章标签： javascript
于 2022-07-26 23:46:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44472790/article/details/126005376
版权

1.Array.prototype.map实现

const arr = [1, 22, 66, 77];
//先看看内置方法map怎么实现
// const res = arr.map((item, index) => {
//     console.log(item); // 运行结果 1 22 66 77
//     return item + index;
// },100);
// console.log(res);

/* 
运行结果：[1, 23, 68, 80]
*/

// 根据map的用法 我们来实现一个map 为了和内置的map命名不冲突 我们把名字叫做arrayMap
// 1.map的基本实现
Array.prototype.arrayMap = function (fn) {
  // arrayMap被调用返回的结果
  let arr = [],
    index = 0;

  while (index < this.length) {
    // 每次都调用fn函数 并且将每一项数组和下标传给fn函数
    const result = fn(this[index], index);
    // 如果fn有返回值 则将fn的返回值push到arr数组
    if (result) {
      arr.push(result);
    }
    index++;
  }
  // 将arr每次的fn的返回值 return出去
  return arr;
};

// 测试我们的arrayMap方法
const res1 = arr.arrayMap((item, index) => {
  return item + index;
});
console.log(res1, 'arrayMap');
/* 
运行结果：[1, 23, 68, 80] arrayMap
*/

2.实现Array.prototype.filter

/* ----------------------------------------------------- */
Array.prototype.arrayfilter = function (fn) {
  const that = arguments[1] || window,
    newArr = [];
  let index = 0;

  while (index < this.length) {
    // this[i], i, this 分别对应三个参数 item-每一项数组 i=下标 this-调用数组
    const result = fn.call(that, this[index], index, this);
    if (result) {
      newArr.push(this[index]);
    }
    index++;
  }
  return newArr;
};

const res2 = arr.arrayfilter((item, index, arr) => item > 10);
console.log(res2, 'arrayfilter'); // [22, 66, 77]

3.实现Array.prototype.forEach

Array.prototype.arrayforEach = function (fn) {
  const that = arguments[1] || window;
  let index = 0;

  while (index < this.length) {
    // this[i], i, this 分别对应三个参数 item-每一项数组 i=下标 this-调用数组
    fn.call(that, this[index], index, this);
    index++;
  }
};
/*
arr.forEach((item, index, arr) => {
    console.log(item, index, arr);
});
*/

arr.arrayforEach((item, index, arr) => {
  console.log(item, index, arr, 'arrayforEach');
});

4.实现Array.prototype.reduce


// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
Array.prototype.arrayReduce = function (fn) {
  let index = 0,
    initialValue = arguments[1];

  //第二个参数没传 取默认值
  if (!initialValue) {
    index++;
    initialValue = this[0];
  }

  // 累加计算
  while (index < this.length) {
    initialValue = fn(initialValue, this[index], index, this);
    index++;
  }

  return initialValue;
};

//测试arrayReduce
const res3 = arr.arrayReduce((pre, cur, index, curitem) => {
  // console.log(pre,cur,index,curitem);
  return pre + cur;
}, 100);
console.log(res3, 'arrayReduce');

5.实现Array.prototype.findIndex

Array.prototype.arrayFindIndex = function () {
  const fn = arguments[0],
    _this = arguments[1] || window;
  let index = 0;

  // 找到对应值的下标就结束循环
  while (index < this.length) {
    if (fn.call(_this, this[index], index, this)) {
      return index;
    }
    index++;
  }

  // 否则找不到
  return -1;
};

const curIndex = arr.arrayFindIndex((item) => {
  return item > 10;
});

// console.log(curIndex);

6.实现Array.prototype.find 返回第一个符合条件的元素 找到就停止循环

// const res4 = arr.find((item)=>item > 20)
Array.prototype.arrayFind = function (callBack) {
  const _this = arguments[1] || window;
  let index = 0;

  while (index < this.length) {
    if (callBack.call(_this, this[index], index, this)) {
      return this[index];
    }
    index++;
  }

  return undefined;
};

// 测试arrayFind
const res4 = arr.arrayFind((item) => item > 20);
console.log(res4); //22

7.实现Array.prototype.some 方法
/*
Array.prototype.some
(1) 如果数组中至少有一个符合条件 返回结果true 否则false
(2) 如果用一个空数组进行测试，在任何情况下它返回的都是false
*/

Array.prototype.arraySome = function (callBack) {
  let index = 0,
    _this = arguments[1] || window;

  while (index < this.length) {
    if (callBack.call(_this, this[index], index, this)) {
      return true;
    }
    index++;
  }

  return false;
};

const array = [1, 3, 4];
const res5 = array.arraySome((item) => item > 2);
// console.log(res5);

7.实现every方法
/*
Array.prototype.every
(1) 如果数组中所有元素都符合条件 返回结果true 否则false
(2) 若收到一个空数组，此方法在任何情况下都会返回 true
*/

Array.prototype.arrayEvery = function (callBack) {
  let index = 0,
    _this = arguments[1] || window;

  while (index < this.length) {
    // 存在不符合条件的直接返回false 终止循环
    if (!callBack.call(_this, this[index], index, this)) {
      return false;
    }
    index++;
  }

  // 都符合条件 直接true
  return true;
};

// 测试arrayEvery
const ary = [1, 2, 4];
const res6 = ary.arrayEvery((item) => item > 2);
// console.log(res6);

8.实现Array.prototype.findLast 方法
Array.prototype.findLast
(1) 方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined

Array.prototype.arrayFindLast = function (callBack) {
  let index = 0,
    arr = [],
    _this = arguments[1] || window;

  while (index < this.length) {
    // 存在不符合条件的直接返回false 终止循环
    if (callBack.call(_this, this[index], index, this)) {
      arr.push(this[index]);
    }
    index++;
  }

  if (arr.length > 0) {
    return arr[arr.length - 1];
  }

  // 都符合条件 直接true
  return undefined;
};

const arr1 = [2, 1, 9, 10, 0, 2, 4];
const res7 = arr1.arrayFindLast((item) => item > 1);
// console.log(res7);

9.实现Array.prototype.findLastIndex方法
/*
Array.prototype.findLastIndex
(1) 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。
*/

Array.prototype.arrayFindLastIndex = function (callBack) {
  let index = 0,
    arr = [],
    _this = arguments[1] || window;

  while (index < this.length) {
    // 存在不符合条件的直接返回false 终止循环
    if (callBack.call(_this, this[index], index, this)) {
      arr.push(index);
    }
    index++;
  }

  if (arr.length > 0) {
    return arr[arr.length - 1];
  }

  // 都符合条件 直接true
  return -1;
};

// 测试arrayFindLastIndex
const arr2 = [1, 2, 1, 4, 1, 10];
const res8 = arr2.arrayFindLastIndex((item) => item > 1);
// console.log(res8);

10.实现Array.prototype.pop方法 删除数组最后一个元素 返回删除元素的下标


Array.prototype.arrayPop = function () {
  let arr = this;
  const remainIndex = arr[arr.length - 1];
  arr.length--;
  return remainIndex;
};

const ary2 = [32, 4, 2];
// console.log(ary2.arrayPop(),ary2);

11.实现 Array.prototype.push方法
(1) push 方法可以往数组末尾添加任意多个元素，并将数组长度作为返回值

Array.prototype.arrayPush = function (...args) {
  let arr = this,
    index = 0,
    argsLen = args.length;

  while (index < argsLen) {
    arr[arr.length] = args[index];
    index++;
  }

  return arr.length;
};

const ary3 = [2, 33];
// console.log(ary3.arrayPush('a','b',[1,299]),ary3);

12.实现 Array.prototype.shift方法 (1) shift 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

Array.prototype.arrayShift = function () {
  const result = this[0];
  let index = 0;

  while (index < this.length) {
    // 将数组的后一项赋值给前一项
    this[index] = this[index + 1];
    index++;
  }

  //数组减少一位
  this.length > 1 && this.length--;

  return result;
};

const ary5 = [3, 45, 8, 0];
// console.log(ary5.arrayShift());

13.实现Array.prototype.concat方法
(1) concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

Array.prototype.arrayConcat = function () {
  const argLen = arguments.length;
  if (argLen === 0) return this;

  let index = 0;
  const arr = this;
  let thisLen = this.length,
    arrIndex = thisLen + index;

  while (index < argLen) {
    const args = arguments[index];
    Array.isArray(args) ? argsToString(args) : (arr[arrIndex++] = args);
    index++;
  }

  function argsToString(args) {
    let i = 0;
    while (i < args.length) {
      arr[arrIndex++] = args[i];
      i++;
    }
  }

  return arr;
};

const ary6 = [];
// console.log(ary6.arrayConcat(22,[1,2,99,[3,8,99]],['b','a'],[9877,777,776,[9,7]],0,null));

// console.log(ary5);

14.实现Array.prototype.unshift方法
(1) unshift 方法可以往数组头部添加任意多个元素，并将数组长度作为返回值

Array.prototype.arrayUnshift = function (...args) {
  const thisLen = this.length,
    argsLen = args.length,
    arr = JSON.parse(JSON.stringify(this));

  for (let index = 0; index < thisLen; index++) {
    this[argsLen + index] = arr[index];
  }

  for (let i = 0; i < argsLen; i++) {
    this[i] = args[i];
  }

  return this.length;
};

15.slice数组方法实现

/* 
slice实现
Array.prototype.slice.call 其实就是把call指向的修改为指定数组 slice里面的this此时指向就是call(arguments)的arguments
*/
Array.prototype._slice = function(start,end){
    const arr = [];
    start = start || 0;
    end = end || this.length;

    for(let i=start;i < end;i++){
        arr.push(this[i]);
    }

    return arr;
}

16.Array.from 将类数组转为数组

/*
实现Array.from 功能把类数组转为数组
*/
Array.prototype._from = function(argArr){
    const newArr = [];

    for(let i = 0; i< argArr.length;i++){
        newArr.push(argArr[i]);
    }

    return newArr;
}
追逐梦想之路_随笔
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Javascript常用的数组方法实现
weixin_47684422的博客
07-10 471
数据结构与算法Javascript实现
对js数组方法使用代码类似实现——持续补充
qq_41534913的博客
04-22 149
记录数组方法的同时，自己也想研究下用代码来类似实现数组的各种方法 数组方案使用请点击这里 源码地址： https://github.com/v8/v8/blob/4.9-lkgr/src/js/array.js ...
重写javascript的数组的方法
luwenbangisme的博客
09-29 187
重写remove方法： Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; ...
重写数组方法 pop push shift… -- js随记
qq_48802092的博客
08-23 232
push 这个方法是向数组的末尾添加一个或多个元素，并且返回数组新的长度（改变数组长度）； pop 这个方法不用添加参数，直接将数组最后一个参数弹出数组，并返回这个删除的元素。 shift 这个方法是把数组第一个元素删除，并返回第一个元素的值（改变数组长度） unshift 这个方法可以向数组的开头添加一个或多个元素，并返回新的数组长度（改变数组长度） ...
javascript的数组方法重写
H&B Blog
12-17 729
push()方法：可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度 Array.prototype.myPush = function () { var L = this.length; for (var i = L; i < L + arguments.length; i++) { this[i] = arguments[i - L]; } return ...
谈谈JavaScript数组常用方法总结
10-20
本文将深入探讨JavaScript数组的一些常用方法，帮助开发者更好地理解和应用这些方法。 1. **增加数据** - `push()` 方法用于向数组末尾添加一个或多个元素，并返回新的数组长度。例如： ```javascript var arr =...
JavaScript实现删除数组重复元素的5种常用高效算法总结
11-26
本文实例讲述了JavaScript实现删除数组重复元素的5种常用高效算法。分享给大家供大家参考，具体如下： 这里就 js 如何实现数组去重整理出5种方法，并附上演示Demo 以及 源码。 1.遍历数组法 最简单的去重方法， 实现...
JavaScript数组常用方法
12-12
以下是一些常用的JavaScript数组方法及其详解： 1. **判断数组** - `instanceof` 操作符：用于检查一个对象是否是由特定构造函数创建的。例如，`value instanceof Array` 可以判断`value`是否是数组。但需要注意的...
Array.prototype.slice.call()方法详解
hahahhahahahha123456的博客
06-29 718
在很多时候经常看到Array.prototype.slice.call()方法，比如Array.prototype.slice.call(arguments)，下面讲一下其原理： 1、基本讲解 1.在JS里Array是一个类 slice是此类里的一个方法 ，那么使用此方法应该Array.prototype.slice这么去用 slice从字面上的意思很容易理解就是截取（当然你不是英肓的话...
Array.prototype.map()
胡图图的博客
12-07 1947
1. 说明 map()方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。 小案例： const arr = [1, 4, 9, 16] const map = arr.map(x => x * 2) 2. 语法 let newArr = arr.map(function callback(currentValue[, index[, arr]]){ //do Something }[, thisArg]) 2.1 参数 callback：生成新数组元素的函数，使用3
浅谈javascript的Array.prototype.slice.call
10-23
发现大多人都用了Array.prototype.slice.call(argments,0)，一直不明白这句是干什么的。而昨天温习了slice()方法，再参考Function.call(thisArg[, arg1[, arg2[, ...]]])，还是不得而知（我脑筋转得慢:|）。
JavaScript中重写（override）
最新发布
cnds123的专栏
07-13 2887
JavaScript中重写（override）
前端Array.prototype.map()使用案例和forEach使用接口案例
m0_49714202的博客
11-17 682
前端Array.prototype.map()使用案例
js高频面试题
baidu_33558407的博客
07-01 211
1、同步和异步的区别 执行顺序不同。同步任务指在主线程上排队进行的任务，只有当前面的任务执行完才会执行下一个任务。异步任务不进入主线程，而是进入任务队列，只有等主线程任务执行完毕，任务队列开始通知主线程，请求执行任务，才会进入主线程。 2、预编译 预编译时候做了哪些事情？ 1、创建ao对象 2、找形参和变量声明，作为ao对象的属性名，值为undefined 3、形参和实参相统一 4、找函数声明会替换变量声明 function fn(a,c){ console.log(a);//function a(){};
JavaScript语法引用数据类型之Array(数组)实例方法详解
Science Explorer
08-23 425
一、重要方法 1、map() map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 语法： let new_array = arr.map(function callback(currentValue, index, array) { // Return element for new_array ...
Array.prototype.slice.call()方法的理解
huangbaokang的博客
10-26 9097
在看别人代码时，发现有这么个写法：[].slice.call(arguments, 0)，这到底是什么意思呢？ 1、基础 1）slice() 方法可从已有的数组中返回选定的元素。 start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标...
Array.prototype.slice.call()方法
weixin_39034984的博客
06-18 1214
先将该方法拆分成两部分:1、Array.prototype.slice()该方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。根据以上定义，我们可以猜测下该方法的实现原理：Array.prototype.slice=function(start,end){ var result=new Array(); start=start||0; ...
Array.prototype.slice.call()详解及转换数组的方法
bowen11233的博客
11-22 8702
在翻看以前公司留下的项目时，看到一段代码。 var $show=$imgList.filter(':visible'); var showPics=Array.prototype.slice.call('$show',0); 其中第二行虽然能猜出大意，但也有一些费解，不知道这样的用意为何。于是在网上搜了一下，发现关于这个用法讲解的还挺多，选其中一篇较为详细的，转存来以备不时之需。在此感谢小平果
js继承中的方法重写
热门推荐
webnoob
11-02 1万+
1.面试中遇到的一道题，子类继承父类，父类有两个方法，重写其中一起方法。继承我是肯定是用组合方式继承，方法都是在原型上写的，重写的方法直接在子类的原型对象上写就ok了，因为对象的属性查找是按照原型链上就近原则的，先找到的方法就调用这个方法。 2.代码如下： // supcalss var parent = function(name,age){ this.name = name;
请举例介绍JavaScript的数组常用方法
05-27
当使用JavaScript编写程序时，数组是一种常见的数据结构，JavaScript 数组具有许多有用的方法，以下是...以上是一些常用的 JavaScript 数组方法及其示例，它们可以帮助你轻松地对数组进行操作，实现各种有用的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追逐梦想之路_随笔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值