Implement 24+ array methods in JavaScript by hand

1. Traversal Class

1. forEach
2. map
3. every
4. some
5. Filter
6. reduce
7. reduceRight

2. Search Class

1. find
2. findIndex
3. indexOf
4. lastIndexOf
5. includes

3. Addition, deletion and modification

1. push
2. pop
3. unshift
4. shift
5. reverse
6. fill
7. concat
8. join

4. Static Methods

1. Array.isArray
2. Array.of

5. Flat

1. flat
2. flatMap

This article will explore the internal implementation of 24+ native array methods with you. I believe you will gain something different after reading it.

1. Traversal Class

1. forEach

Basic use:

forEach is a very common traversal function that you must be very familiar with! Here we focus on some important and easily overlooked points. mdn

This method executes the given function once for each element of the array and the return value is undefiend
This method executes the callback function once for each item in the array with a valid value, in ascending order; uninitialized items will be skipped (for example, on sparse arrays).
If an existing value is changed, the value passed to callback is the value at the moment forEach() iterates over them.
Deleted items will not be traversed

Here is a small example:

let demoArr = [ 1, 2, 3, 4, , 5 ]

demoArr.forEach((it, i) => {
  if (i === 1) { 
    // The ones added later will not be accessed by demoArr.push(5)
  } else if (i === 2) {
    // 4 will not be accessed, but 4-4 will be accessed demoArr.splice(3, 1, '4-4')
  }

  console.log(it)
})

/*
 1
 2
 3
 4-4
 5
*/

Code implementation:

Array.prototype.forEach2 = function (callback, thisCtx) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }

  const length = this.length
  let i = 0

  while (i < length) {
    // The deleted, newly added element index i is not in the array, so it will not be accessed if (i in this) {
      callback.call(thisCtx, this[ i ], i, this)
    }

    i++
  }
}

Using the same example as before, the output after modification is the same

Test it out:

// Test let demoArr = [ 1, 2, 3, 4, , 5 ]

demoArr.forEach2((it, i) => {
  if (i === 1) {
    // The ones added later will not be accessed by demoArr.push(5)
  } else if (i === 2) {
    // 4 will not be accessed, similarly 4-4 will be accessed demoArr.splice(3, 1, '4-4')
  }

  console.log(it)
})

/*
 1
 2
 3
 4-4
 5
*/

2. map

Basic use:

map method creates a new array where each element is the return value of calling the supplied function once. mdn

Note:

The callback function will only be called on indices that have values.
Indexes that have never been assigned a value or deleted using delete will not be called.

// Note that index 2 is not assigned a value let arr = [ 1, 2, ,4, 5 ]

// Delete index 3
delete arr[3]

console.log(arr.map((it) => it * it))
// [ 1, 4, 25 ]

Code implementation:

Click to view source code implementation

Array.prototype.map2 = function (callback, thisCtx) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }

  const length = this.length
  let i = 0
  // The return value of map is a new array let newArray = []

  while (i < length) {
    // Deleted and uninitialized ones will not be traversed if (i in this) {
      newArray.push(callback.call(thisCtx, this[ i ], i, this))
    }

    i++
  }
  // Return a new array return newArray
}

Test it out:

let arr = [ 0, 1, 2, 3, 4,, 5 ]

let arr2 = arr.map2(function (it, i, array) {
  console.log(it, i, array, this)
  return it * it
}, { name: 'Front-end Fathead Fish' })

console.log(arr2)

3. every

Basic use:

every method tests whether all elements in an array pass a test of a specified function. It returns a Boolean value. mdn

Note:

If an empty array is received, this method will return true in all cases.
callback will only be called for indices that have been assigned a value.
It will not be called for indexes that are deleted or have never been assigned a value.

// Example let emptyArr = []
// Empty array returns true directly
console.log(emptyArr.every((it) => it > 0)) // true
// has unassigned values let arr = [ 0, 1, 2, 3, 4,, 5, -1 ]
// Delete element delete arr[7]

console.log(arr.every((it) => it >= 0)) // true

Code implementation:

Click to view source code implementation

Array.prototype.every2 = function (callback, thisCtx) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }

  const length = this.length
  let i = 0
  // Empty function will not enter the loop while (i < length) {
    // As long as one value does not meet the callback expectation, return false
    if (i in this && !callback.call(thisCtx, this[ i ], i, this)) {
      return false
    }

    i++
  }

  return true
}

