⭐

A:

  • Use extension operators
  • The use of Array. The from
  • Use the slice method of arrays

What is a pseudo-array?

The basic concept

Pseudo-arrays, also known as array-like arrays, are like arrays but not arrays, with the following characteristics:

  • Has the length attribute.
  • The elements of the pseudo-array can be accessed by index.
  • Cannot call a method on an array.

For example, the implicit argument to a function is a pseudo-array,

function add () {
  console.log('arguments :>> '.arguments)
  console.log('arguments.length :>> '.arguments.length)
  console.log('arguments[0] :>> '.arguments[0])
  arguments.push(1)
}

add(1.2.3)
Copy the code

What are the common pseudo-arrays in JS?

There is a collection of arguments and DOM elements.

function add () {
  console.log('arguments :>> '.arguments)
}

add(1.2.3)

const DOMTags = document.getElementsByClassName('test')
console.log('DOMTags :>> ', DOMTags)
console.log('document.childNodes :>> '.document.childNodes)
Copy the code

What is the type of the pseudo-array?

Calls to the Object. The prototype. The toString method look at some of the pseudo array type,

function add () {
  console.log('typeof arguments :>> '.Object.prototype.toString.call(arguments))
}

add(1.2.3)

const DOMTags = document.getElementsByClassName('test')

console.log('typeof DOMTags'.Object.prototype.toString.call(DOMTags))
console.log('typeof document.childNodes :>> '.Object.prototype.toString.call(document.childNodes))
Copy the code

It turns out that the pseudo-array types are specialized reference types, such as Arguments objects, HTMLCollection, and NodeList.

Pseudo-array to array

Extended operator

function add () {
  const args = [...arguments]
  args.push(1) // We can use the methods on the array
}

add(1.2.3)
Copy the code

Array.from

function add () {
  const args = Array.from(arguments)
  args.push(1) // We can use the methods on the array
}

add(1.2.3)
Copy the code

Array slice method

This method is not commonly used now, but it was used in ES6 before the extension operator and array. from.

function add () {
  const args = Array.prototype.slice.call(arguments)
  // Const args = [].slice.call(arguments)
  args.push(1) // We can use the methods on the array
}

add(1.2.3)
Copy the code

Why call

Call is a function method that changes the reference to this, or apply.

If you don’t change this to point to the target pseudo-array, this will always point to the array. prototype call and will not work.

Slice method principle

Loop through the pseudo-array, putting the elements of the pseudo-array one by one into a new array, and returning the new array, something like this:

Array.prototype.slice = function (start, end) {
  const res = []
  start = start || 0
  end = end || this.length
  for (let i = start; i < end; i++) {
    res.push(this[i]) // This is a pseudo-array, so call is called
  }
  return res
}
Copy the code

At the end

If my article is helpful to you, your 👍 is my biggest support ^_^

I’m Allyn, export insight technology, goodbye!

The last:

“Front End Daily Question (17)” hand write a deep copy

Next up:

Why are JS functions called first-class citizens?