Detailed explanation of how to use the function apply method in Javascript

Function.prototype.apply()

#The apply method is similar to the call method. It also changes the point of this (the scope where the function is executed), and then in Call this function in the specified scope. The function will also be executed immediately. The only difference is that it receives an array as a parameter when the function is executed.

The first parameter of the apply method is also the object that this points to. If it is set to null or undefined or this, it is equivalent to specifying the global object. The second parameter is an array, and all members of the array are used as parameters in turn and passed into the original function when calling. The parameters of the original function must be added one by one in the call method, but in the apply method, they must be added in the form of an array.

Look at the subtle differences between call and apply.

function keith(a, b) {
 console.log(a + b);
 }
 keith.call(null, 2, 3); //5
 keith.apply(null, [2, 3]); //5

In the above code, the first parameter is null, pointing to the global scope; the second parameter is passed in a slightly different form.

The apply method has the following applications.

3.1: Find the maximum number in the array

var a = [2, 4, 5, 7, 8, 10];
console.log(Math.max.apply(null, a)); //10
console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10　

Javascript does not provide a method to find the maximum value in the array By combining the apply and Math.max methods inherited from Function.prototype, you can return the maximum value of the array.

3.2: Change the empty element of the array to undefined

Through the apply method, use the Array constructor to change the empty element of the array to undefined.

console.log(Array.apply(null, [1, , 3])); // [1, undefined, 3]

Empty elements and undefined The difference is that the forEach method of the array will skip empty elements, but will not skip undefined and null. Therefore, when traversing the inner elements, you will get different results.

var a = [1, , 3];
 a.forEach(function(index) {
 console.log(index); //1,3 ，跳过了空元素。
 })
 Array.apply(null,a).forEach(function(index){
 console.log(index); ////1,undefined,3 ，将空元素设置为undefined
 })

3.3: Convert an array-like object

In addition, using the slice method of the array object, you can convert an array-like object into Objects (such as arguments objects) are converted to real arrays. Of course, an important application of the slice method is to convert array-like objects into real arrays. Both call and apply can implement this application.

console.log(Array.prototype.slice.apply({0:1,length:1})); //[1]
console.log(Array.prototype.slice.call({0:1,length:1})); //[1]
console.log(Array.prototype.slice.apply({0:1,length:2})); //[1,undefined]
console.log(Array.prototype.slice.call({0:1,length:2})); //[1,undefined]
function keith(a,b,c){
 return arguments;
 }
console.log(Array.prototype.slice.call(keith(2,3,4))); //[2,3,4]

The parameters of the call and apply methods in the above code are all objects, but the return results are all arrays, which serves the purpose of converting the objects into arrays. As you can see from the above code, the premise for this method to work is that the object being processed must have a length attribute and a corresponding numeric key.

The above is the detailed content of Detailed explanation of how to use the function apply method in Javascript. For more information, please follow other related articles on the PHP Chinese website!