Раньше вы должны были использовать простой цикл for для перебора каждого значения, присутствующего в массиве, но в настоящее время люди предпочитают использовать метод карты массива из-за более короткого синтаксиса и простоты использования.
Синтаксис метода карты: Array.prototype.map(callbackFn, thisArg);
Перед реализацией полифилла карты уясните, пожалуйста, this keyword
. this keyword
будет ссылаться на объект, для которого он был вызван. Вы можете прочитать об этом здесь".
Давайте построим полифил шаг за шагом.
Шаг 1:
Array.prototype.myMap = function(callbackFn, thisValue) { let outputArr = []; for(let i = 0; i < this.length; i++) { outputArr[i] = callbackFn(this[i], i, this); } return outputArr; }
Здесь мы перебираем каждый элемент переданного массива. this keyword
относится к массиву, из которого мы вызвали метод. В callbackFn мы получаем текущее значение, индекс и весь массив, откуда был вызван метод.
Шаг 2:
Array.prototype.myMap = function(callbackFn, thisValue) { let outputArr = new Array(this.length); for(let i = 0; i < outputArr.length; i++) { outputArr[i] = callbackFn(this[i], i, this); } return outputArr; }
Когда мы создаем массив вида arr = []. Он внутренне создан как,
arr = new Array(), чтобы создать новый экземпляр массива. В методе карты размер массива уже определен до вызова функции обратного вызова, поэтому мы сделали выходной массив того же размера, что и входной массив.
Шаг 3.
Array.prototype.myMap = function(callbackFn, thisValue) { let outputArr = new Array(this.length); for(let i = 0; i < outputArr.length; i++) { if(this[i]) outputArr[i] = callbackFn(this[i], i, this); } return outputArr; }
Метод карты не будет вызываться для пустых слотов, присутствующих в разреженном массиве. Таким образом, мы должны опустить пустые значения.
Шаг 4:
Array.prototype.myMap = function(callbackFn, thisValue = window) { let outputArr = new Array(this.length); for(let i = 0; i < outputArr.length; i++) { if(this[i]) outputArr[i] = callbackFn.call(thisValue, this[i], i, this); } return outputArr; }
По умолчанию значение this keyword
будет объектом окна в нестрогом режиме, а в строгом режиме оно не определено. Таким образом, если this keyword
не передается, мы должны сделать его объектом окна по умолчанию (для нестрогого режима).
Если в функции обратного вызова используется это ключевое слово, то this keyword
должно ссылаться на переданное thisValue при вызове метода карты, т. е. arr1.map(callbackFn, arr2);
arr2 = [2,3,4] arr1.map(function() {console.log(this)}, arr2) // [2,3,4] => output
Здесь передано это значение arr2. (только для использования this keyword
в callbackFn)
Поэтому для этого мы должны использовать метод call для изменения ссылки на this keyword
.
Вот и все!! Мы успешно реализовали полифилл для метода карты массива.
Надеюсь, вам понравилось. Дайте мне знать в комментариях, хотите ли вы того же для метода привязки метода сокращения.