创建我自己的array.prototype,map方法,如何访问阵列？

ut6juiuv 于 2022-10-22 发布在 Java

关注(0)|答案(6)|浏览(174)

因此，我正在尝试创建一个完全模仿Array.prototype.map()方法的方法，但我有很多困惑。我想主要的问题在于它的语法。我知道有很多不同的方法可以实现map方法的实用化，例如：
示例1：
假设我有一个对象数组-

var movieList = [
   {"Title" : "Inception",
   "Awards" : "4 oscars",
   "Language" : "English",
   "imdbRating" : "8.8"
   },

   {"Title" : "Inception2",
   "Awards" : "44 oscars",
   "Language" : "English and Spanish",
   "imdbRating" : "9.8"
   },

   {"Title" : "Interstellar",
   "Awards" : "10 oscars",
   "Language" : "English",
   "imdbRating" : "9.5"
   }
];

假设我想创建一个函数，该函数返回仅包含电影标题及其imdbRating的对象列表。在这种情况下，我可以使用map()方法：

let newList = movieList.map( (current) ({'title': current['Title'],     
               'rating': current['imdbRating'] }) );

上面的代码行满足了我使用map方法实现目标的需要。但是，对于其他情况，语法可能不同
示例2：

let s = [1, 2, 3, 4];

let s2 = s.map( function(item) {
   return item*2;
});

使用map函数s2将返回一个数组，其中每个元素的值都是s数组中每个元素的两倍。现在，回到这篇文章的主题，我正在研究的问题给了我这个提纲：

Array.prototype.myMap = function(callback) {
   let newArray = [];

我知道当一个数组调用myMap方法时，它插入了2个参数，即数组和一个函数。但我无法理解如何将元素上每个回调函数的值具体赋值给myMap方法中的newArray。特别是因为我不知道如何访问原始数组。
我知道的一个尝试很荒谬，因为我不知道如何访问数组的长度以及调用myMap方法的数组本身-

Array.prototype.myMap = function(callback) {
   let newArray = [];
   let x = this.length();
   for(let i=0; i<x; i++){
       let counter = callback();
       newArray.push(counter);
   }
   return newArray;
};

到目前为止，我对map()方法的理解是，它需要3个参数，一个数组，一个函数，以及将通过函数放置的元素，我对语法不太熟悉，无法迭代调用map方法的数组，而且在我的课程中没有任何地方教过我如何做到这一点，我也没有找到任何在线资源可以解决这个问题。

JavaScript

来源：https://stackoverflow.com/questions/56660756/creating-my-own-array-prototype-map-method-how-can-i-access-the-array

6条答案

按热度按时间

ygya80vv1#

length不是一个方法，它只是一个属性。您需要将this[i]传递给callback，以获得正确的输出。

Array.prototype.myMap = function(callback) {
  let newArray = [];
  let x = this.length;
  for (let i = 0; i < x; i++) {
    let counter = callback(this[i]);
    newArray.push(counter);
  }
  return newArray;
};

let arr = [1, 2, 3];
arr = arr.myMap(e => e * 2);
console.log(arr);

请注意，改变原型方法是非常糟糕的做法，尤其是在存在相同方法时创建一个新方法。（map具有myMap的所有功能以及更多功能）。

赞(0）回复(0）举报 2022-10-22

dfuffjeb2#

这是实际map Polyfill的简化版本。您需要使用this.length获取length。并将循环中的当前项、它的索引和数组本身作为参数传递给callback

Array.prototype.myMap = function(callback, thisArg) {
  const newArray = [];
  const length = this.length;

  for (let i = 0; i < length; i++) {
    let value = callback(this[i], i, this); // call with proper arguments
    newArray.push(value);
  }

  return newArray;
};

const arr = [1, 2, 3];

console.log(arr.myMap(a => a * 2))

注意：map方法也使用thisArg作为参数。如果您想使用它，需要将callback与thisArg合并为this

callback.call(thisArg, this[i], i, this);

赞(0）回复(0）举报 2022-10-22

qlckcl4x3#

这里是您可以了解javascriptMap函数更多信息的地方：https://www.w3schools.com/jsref/jsref_map.asp
实现map方法实际上比你想象的要容易得多。下面是一个非常简单的例子，它将完全执行https://www.w3schools.com/jsref/jsref_map.asp中的map方法：

Array.prototype.myMap = function(callback) {
    arr = [];
    for (var i = 0; i < this.length; i++)
        arr.push(callback(this[i], i, this));
    return arr;
};

//tests
var numbers2 = [1, 4, 9];

var squareRoot = numbers2.myMap(function(num) {
    return Math.sqrt(num);
});

console.log(squareRoot); // [ 1, 2, 3 ]

因此，map方法简单地返回一个数组，通过该数组的值Map到原始数组的值，方法是对每个值运行一个指定的函数作为参数。

**注：**该方法跳过原始map函数的可选参数，该参数指定this值

赞(0）回复(0）举报 2022-10-22

deyfvvtc4#

这是myMap函数的工作版本。
模仿这些方法的一部分可能会让人困惑，那就是this关键字在javascript中的工作方式。这是一篇MDN参考文章。

Array.prototype.myMap = function(callback, thisArg) {
  let newArray = [];
  let x = this.length;
  for(let i=0; i<x; i++){
    let counter = callback.call(thisArg, this[i], i, this);
    newArray.push(counter);
  }
  return newArray;
};

赞(0）回复(0）举报 2022-10-22

s5a0g9ez5#

Array.prototype.mappy = function (callback, thisArg) { 
    let newArray = [];
    for (let i = 0; i < this.length; i++) {
        if (i in this) newArray.push(callback.call(thisArg, this[i], i, this));
        else newArray.push(undefined);
    }
    return newArray;
};

赞(0）回复(0）举报 2022-10-22

n3ipq98p6#

可以利用spread操作符来做这样的事情

Map.prototype.slice = function(start, end) {
    return new Map([...this].slice(start, end));
};

使用中：

const testMap = new Map([["a", 1], ['b', 2], ["c", 3], ["d", 4], ["e", 5]]);
console.log(testMap); // Map(5) { 'a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5 }
console.log(testMap.slice(0, 2)); // Map(2) { 'a' => 1, 'b' => 2 }

您肯定可以在此基础上构建，因为这仍然有Array.prototype.slice（）的警告

赞(0）回复(0）举报 2022-10-22

我来回答

创建我自己的array.prototype,map方法,如何访问阵列？

6条答案

相关问题

热门标签

最新问答