Test it out:

Let's take an example to test

let emptyArr = []

console.log(emptyArr.every2((it) => it > 0)) // true

let arr = [ 0, 1, 2, 3, 4,, 5, -1 ]

delete arr[7]

console.log(arr.every2((it) => it >= 0)) // true

4. some

Basic use:

some method tests whether there is at least one element in the array that passes the test of the provided function. It returns a Boolean value. mdn

Note:

callback will only be called for indices that "have values", not for indices that have been deleted or never had values assigned to them.

For example

let emptyArr = []
// Empty array returns false directly
console.log(emptyArr.some((it) => it > 0)) // false
let arr = [ 0, 1, 2, 3, 4,, 5, -1 ]
// Delete -1 before traversal, the only value less than 0 does not exist, that is, return false
delete arr[7]

console.log(arr.some((it) => it < 0)) // false

Code implementation:

Click to view source code implementation

Array.prototype.some2 = function (callback, thisCtx) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }

  const length = this.length
  let i = 0

  while (i < length) {
    // As long as there is an element that meets the callback condition, return true
    if (i in this && callback.call(thisCtx, this[ i ], i, this)) {
      return true
    }

    i++
  }

  return false
}

Test it out:

let emptyArr = []
// Empty array returns true directly
console.log(emptyArr.some2((it) => it > 0)) // false
let arr = [ 0, 1, 2, 3, 4,, 5, -1 ]

delete arr[7]

console.log(arr.some2((it) => it < 0)) // false
console.log(arr.some2((it) => it > 0)) // true

5. Filter

Basic use:

filter method creates a new array containing all elements that pass the provided function test. mdn

Note:

filter calls the callback function once for each element in the array and creates a new array with all the elements for which callback returns true or a value equivalent to true .
callback will only be called for indices that have been assigned a value, not for indices that have been deleted or have never been assigned a value.
Elements that fail the callback test are skipped and not included in the new array.

// Index 5 has no initial value and will not be traversed let arr = [ 0, 1, 2, -3, 4,, 5 ]
// Delete the last element delete arr[6]
// Filter out values greater than 0 let filterArr = arr.filter((it) => it > 0)

console.log(filterArr) // [ 1, 2, 4 ]

Code implementation:

Click to view source code implementation

Array.prototype.filter2 = function (callback, thisCtx) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }

  const length = this.length
  let newArray = []
  let i = 0

  while (i < length) {
    if (i in this && callback.call(thisCtx, this[ i ], i, this)) {
      newArray.push(this[ i ])
    }
    i++
  }

  return newArray
}

test:

// Index 5 has no initial value and will not be traversed let arr = [ 0, 1, 2, -3, 4,, 5 ]
// Delete the last element delete arr[6]
// Filter out values greater than 0 let filterArr = arr.filter2((it) => it > 0)

console.log(filterArr) // [ 1, 2, 4 ]

6. reduce

Basic use:

The reduce method executes a reducer function you provide for each element in the array (in ascending order), summarizing the results into a single return value.

This function is a little more complicated. Let's use an example to see how it is used.

const sum = [1, 2, 3, 4].reduce((prev, cur) => {
  return prev + cur;
})

console.log(sum) // 10

// Initial setting prev = initialValue = 1, cur = 2

// First iteration prev = (1 + 2) = 3, cur = 3

// Second iteration prev = (3 + 3) = 6, cur = 4

// Third iteration prev = (6 + 4) = 10, cur = undefined (exit)

Code implementation:

Click to view source code implementation

Array.prototype.reduce2 = function (callback, initValue) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }

  let pre = initValue
  let i = 0
  const length = this.length
  // When no initial value is passed, take the first one as the initial value if (typeof pre === 'undefined') {
    pre = this[0]
    i = 1
  }

  while (i < length) {
    if (i in this) {
      pre = callback(pre, this[ i ], i, this)
    }
    i++
  }

  return pre
}

test:

const sum = [1, 2, 3, 4].reduce2((prev, cur) => {
  return prev + cur;
})

console.log(sum) // 10

7. reduceRight

Basic use:

The reduceRight method executes a reducer function you provide for each element in the array (in descending order), aggregating the results into a single return value mdn

Very similar to reduce , the only difference is reduceRight traverses from right to left

const sum = [1, 2, 3, 4].reduce((prev, cur) => {
  console.log(cur)
  return prev + cur;
})

// twenty one
// 3 2
// 4 3

