[Effective JavaScript note] 51st: Reusing a common array method on a class array object

A few of the previous standard methods of Array.prototype were mentioned. These standard methods are designed to be reusable by other objects, even though the objects do not inherit the array. Arguments Object

The function arguments object referred to in article 22. It is a class array object, not a standard array, so the methods in the array prototype cannot be used, so it is not possible to use the form of Arguments.foreach to traverse each parameter. Here we have to use the call method to use the Foreach method.

function highlight(){  [].forEach.call(arguments,function(widget){     widget.setBackground(‘yellow‘);  });}

foreach is a function object, so it inherits the call method from the Function.prototype object. You can use a specified object as the binding object of this inside the function to invoke it and immediately follow any number of arguments.
# # NodeList Objects
In the Web platform, the NodeList class of the DOM is another class array object. A similar document.getelementsbytagname returns a NodeList class array object. This object also does not inherit from Array.prototype. Class Array Object

How do I build a class array object?

• Has an integer range of 0 to 2^32-1 length property

• The length property is greater than the maximum index of the object. An index is an integer in the range of 0 to 2^32-1, whose string representation is a key in the object
  By implementing these two points, you can make an object compatible with any of the methods in Array.prototype.
  A simple object literal can also be used to create an array object of the class.

var arrayLike={0:‘a‘,1:‘b‘,2:‘c‘,length:3};var res=Array.prototype.map.call(arrayLike,function(s){    return s.toUpperCase();});res;//[‘A‘,‘B‘,‘C‘]

String

They can also be represented as arrays, because they are indexable, and their lengths can also be obtained through the length property.
Therefore, the method in Array.protoype does not modify the original string when the string is manipulated.

var res=Array.prototype.map.call(‘abc‘,function(s){return s.toUpperCase();});res;//[‘A‘,‘B‘,‘C‘]

Analog arrays

The behavior of the simulated array is attributed to two aspects of the array behavior:

• Setting the value of the length property to less than n automatically removes all properties with an index value greater than or equal to n

• Adding a property with an index value of n (greater than or equal to the length property value) automatically sets the length property to N+1
  The 2nd rule is not well implemented, as it is necessary to monitor the increment of indexed properties to automatically update the length property.
  Both of these are not necessary for methods in Array.prototype because they are forced to update the length property when an indexed property is added or dropped.
  Only one of the array methods is not universal, that is, the array join method concat. The method can be called by any receiver of the class array, but it checks its parameter [[Class]] property. If the argument is a real array, concat will concatenate the contents of the array as a result; otherwise, the parameter will be concatenated with a single element.
  For example, you cannot simply connect an array with an arguments object as the content.

function namesColumn(){  return [‘Names‘].concat(arguments);}namesColumn(‘张三‘,‘李四‘,‘王五‘);//["Names", Arguments[3]0: "张三"1: "李四"2: "王五"callee: namesColumn()length: 3Symbol(Symbol.iterator): values()__proto__: Object]

Having the concat method treat a class array object as a real array, you need to convert the class array to a true array. Use Slice to convert a class array object.

function namesColumn(){  return [‘Names‘].concat([].slice.call(arguments));}namesColumn(‘张三‘,‘李四‘,‘王五‘);//["Names", "张三", "李四", "王五"]

Tips

• For a class array object, by extracting the method object and using its call method to use the universal array method

• Any object that has an indexed property and an appropriate length property can use the universal array method

[Effective JavaScript note] 51st: Reusing a common array method on a class array object