Writing in the front

Because I was asked in an interview have you used all the built-in methods of arrays? Are you aware of the parameters and usage of all built-in methods? I didn’t have all the answers, so I decided to go through all the built-in array methods from scratch and implement them myself. It’s mainly a knowledge comb, and readers can comb it all over again. The following methods will try to achieve all their own, it is difficult to Google, and then note the source. All source code at GITHUB.

concat

Concatenate an array, but do not alter the array, and return a concatenated array

Arguments: Can be arrays or non-arrays

Example 🌰

let a = [1.2.3]
let b = [4.5]
let c = [6.7.8.9]
a.concat(b, c) / /,2,3,4,5,6,7,8,9 [1]
Copy the code

Simple implementation

Array.prototype.concat2 = function (. arrays) {
  let copy = this.slice(0) // Don't use deep copy, because concat doesn't have deep copy either
  for (let i = 0; i < arrays.length; i++) {
    const item = arrays[i]
    if (!Array.isArray(item)) { // Instead of pushing an array directly into the copy
      copy.push(item)
    } else { // Arrays are concatenated recursively
      for (let j = 0; j < item.length; j++) {
        copy = copy.concat2(item[j])
      }
    }
  }
  return copy
}
Copy the code

Time complexity: approximately O(n)

copyWithin

Copies the elements of an array to another specified location in the array, alters the array. The copyWithin() method is not supported in IE 11 and earlier

parameter describe
target:Number Target location of copy (must)
start:Number The starting position of the element to be copied (optional, default is 0)
end:Number The end position of the element to be copied (optional, length by default)

Example 🌰

let a = [1.2.3.4.5.6]
a.copyWithin(2.0.1) / /,2,1,4,5,6 [1]
Copy the code

Simple implementation

Array.prototype.copyWithin2 = function (target, start, end) {
  start = start || 0
  end = end || this.length
  const copy = []
  for (let i = start; i < end; i++) {
    copy.push(this[i])
  }
  const len = this.length > copy.length ? copy.length : this.length // Determine the maximum length of the assignment to traverse
  for (let i = 0, j = target; i < len; i++, j++) {
    if (j >= this.length) {
      break
    }
    this[j] = copy[i]
  }
  return this
}
Copy the code

entries

Returns an iterable of an array, without modifying the source array

Iterators: iterators and iterators for… Of circulation

Example 🌰

let a = ['123'.'456'.'789']
let b = a.entries()
b.next() // {value: [0, '123'], done: false}
for (let v of b) {
  console.log(v)
}
/ / / 1, '456'
/ / / 2, '789'
Copy the code

Simple implementation

Array.prototype.entries2 = function () {
  return this[Symbol.iterator]()
}
Array.prototype[Symbol.iterator] = function () {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < this.length ?
        {value: this[nextIndex++], done: false}, {value: undefined.done: true}; }}}Copy the code

every

Each element is iterated to see if it satisfies the user-given callback, returning true if it does, false if it does not, and no further checks are made.

Empty arrays will not be checked, the original array will not be changed

Example 🌰

var ages = [32.33.16.40];

function checkAdult(age) {
    return age >= 18;
}

ages.every(checkAdult);// false
Copy the code

implementation

Array.prototype.every2 = function (fn) {
  if (this.length > 0) {
    for (let i = 0; i < this.length; i++) {
      if(! fn(this[i])) {
        return false}}}return true
}
Copy the code

fill

Changes the array by replacing the element at the specified position with a specific value.

Parameters:

parameter describe
value A necessity. The value of the fill.
start Optional. Start filling the position.
end Optional. Stop filling position (default isarray.length)

Example 🌰

var fruits = ["Banana"."Orange"."Apple"."Mango"];
fruits.fill("Runoob".2.4); // Banana,Orange,Runoob,Runoob
Copy the code

implementation

Array.prototype.fill2 = function (v, start = 0, end) {
  end = end || this.length
  for (let i = start; i < end; i++) {
    this[i] = v
  }
  return this
}
Copy the code

filter

Returns an array of elements that satisfy the callback function without changing the original array

Example 🌰

var ages = [32.33.16.40];

function checkAdult(age) {
    return age >= 18;
}
ages.filter(checkAdult);/ / 40] [32, 33,
Copy the code

implementation

Array.prototype.filter2 = function (fn, ctx) {
  ctx = ctx || this
  const res = []
  for (let i = 0; i < this.length; i++) {
    if (fn.apply(ctx, [this[i], i, this])) {
      res.push(this[i])
    }
  }
  return res
}
Copy the code

find

Returns the first value that satisfies the callback function

Return undefined without changing the array

Example 🌰

var ages = [3.10.18.20];
 
function checkAdult(age) {
    return age >= 18;
}
 
ages.find(checkAdult); / / 18
Copy the code

implementation

Array.prototype.find2 = function (fn, ctx) {
  ctx = ctx || this
  for (let i = 0; i < this.length; i++) {
    if (fn.apply(ctx, [this[i], i, this]) {return this[i]
    }
  }
  return
}
Copy the code

findIndex

Returns the position index of the first value that satisfies the callback function

Does not satisfy the return -1

It doesn’t change the original array

Example 🌰

var ages = [3.10.18.20];
 
function checkAdult(age) {
    return age >= 18;
}
 
ages.find(checkAdult); / / 2
Copy the code

implementation

Array.prototype.findIndex = function (fn, ctx) {
  ctx = ctx || this
  for (let i = 0; i < this.length; i++) {
    if (fn.apply(ctx, [this[i], i, this]) {return i
    }
  }
  return -1
}
Copy the code

forEach()

Each element of the array executes a callback. The original array will not be modified. However, this is modified when the element is of reference type.

Example 🌰

const b = [{v: 65}]
b.forEach(v= > v.v += 1)
//b [{v: 66}]
Copy the code

implementation

Array.prototype.forEach2 = function (fn, ctx = window) {
  for (let i = 0; i < this.length; i++) {
    fn.apply(ctx, [this[i], i, this])}}Copy the code

from()

Returns an array from an object that has the length attribute or an iterable object. (It has a second argument, which is a function, the same as map)

Example 🌰

let a = {0: 'demo'.1: 'demo2'.length: 2}
let b = Array.from(a)
console.log(b) //=>['demo', 'demo2']
Copy the code

implementation

Array.from2 = function (data, mapFun = function (item) {return item}) {
  let res = []
  if (data.length) {
    for (let i = 0; i < data.length; i++) {
      res[i] = mapFun(data[i]) || null}}else if (typeof data[Symbol.iterator] === 'function') {
    data.forEach((item) = > {
      res.push(mapFun(item))
    })
  }
  return res
}
Copy the code

includes()

Determines whether an array contains a specified value, including NaN.

Example 🌰

const a = [1.2.3.NaN]
a.includes(NaN) // true
Copy the code

implementation

Array.prototype.includes2 = function (el, fromIndex = 0) {
  if (typeof el === 'object') {
    return false
  }
  if (fromIndex < 0) {
    fromIndex = this.length + fromIndex
  }
  for (let i = fromIndex; i < this.length; i++) {
    if (el.toString() === 'NaN') {
      if (this[i].toString() === el.toString()) {
        return true}}else {
      if (this[i] === el) {
        return true}}}return false
}
Copy the code

conclusion

This is the first post, because there are so many built-in methods, the rest will be in the second post.

All the built-in methods of JS array and manual implementation (2).

All source code at GITHUB.

The author is just writing, there will be a lot of bad implementation, welcome to correct oh

If there are any shortcomings or mistakes, readers are welcome to comment and leave a message

Of course, if this article is of any help to you, please like and retweet it. Thank you 🙏