console.log(sum) // 10

const sum2 = [1, 2, 3, 4].reduceRight((prev, cur) => {
  console.log(cur)
  return prev + cur;
})
// 3 2 
// twenty one
// 1 0

console.log(sum2) // 10

Code implementation:

Click to view source code implementation

Array.prototype.reduceRight2 = function (callback, initValue) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }

  let pre = initValue
  const length = this.length
  // Start traversing from the last element let i = length - 1
  // If no initial value is passed, the last one is used as the initial value if (typeof pre === 'undefined') {
    pre = this[i]
    i--
  }

  while (i >= 0) {
    if (i in this) {
      pre = callback(pre, this[ i ], i, this)
    }
    i--
  }

  return pre
}

test:

const sum = [1, 2, 3, 4].reduceRight2((prev, cur) => {
  console.log(cur)
  return prev + cur;
})

// 3 2
// twenty one
// 1 0

console.log(sum) // 10

2. Search Class

1. find

Basic use:

The find method returns the value of the first element in an array that satisfies a test function. Otherwise returns undefined , mdn

Note:

The find method executes the callback function once for each element in the array until one callback returns true
When such an element is found, the method returns the value of the element immediately, otherwise it returns undefined
The callback function will be called for every index in the array from 0 to length - 1 , not just those that are assigned values. (This point is different from the previous functions)

let arr = [ 0, 1, 2, 3, 4,, 5 ]

let index = arr.find((it) => {
  return it > 3
}, { name: 'Front-end Fathead Fish' })

console.log(index) // 4

Code implementation:

Array.prototype.find2 = function (callback, thisCtx) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }

  const length = this.length
  let i = 0

  while (i < length) {
    const value = this[ i ]
    // As long as there is an element that meets the logic of the callback function, the element value is returned
    if (callback.call(thisCtx, value, i, this)) {
      return value
    }

    i++
  }
  // Otherwise returns undefined  
  return undefined
}

test:

let arr = [ 0, 1, 2, 3, 4,, 5 ]

let index = arr.find2(function (it, i, array) {
  console.log(it, i, array, this)
  return it > 3
}, { name: 'Front-end Fathead Fish' })

console.log(index) // 4

2. findIndex

Basic use:

The findIndex method returns the index of the first element in an array that satisfies a provided testing function. If no corresponding element is found, -1 is returned. mdn
The difference from the find function is that findIndex returns the index instead of the value. The points to note are basically the same as find.
The findIndex method executes the callback function once for each array index 0 to length-1 (inclusive) in the array until a value is found for which the callback function returns true.
If such an element is found, findIndex immediately returns the index of that element. If the callback never returns a true value, or length of the array is 0, findIndex returns -1.
Unlike some other array methods (such as Array#some ), in sparse arrays the callback function will be called even for indices of entries that do not exist in the array.

let arr = [ 0, 1, 2, 3, 4,, 5 ]

let index = arr.findIndex((it, i, array) => {
  return it > 2
})

console.log(index) // 3

Code implementation:

Click to view source code implementation

Array.prototype.findIndex2 = function (callback, thisCtx) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }

  const length = this.length
  let i = 0

  while (i < length) {
    // Directly return index i in accordance with callback logic
    if (callback.call(thisCtx, this[i], i, this)) {
      return i
    }

    i++
  }
  // Otherwise return -1  
  return -1
}

test:

let arr = [ 0, 1, 2, 3, 4,, 5 ]

let index = arr.findIndex2(function (it, i, array) {
  console.log(it, i, array, this)
  return it > 2
}, { name: 'Front-end Fathead Fish' })

console.log(index) // 3

3. indexOf

Basic use:

indexOf method returns the first index in the array where a given element can be found, or -1 if it does not exist. mdn

arr.indexOf(searchElement[, fromIndex])

Note:

If the index value at which the search starts is greater than or equal to the length of the array, it means that the search will not be done in the array and -1 will be returned.
If the index value provided in the parameter is a negative value, it is treated as an offset from the end of the array, that is, -1 means starting from the last element, -2 means starting from the second to last element, and so on.
If the index value provided in the parameter is a negative value, it does not change the search order. The search order is still to search the array from front to back.
If the offset index is still less than 0, the entire array will be queried. Its default value is 0.

const array = [2, 5, 9]

