preface

Writing a blog is really a skill to live, often visit the nuggets to read the articles written by big men. I think I should also try to write something, deepen their understanding of it, but also convenient for future reference.

Basic usage of the MAP method

The map() method creates a new array, and the result is the result returned when each element in the array calls one of the provided functions.

From the official introduction, we know that the map method does not change the array it is called from (but we can do so in the provided callback function), but instead returns a new array.

Here’s an example:

  • Performs processing on elements in an array
let arr = [1.2.3]
let mappedArr = arr.map(value= > {
  return value + 1
})
console.log(mappedArr) / / [2, 3, 4]
Copy the code

The principle of analyzing

From the above example, we have a general idea of how the map function works. What? Is that how it works?

Well, let’s take it a step further.

let mappedArr = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])
Copy the code

The map method can take two arguments: the first argument, callback, is a function, which is required. Callback takes three optional arguments: the current array element being processed, the index of the current element being processed, and the array calling the map method. The second argument is optional and defines the this reference to which the callback is executed.

Once you know what the parameters do, you can do things.

Implement the basic version of the custom map

Array.prototype._map = function (callback, thisArg) {
  let len = this.length
  let result = []
  for (let i = 0; i < len; i++) {
    // Call this callback to thisArg,
    // This is followed by the current element being processed, the current element subscript, and the array calling the map method
    // When thisArg is undefined or null,this refers to the global window. This is exactly in line with the native Map method.
    let temp = callback.call(thisArg, arr[i], i, arr)
    result[i] = temp
  }
  return result
}
let arr = [1.2.3]
let result = arr._map(function (value, index, arr) {
  return value + 1
})
console.log(result) / / [2, 3, 4]
Copy the code

This implements an array map method, but there are many differences:

Native map methods are skippeddeleteDelete or undefined elements
// Note that arr[3] is an undefined element
let arr = [1.2.3.undefined]
let result = arr._map(function (value, index, arr) {
  return value + '1'
})

Copy the code
  • Native result
console.log(arr) // [1, 2, 3, empty, undefined]
console.log(result) // ["11", "21", "31", empty, "undefined1"]
Copy the code
  • The result of the custom map method above
console.log(arr) // [1, 2, 3, empty, undefined]
console.log(result) // ["11", "21", "31", "undefined1", "undefined1"]
Copy the code

The undefined element I think is an element in the array that has no value through the index, meaning that the element does not exist. My custom map method did not notice this. When I fetch an element that does not exist in the array, I must return undefined, and I get the result above.

So how do we solve this problem?

inThe operator

The IN operator is used to detect whether an object contains a particular attribute. But when it comes to have to mention in the Object. The prototype. The hasOwnProperty () this method, even though they can be used to detect whether there are specific attributes on an Object, but the latter will ignore the inherited attributes from the prototype.

  • For example
    • useinThe operator

      In JavaScript, arrays are objects, and their indexes are treated like properties. As you can see from the figure, the array ARR itself does not existpushMethod, but can be found through the prototype chainarr.__proto__.pushSo, only for the last expression in the figuretrue.

    • useObject.prototype.hasOwnProperty()methods

hasOwnProperty

Perfect function
  1. For undefined elements, the callback is not called by them.
  2. An exception is given if the callback passed in is not a function.

The code is as follows:

Array.prototype._map = function (callback, thisArg) {
  let result
  // Callback must be a function, otherwise an exception is thrown
  if (Object.prototype.toString.call(callback) ! = ='[object Function]') {
    throw new Error(callback + 'is not a function')}let len = this.length
  // Create an array with the same length as the original array
  result = new Array(len)
  for (let i in this) {
    let currentVal, mappedVal
    currentVal = this[i]
    mappedVal = callback.call(thisArg, currentVal, i, this)
    result[i] = mappedVal
  }
  return result
}
Copy the code
  • Testing capabilities
let arr = [1.2.3.undefined]
let result = arr._map(function (value) {
  return value + '1'
})
console.log(arr) // [1, 2, 3, empty, undefined]
console.log(result) // ["11", "21", "31", empty, "undefined1"]
Copy the code

Write in the last

The purpose of writing this article is to exercise my practical ability and language expression ability. Hope inadvertently see this article big guy give advice, give your valuable advice, thank you.