The method of js class array to array (ArrayLike) apply(), call(), bind() methods in js function

1. What is ArrayLike

  • Has the length property, and other properties (indexes) are non-negative integers (the index in the object will be treated as a string, here you can understand it as a non-negative integer string)
  • does not have the methods that arrays have
copy code
// Class array example 
var a = {'1':'gg','2':'love','4':'meimei',length:5 };
Array.prototype.join.call(a,'+');//'+gg+love++meimei'

// non-array-like example 
var c = {'1':2};    // no length property is not an array-like
copy code

Common array-like types in javascript include argumentsobjects and the return results of DOM methods.
For example  document.getElementsByTagName().

2. Determine if an object is an array-like

copy code
function isArrayLike(o) {
    if (o &&                                // o is not null, undefined, etc.
        typeof o === 'object' &&            // o is an object
        isFinite(o.length) &&               // o.length is a finite number
        o.length >= 0 &&                    // o.length is non-negative
        o.length===Math.floor(o.length) &&  // o.length is an integer
        o.length < 4294967296)              // o.length < 2^32
        return true;                        // Then o is array-like
    else
        return false;                       // Otherwise it is not
}
copy code

3. What are the advantages of performing operations after converting an array-like array to an array?

Since the array-like does not have the method of manipulating the array that the array has, it is convenient and quick to call such powerful methods as shift, unshift, splice, slice, concat, reverse, sort, etc. after the array-like is converted into an array.

4. Convert class array to array method

Array.prototype.slice.call(arrayLike)

//将arguments转化为数组后,截取第一个元素之后的所有元素
  var args = Array.prototype.slice.call(arguments,1);

First, the result of Array.prototype.slice.call(arrayLike) is to convert the arrayLike object into an Array object. So it can directly call the methods that the array has, such as

Array.prototype.slice.call(arrayLike).forEach( function (element,index){   // You can operate each element at will})

(1) Array.prototype.slice represents the slice method in the prototype of the array. Note that the slice method returns an object of type Array.

copy code
// Internal implementation of slice 
Array.prototype.slice = function (start,end){  
       var result = new Array();  
      start = start || 0;  
      end = end || this .length; // this points to the called object. When call is used, it can change the point of this, that is, point to the passed in object. This is the key   
      for ( var i = start; i < end ; i++ ){  
           result.push(this[i]);  
      }  
      return result;  
 }
copy code

(2) Only methods can be called, so [].call cannot be used, but [].slice must be used. The first parameter of call indicates that the environment in which the slice is actually called becomes the arrayLike object. So it's as if arrayLike also has methods for arrays.

(3) Attach a general function that is converted into an array

copy code
var toArray = function(s){  
    try{  
        return Array.prototype.slice.call(s);  
    } catch (e){  
             var arr = [];  
             for ( var i = 0,len = s.length; i < len; i++ ){  
                 // arr.push(s[i]);   
                 arr[i] = s [i];      // It is said to be faster than push 
            }  
              return arr;  
    }
copy code

5. Convert array to parameter list (array-like)

When calling the apply method , the first parameter is an object (this), and the second parameter is an array collection. Here is a clever use of apply, which can convert an array into a parameter list by default ([param1,param2] ,param3] is converted to param1, param2, param3), if we use a program to convert each item of the array into a list of parameters, it may take a while, with the help of this feature of apply, so There are the following efficient methods.

For details, please refer to   the apply(), call(), bind() methods in the js function in the previous article  ---(Other clever uses of apply (generally when you can use apply))

 

1. What is ArrayLike

  • Has the length property, and other properties (indexes) are non-negative integers (the index in the object will be treated as a string, here you can understand it as a non-negative integer string)
  • does not have the methods that arrays have
copy code
// Class array example 
var a = {'1':'gg','2':'love','4':'meimei',length:5 };
Array.prototype.join.call(a,'+');//'+gg+love++meimei'

// non-array-like example 
var c = {'1':2};    // no length property is not an array-like
copy code

Common array-like types in javascript include argumentsobjects and the return results of DOM methods.
For example  document.getElementsByTagName().

2. Determine if an object is an array-like

copy code
function isArrayLike(o) {
    if (o &&                                // o is not null, undefined, etc.
        typeof o === 'object' &&            // o is an object
        isFinite(o.length) &&               // o.length is a finite number
        o.length >= 0 &&                    // o.length is non-negative
        o.length===Math.floor(o.length) &&  // o.length is an integer
        o.length < 4294967296)              // o.length < 2^32
        return true;                        // Then o is array-like
    else
        return false;                       // Otherwise it is not
}
copy code

3. What are the advantages of performing operations after converting an array-like array to an array?

Since the array-like does not have the method of manipulating the array that the array has, it is convenient and quick to call such powerful methods as shift, unshift, splice, slice, concat, reverse, sort, etc. after the array-like is converted into an array.

4. Convert class array to array method

Array.prototype.slice.call(arrayLike)

//将arguments转化为数组后,截取第一个元素之后的所有元素
  var args = Array.prototype.slice.call(arguments,1);

First, the result of Array.prototype.slice.call(arrayLike) is to convert the arrayLike object into an Array object. So it can directly call the methods that the array has, such as

Array.prototype.slice.call(arrayLike).forEach( function (element,index){   // You can operate each element at will})

(1) Array.prototype.slice represents the slice method in the prototype of the array. Note that the slice method returns an object of type Array.

copy code
// Internal implementation of slice 
Array.prototype.slice = function (start,end){  
       var result = new Array();  
      start = start || 0;  
      end = end || this .length; // this points to the called object. When call is used, it can change the point of this, that is, point to the passed in object. This is the key   
      for ( var i = start; i < end ; i++ ){  
           result.push(this[i]);  
      }  
      return result;  
 }
copy code

(2) Only methods can be called, so [].call cannot be used, but [].slice must be used. The first parameter of call indicates that the environment in which the slice is actually called becomes the arrayLike object. So it's as if arrayLike also has methods for arrays.

(3) Attach a general function that is converted into an array

copy code
var toArray = function(s){  
    try{  
        return Array.prototype.slice.call(s);  
    } catch (e){  
             var arr = [];  
             for ( var i = 0,len = s.length; i < len; i++ ){  
                 // arr.push(s[i]);   
                 arr[i] = s [i];      // It is said to be faster than push 
            }  
              return arr;  
    }
copy code

5. Convert array to parameter list (array-like)

When calling the apply method , the first parameter is an object (this), and the second parameter is an array collection. Here is a clever use of apply, which can convert an array into a parameter list by default ([param1,param2] ,param3] is converted to param1, param2, param3), if we use a program to convert each item of the array into a list of parameters, it may take a while, with the help of this feature of apply, so There are the following efficient methods.

For details, please refer to   the apply(), call(), bind() methods in the js function in the previous article  ---(Other clever uses of apply (generally when you can use apply))

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324799173&siteId=291194637