【JavaScript】面试手撕数组原型链(易)

简介: 续借上文,这篇文章主要讲的是数组原型链相关的考题,有些人可能会纳闷,数组和原型链之间有什么关系呢?我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰,如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和,该如何做呢?我们知道数组没有sum函数,于是我们需要在数组的原型上定义这个函数,才能方便我们调用,具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。

引入

续借上文,这篇文章主要讲的是数组原型链相关的考题,有些人可能会纳闷,数组和原型链之间有什么关系呢?我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰,如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和,该如何做呢?我们知道数组没有sum函数,于是我们需要在数组的原型上定义这个函数,才能方便我们调用,具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。

Array.prototype.sum = function () {
  let sum = 0;
  for (let i = 0; i < this.length; i++) {
    sum += this[i];
  }
  return sum;
};
const arr = [1,2,3];
console.log(arr.sum()); // 6

正文

forEach实现

首先,我们先了解forEach这个函数有哪些参数。我们先看一个例子, forEach的使用

const arr = [1,2,3];
arr.forEach((item,index,arr) => {
  console.log(item,index,arr);
})
/**
输入如下
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
**/

所以我们观察发现forEach传的是一个回调函数

function(currentValue, index, array) {}

这个回调函数有三个参数,分别如下

  • currentValue:必需,当前正在遍历的数组元素的值。
  • index:可选,当前正在遍历的数组元素的索引。
  • array:可选,指向正在被遍历的数组对象本身。

了解上述资料后,于是我们可以自己实现一个myForEach,代码如下

Array.prototype.myForEach = function (fn) {
  for (let i = 0; i < this.length; i++) {
    fn(this[i], i, this);
  }
};
const arr = [1, 2, 3];
arr.forEach((item, index, arr) => {
  console.log(item, index, arr);
});
/**
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
**/

map实现

同样,我们了解下map的方法有哪些参数,调研发现map的参数与forEach的参数前面一致,多了一个thisArg的参数

  • thisArg: 在执行回调函数时作为其上下文(即this值)的对象。如果提供了这个参数,回调函数内部的 this将指向它;如果不提供,则在严格模式下 this 会是 undefined,在非严格模式下 this 通常是全局对象(如浏览器环境中的window对象

我们也看一个🌰,帮助大家会一起map是如何使用的

const arr = [1, 2, 3];
// 这里为了能让大家看到所有的参数,于是将三个参数全部写了下来
const douleArr = arr.map((value,index,array) => value * 2);
console.log(douleArr);
/**
输入如下
[2, 4, 6]
**/

那么该如何实现呢,其实依靠forEach照葫芦画瓢即可,代码如下

Array.prototype.myMap = function (fn, thisArg) {
  const res = [];
  for (let i = 0; i < this.length; i++) {
    const mappedValue = fn.call(thisArg, this[i], i, this);
    res.push(mappedValue);
  }
  return res;
};
const arr = [1, 2, 3];
const douleArr = arr.myMap((value,index,array) => value * 2);
console.log(douleArr);
/**
输入如下
[2, 4, 6]
**/

最后,这就是本章节的内容,之后有机会再更几个手写数组原型链的函数

目录
相关文章
|
9天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
9天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
15天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
33 5
|
1月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
1天前
|
JavaScript
什么是js的原型链
什么是js的原型链
|
2天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查
|
4天前
|
JavaScript 前端开发 测试技术
「一劳永逸」送你21道高频JavaScript手写面试题(上)
「一劳永逸」送你21道高频JavaScript手写面试题
29 0
|
16天前
|
JavaScript 前端开发
JavaScript数组的功能内置类型
数组是JavaScript的内置类型,JavaScript数组的功能特别强大。下面简单介绍一下JavaScript数组。
|
17天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
|
27天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
13 2