console.log(array.indexOf(2)) // 0
console.log(array.indexOf(7)) // -1
console.log(array.indexOf(9, 2)) // 2
console.log(array.indexOf(2, -1)) // -1
console.log(array.indexOf(2, -3)) // 0

Code implementation :

Click to view source code implementation

With the above points and basic usage, you will definitely know how to write it at a glance.

Array.prototype.indexOf2 = function (targetEle, fromIndex) {
  const length = this.length

  fromIndex = +fromIndex || 0

  // If the array is empty or the search starts from a position greater than or equal to the length of the array, the value is -1.
  if (length === 0 || fromIndex >= length) {
    return -1
  }
  /*
    1. Start searching for elements from fromIndex 2. If fromIndex is greater than 0, just take it directly 3. If it is less than 0, first subtract the absolute value of fromIndex from the length. If it is still less than 0, just take 0 directly*/
  let i = Math.max(fromIndex >= 0 ? fromIndex : length - Math.abs(fromIndex), 0)

  while (i < length) {
    // An element in the array that is equal to targetEle if (i in this && targetEle === this[ i ]) {
      return i
    }

    i++
  }

  return -1
}

test:

const array = [2, 5, 9]

console.log(array.indexOf2(2)) // 0
console.log(array.indexOf2(7)) // -1
console.log(array.indexOf2(9, 2)) // 2
console.log(array.indexOf2(2, -1)) // -1
console.log(array.indexOf2(2, -3)) // 0

4. lastIndexOf

Basic use:

The lastIndexOf method returns the last index of the specified element in the array, or -1 if it does not exist. mdn

arr.lastIndexOf(searchElement[, fromIndex])

Note:

Start searching backwards from position arr.length - 1 .
If fromIndex is greater than or equal to the length of the array, the entire array will be searched.
If fromIndex is negative, it is treated as an offset from the end of the array. Even if the value is negative, the array will still be searched from the back to the front.
If fromIndex value is negative and its absolute value is greater than the array length, the method returns -1, which means that the array will not be searched.

let array = [2, 5, 9, 2]

console.log(array.lastIndexOf(2)) // 3
console.log(array.lastIndexOf(7)) // -1
console.log(array.lastIndexOf(2, 3)) // 3
console.log(array.lastIndexOf(2, 2)) // 0
console.log(array.lastIndexOf(2, -2)) // 0
console.log(array.lastIndexOf(2, -1)) // 3

Code implementation:

Click to view source code implementation

Array.prototype.lastIndexOf2 = function (targetEle, fromIndex) {
  const length = this.length

  fromIndex = typeof fromIndex === 'undefined' ? length - 1 : fromIndex
  // If the array is empty, or the value is negative and its absolute value is greater than the array length, the method returns -1, which means the array will not be searched.
  if (length === 0 || fromIndex < 0 && Math.abs(fromIndex) >= length) {
    return -1
  }

  let i

  if (fromIndex >= 0) {
    // If `fromIndex` is greater than or equal to the length of the array, the entire array will be searched.
    // That is, when it is greater than the array length - 1, length - 1 will be taken
    i = Math.min(fromIndex, length - 1)
  } else {
    i = length - Math.abs(fromIndex)
  }

  while (i >= 0) {
    // Return index when equal to targetEle if (i in this && targetEle === this[ i ]) {
      return i
    }
    // Reverse traversal i--
  }
  // If not found, return -1
  return -1
}

test:

let array = [2, 5, 9, 2]

console.log(array.lastIndexOf2(2)) // 3
console.log(array.lastIndexOf2(7)) // -1
console.log(array.lastIndexOf2(2, 3)) // 3
console.log(array.lastIndexOf2(2, 2)) // 0
console.log(array.lastIndexOf2(2, -2)) // 0
console.log(array.lastIndexOf2(2, -1)) // 3

5. includes

Basic use:

The includes method is used to determine whether an array contains a specified value. If it does, it returns true, otherwise it returns false . mdn

arr.includes(valueToFind[, fromIndex])

Note:

Search valueToFind starting from the fromIndex index.
If it is a negative value, the search starts at the index of array.length + fromIndex in ascending order.
If there is NaN in the array ，[ ..., NaN ].includes(NaN ) is true

console.log([1, 2, 3].includes(2)) // true
console.log([1, 2, 3].includes(4)) // false
console.log([1, 2, 3].includes(3, 3)) // false
console.log([1, 2, 3].includes(3, -1)) // true
console.log([1, 2, NaN].includes(NaN)) // true

Code implementation:

