There is a special class of objects in JavaScript called array-like objects that are similar in nature to arrays. We often come across various array-like objects, the most common of which is Argumengs.

Array like object

An array-like object is an object that can access an element through an index attribute and has a length attribute.

A simple array-like object looks like this

var arrLike = {
  0: 'name',
  1: 'age',
  2: 'job',
  length: 3
}
Copy the code

And its corresponding array would look something like this

var arr = ['name'.'age'.'job'];
Copy the code

We say that array-like objects are similar to arrays because array-like objects access, assign, and obtain lengths the same way arrays do.

Array and array-like object access

console.log(arr[0]); // name
console.log(arrLike[0]); // name
Copy the code

Assignment of arrays and array-like objects

arr[0] = 'new name';
arrLike[0] = 'new name';
Copy the code

Gets the length of an array and a class array object

console.log(arr.length); // 3 console.log(arrLike.length); / / 3Copy the code

As you can see, accessing, assigning, and getting lengths are the same for array-like objects as they are for arrays. So, what’s the difference between an array-like object and an array?

Array-like objects differ from arrays in that array-like objects cannot use array methods directly.

The following array-like objects will get an error when using array methods

arrLike.push('hobby');  // Uncaught TypeError: arrLike.push is not a function
Copy the code

So what if we want an array-like object to use array methods just like an array? We usually call it indirectly through the function. call or function. apply method.

/ / use the call
Array.prototype.push.call(arrLike, 'hobby');
console.log(arrLike); // { '0': 'name', '1': 'age', '2': 'job', '3': 'hobby', length: 4 }
var arrLikeStr = Array.prototype.join.call(arrLike, '&')
console.log(arrLikeStr); // name&age&job&hobby
Copy the code
/ / use the apply
Array.prototype.push.apply(arrLike, ['hobby']);
console.log(arrLike); // { '0': 'name', '1': 'age', '2': 'job', '3': 'hobby', length: 4 }
var arrLikeStr = Array.prototype.join.apply(arrLike, ['&'])
console.log(arrLikeStr); // name&age&job&hobby
Copy the code

In order to facilitate data manipulation, we often use array.prototype. slice or array.prototype. splice to convert array-like objects into real arrays.

/ / use the call
console.log(Array.prototype.slice.call(arrLike,0));
console.log(Array.prototype.splice.call(arrLike,0));  // Will change the original array object
Copy the code
/ / use the apply
console.log(Array.prototype.slice.apply(arrLike,[0]));
console.log(Array.prototype.splice.apply(arrLike,[0]));  // Will change the original array object
Copy the code

Note that array.prototype. slice does not change the array.prototype. splice does change the array.prototype. splice changes the array.prototype. splice changes the array.prototype. splice does.

arguments

The Arguments object is defined in the function body, which contains the Arguments and other properties of the function and is referred to as the Arguments variable.

For example

function fn(name, age, job) {
    console.log(arguments);
}

fn('ttsy'.'25'.'front end')
Copy the code

On the console we can see the above function printed as follows

As you can see arguments include arguments, length, and callee attributes passed by the function.

The length attribute represents the length of the argument, which is the number of arguments passed in when the function is called.

function fn(name, age, job) {
    console.log(arguments.length);  // 2
}

fn('ttsy'.'25')
Copy the code

The callee attribute points to the function itself, which is used to call its own function.

Arguments is a classic array-like object. We can call array methods indirectly using the above function. call or function. apply methods. Slice or array.prototype. splice can also be used directly to convert array-like objects into real arrays.