Click to view source code implementation

Array.prototype.includes2 = function (targetEle, fromIndex) {
  const length = this.length

  fromIndex = +fromIndex || 0

  // If the array is empty or the search starts from a position greater than or equal to the length of the array, the value is -1.
  if (length === 0 || fromIndex >= length) {
    return false
  }
  /*
    1. Start searching for elements from fromIndex 2. If fromIndex is greater than 0, just take it directly 3. If it is less than 0, first subtract the absolute value of fromIndex from the length. If it is still less than 0, just take 0 directly*/
  let i = Math.max(fromIndex >= 0 ? fromIndex : length - Math.abs(fromIndex), 0)

  while (i < length) {
    const value = this[ i ]
    // Pay attention to the NaN situation if (targetEle === value || typeof targetEle === 'number' && typeof value === 'number' && isNaN(targetEle) && isNaN(value)) {
      return true
    }

    i++
  }

  return false
}

test:

console.log([1, 2, 3].includes2(2)) // true
console.log([1, 2, 3].includes2(4)) // false
console.log([1, 2, 3].includes2(3, 3)) // false
console.log([1, 2, 3].includes2(3, -1)) // true
console.log([1, 2, NaN].includes2(NaN)) // true

3. Addition, deletion and modification

1. push

Basic use:

The push method adds one or more elements to the end of an array and returns the new length of the array. mdn

const animals = ['pigs', 'goats', 'sheep']
animals.push('cows')

console.log(animals, animals.length) 
// ["pigs", "goats", "sheep", "cows"], 4

animals.push('chickens', 'cats', 'dogs')

console.log(animals, animals.length) 

// ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"], 7

Code implementation :

Click to view source code implementation

Array.prototype.push2 = function (...pushEles) {
  const pushEleLength = pushEles.length
  const length = this.length

  let i = 0
  
  while (i < pushEleLength) {
    this[ length + i ] = pushEles[ i ]
    i++
  }

  return this.length
}

test:

const animals = ['pigs', 'goats', 'sheep']
animals.push2('cows')

console.log(animals, animals.length) 
// ["pigs", "goats", "sheep", "cows"], 4

animals.push2('chickens', 'cats', 'dogs')

console.log(animals, animals.length) 

// ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"], 7

2. pop

Basic use:

The pop method removes the last element from an array and returns the value of that element. This method changes the length of an array. mdn

let arr = [ 1, 2 ]
let arr2 = []

console.log(arr.pop(), arr) // 2 [1]
console.log(arr2.pop(), arr2) // undefined []

The code is as simple to implement as it is to use. Just return the last element of the array and reduce the length of the array by 1.

Code implementation:

Click to view source code implementation

Array.prototype.pop2 = function () {
  const length = this.length
  // Pop on an empty array and return undefined directly
  if (length === 0) {
    return undefined
  }

  const delEle = this[length - 1]

  this.length = length - 1

  return delEle
}

test:

let arr = [ 1, 2 ]
let arr2 = []

console.log(arr.pop2(), arr) // 2 [1]
console.log(arr2.pop2(), arr2) // undefined []

3. unshift

Basic use:

The unshift method adds one or more elements to the beginning of an array and returns the new length of the array (this method modifies the original array).

Note:

If multiple arguments are passed, they will be inserted at the beginning of the object as a block, in the same order as they were passed as arguments.
Calling unshift once with multiple arguments will produce different results than calling unshift multiple times with one argument (for example, in a loop).

For example:

let arr = [4,5,6]
// Insert arr.unshift(1,2,3) at one time

console.log(arr) // [1, 2, 3, 4, 5, 6]

let arr2 = [4,5,6]
// Insert multiple times arr2.unshift(1)
arr2.unshift(2)
arr2.unshift(3)

console.log(arr2); // [3, 2, 1, 4, 5, 6]

Code implementation:

Click to view source code implementation

Array.prototype.unshift2 = function (...unshiftEles) {
  // With the help of the extension operator, insert the elements to be added to the front of the array in the form of a block let newArray = [ ...unshiftEles, ...this ]
  let length = newArray.length
  
  let i = 0

  if (unshiftEles.length === 0) {
    return length
  }
  // Re-copy to array while (i < length) {
    this[ i ] = newArray[ i ]
    i++
  }
  
  return this.length
}

test:

let arr = [4,5,6]
// Insert arr.unshift2(1,2,3) at one time

console.log(arr) // [1, 2, 3, 4, 5, 6]

let arr2 = [4,5,6]
// Insert multiple times arr2.unshift2(1)
arr2.unshift2(2)
arr2.unshift2(3)

console.log(arr2); // [3, 2, 1, 4, 5, 6]

4. shift

Basic use:

The shift method removes the first element from an array and returns the value of that element. mdn

let arr = [ 1, 2 ]

console.log(arr.shift(), arr) // 1 [2]
console.log(arr.shift(), arr) // 2 []

Code implementation:

Click to view source code implementation

Array.prototype.shift2 = function () {
  const length = this.length
  const delValue = this[ 0 ]

  let i = 1

  while (i < length) {
    // Starting from the first element, the following elements are moved forward one position this[ i - 1 ] = this[ i ]
    i++
  }
  // Set the length of the array this.length = length - 1
  // Return the deleted value return delValue
}

test:

let arr = [ 1, 2 ]

console.log(arr.shift2(), arr) // 1 [2]
console.log(arr.shift2(), arr) // 2 []

5. reverse

Basic use:

The reverse method reverses the position of the elements in an array and returns the array. That is, the first element of the array becomes the last, and the last element of the array becomes the first. mdn

```javascript
const arr = [1, 2, 3]

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

arr.reverse()

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

Code implementation:

Click to view source code implementation

Array.prototype.reverse2 = function () {
  // Set the double pointer to move closer to the middle let i = 0
  let j = this.length - 1

  while (i < j) {
    // Swap the first and last, and the second and second to last [ this[ i ], this[ j ] ] = [ this[ j ], this[ i ] ]
    i++
    j--
  }

  return this
}

test:

const arr = [1, 2, 3]

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

arr.reverse2()

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

6. fill

Basic use:

The fill method fills all elements in an array from the start index to the end index with a fixed value. The ending index is not included. mdn

const array1 = [1, 2, 3, 4];

console.log(array1.fill(0, 2, 4)) // [1, 2, 0, 0]


console.log(array1.fill(5, 1)) // [1, 5, 5, 5]

console.log(array1.fill(6)) // [6, 6, 6, 6]

Code implementation:

Click to view source code implementation

Array.prototype.fill2 = function (value, start, end) {
  const length = this.length

  start = start >> 0
  // If end is not filled in, the default is length, otherwise the filled end = typeof end === 'undefined' ? length : end >> 0
  // The minimum start value is 0 and the maximum value is length
  start = start >= 0 ? Math.min(start, length) : Math.max(start + length, 0)
  // The minimum value of end is 0 and the maximum value is length 
  end = end >= 0 ? Math.min(end, length) : Math.max(end + length, 0)
  // Fill the specified range with index value
  while (start < end) {
    this[ start ] = value
    start++
  }
  // Return the modified array return this
}

test:

const array1 = [1, 2, 3, 4];

console.log(array1.fill2(0, 2, 4)) // [1, 2, 0, 0]


console.log(array1.fill2(5, 1)) // [1, 5, 5, 5]

console.log(array1.fill2(6)) // [6, 6, 6, 6]


Connection, splicing

7. concat

Basic use:

concat method is used to merge two or more arrays. This method does not change the existing array, but returns a new array mdn

 let num1 = [[1]]
let num2 = [2, [3]]
let num3=[5,[6]]

let nums = num1.concat(num2) // [[1], 2, [3]]
let nums2 = num1.concat(4, num3) // [[1], 4, 5,[6]]

Code implementation:

Click to view source code implementation

Array.prototype.concat2 = function (...concatEles) {
  const length = concatEles.length
  // Expand the array itself one layer let newArray = [ ...this ]
  let i = 0

  while (i < length) {
    const value = concatEles[ i ]
    // Expand one layer of array elements Array.isArray(value) ? newArray.push(...value) : newArray.push(value)
    i++
  }

  return newArray
}

test:

let num1 = [[1]]
let num2 = [2, [3]]
let num3=[5,[6]]

let nums = num1.concat2(num2) // [[1], 2, [3]]
let nums2 = num1.concat2(4, num3) // [[1], 4, 5,[6]]

8. join

Basic use:

The join method concatenates all elements of an array into a string through string identifiers and returns the string. If the array has only one item, that item is returned without the separator.

const elements = ['Fire', 'Air', 'Water']
const elements2 = ['Fire']

console.log(elements.join()) // Fire,Air,Water
console.log(elements.join('')) // FireAirWater
console.log(elements.join('-')) // Fire-Air-Water
console.log(elements2.join('-')) // Fire

Code implementation:

Click to view source code implementation

Array.prototype.join2 = function (format = ',') {
  const length = this.length
  // Save the last element because it does not participate in the format connection let lastEle = this[length - 1]
  let string = ''

  if (length === 0) {
    return string
  }

  for (i = 0; i < length - 1; i++) {
    string += this[ i ] + format
  }

  return string + lastEle
}

test:

const elements = ['Fire', 'Air', 'Water']
const elements2 = ['Fire']

console.log(elements.join2()) // Fire,Air,Water
console.log(elements.join2('')) // FireAirWater
console.log(elements.join2('-')) // Fire-Air-Water
console.log(elements2.join2('-')) // Fire

4. Static Methods

1. Array.isArray

Basic use:

Array.isArray() is used to determine whether the passed value is an Array.

Array.isArray([1, 2, 3]) // true

Array.isArray({foo: 123}) // false

Array.isArray("foobar") // false

Array.isArray(undefined) // false

Code implementation:

Click to view source code implementation

This is very simple, just one sentence

Array.isArray2 = function (ele) {
  return Object.prototype.toString.call(ele) === '[object Array]';
}

test:

Array.isArray2([1, 2, 3]) // true

Array.isArray2({foo: 123}) // false

Array.isArray2("foobar") // false

Array.isArray2(undefined) // false

2. Array.of

Basic use:

Array.of method creates a new array instance with a variable number of arguments, regardless of the number or type of the arguments.

Note:

The difference between Array.of() and the Array constructor is in the handling of integer arguments:
Array.of(7) creates an array with a single element 7, whereas Array(7) creates an empty array of length 7 (note: this means an array with 7 empty slots, not an array consisting of 7 undefineds).

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

Code implementation:

Click to view source code implementation

The implementation idea is to assign the values you put in to the current array one by one.

Array.of2 = function (...eles) {
  const length = eles.length
  let i = 0
  let newArray = []

  while (i < length) {
    newArray[ i ] = eles[ i ]
    i++
  }

  return newArray
}

test:

Array.of2(7); // [7]
Array.of2(1, 2, 3); // [1, 2, 3]

5. Flat

1. flat

Basic use:

flat() method recursively traverses an array to a specified depth and merges all elements with the elements in the traversed subarray into a new array and returns it. mdn

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat()) // [0, 1, 2, 3, 4] will be flattened by default const arr2 = [0, 1, 2, [[[3, 4]]]]

console.log(arr2.flat(2)) // [0, 1, 2, [3, 4]] specifies expanding two layers

Code implementation:

Click to view source code implementation

Array.prototype.flat2 = function (depth = 1) {
  const result = []
  const flat = (arr, depth) => {
    for (let item of arr) {
      // When the number of layers has not been fully expanded, recursive processing if (Array.isArray(item) && depth > 0) {
        flat(item, depth - 1)
      } else {
        // Remove empty elements and add non-undefined elements item !== void 0 && result.push(item)
      }
    }
  }

  flat(this, depth)

  return result
}

test:

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat2()) // [0, 1, 2, 3, 4]


const arr2 = [0, 1, 2, [[[3, 4]]]]

console.log(arr2.flat2(2)) // [0, 1, 2, [3, 4]]

2. flatMap

Basic use:

flatMap method first maps each element using the mapping function and then zips the results into a new array. It is almost the same as a map connected to a flat with a depth value of 1. mdn

let arr = [1, 2, 3, 4]


arr.flatMap(x => [x * 2]) // [2, 4, 6, 8]

Code implementation:

Click to view source code implementation

Array.prototype.flatMap2 = function (callback, thisCtx) {
  if (typeof callback !== 'function') {
    throw `${callback} is not a function`
  }
  // For the specific implementation of map and flat, please refer to map.js and flat.js
  return this.map(function (it, i, array) {
    return callback.call(thisCtx, it, i, array)
  }).flat(1)
}

test:

let arr = [1, 2, 3, 4]


arr.flatMap2(x => [x * 2]) // [2, 4, 6, 8]

Ending:

This is the end of this article about how to implement 24+ array methods in JavaScript by hand. For more information about implementing 24+ array methods in JavaScript, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

National Day is approaching, I wish you all a happy holiday and seven days of fun.

You may also be interested in: