object and array reference types for JavaScript Advanced Programming notes

  • 2020-09-16 07:22:50
  • OfStack

This article shares my object and array reference types from my javascript Advanced Programming study notes, starting with the javascript reference types.

1. Object type

Most reference type values are instances of the Object type; Object is also the most used type in ECMAScript.

There are two ways to create an Object instance:

The new operator followed by the Object constructor:


   var person=new Object( );
   person.name="webb";
   person.age=25;

Object literal representation:


  var person={
     name:"webb",
     age:25
   };

2. Array type

After Object, the Array type is probably the most commonly used in ECMAScript.
Each item in an ECMAScript array can hold any type of data (for example, the first location holds strings, the second location holds values, the third location holds objects, and so on). And the ECMAScript array can be dynamically resized, that is, it can automatically grow as data is added to accommodate new data.

There are two basic ways to create an array,

Use the Array constructor:


var colors=new Array( );
     var colors=new Array(20);   // Also can be set up length attribute 
     var colors=new Array("red","blue","green");   // contains 3 An array of strings 
     var colors=Array(3);   // Can be omitted new The operator 

Array literal representation


 var colors=["red","blue","green"];
     alert(colors[0]);   // According to the first 1 item 
     colors[2]="black";   // Modify the first 3 item 
     colors[3]="brown";   // The first new 4 item 

Note: The length attribute of the array is unique -- it is not read-only. So by setting this property, you can remove or add items from the end of the array. For example,


     var colors=["red","blue","green"];
     colors.length=2;
     alert(colors[2]);   //undefined
     colors[colors.length]="black";   // Add an item at the end 

2.1 Detection array

For a web page, or for a global scope, the instanceof operator can be used to determine whether an object is an array:


   if(value instanceof Array){
        // Perform some operation on the array 
     }

The problem with the instanceof operator is that it assumes only one global execution environment. If there are multiple frameworks in a web page, there are actually two or more different global execution environments, and thus two or more different versions of the Array constructor. If you pass in an array from one frame to another, the array passed in has a different constructor than the array created natively in the second frame.

To solve this problem, ECMAScript5 added the ES64en.isArray () method. The purpose of this method is to finally determine whether a value is an array or not, regardless of which global execution environment it was created in,


if(Array.isArray(value)){
        // Perform some operation on the array 
     }

Browsers that support this method are IE9+, Firefox 4+, Safari 5+, Opera 10.5+, and Chrome.

2.2 Conversion method

Calling the array's toString() method returns one comma-separated string concatenated as a string for each value in the array. The call to valueOf() returns the same array. In fact, to create this string, the toString() method for each item in the array is called. For example,


var colors=["red","blue","green"];
     alert(colors.toString());   //red,blue,green
     alert(colors.valueOf());   //red,blue,green
     alert(colors);   //red,blue,green

Also, the toLocaleString() method often returns the same value as the toString() and valueOf() methods, but not always. When the toLocaleString() method of the array is called, it also creates a comma-separated string of 1 array value. The only difference from the previous two methods is that in order to get the value of each item this time, the toLocaleString() method for each item is called instead of the toString() method.


  var person1={
        toLocaleString:function(){
          return "webbxx";
        },
        toString:function(){
          return "webb";
        }
     };
     var person2={
        toLocaleString:function(){
          return "susanxx";
        },
        toString:function(){
          return "susan";
        }
     };
     var people=[person1,person2];
     alert(people);   //webb,susan
     alert(people.toString());   //webb,susan
     alert(people.toLocaleString());   //webbxx,susanxx
      use join( ) Method can also output an array and specify a delimiter, which defaults to comma: 
          var colors=["red","blue","green"];
          alert(colors.join(","));   //red,blue,green
          alert(colors.join("||"));   //red||blue||green

2.3 Stack method (LIFO)

push() : Takes any number of arguments, adds them to the end of the array one by one, and returns the length of the modified array.
pop() : Removes the last item from the end of the array


  var colors=new Array();
        var count=colors.push("red","green");
        alert(count);   //2
        count=colors.push("black");
        alert(count);   //3
        var item=colors.pop();
        alert(item);   //"black"
        alert(colors.length);   //2

2.4 Queue Method (FIFO)

shift() : Removes the first item of the array and returns it, reducing the array length by 1;
unshift() : As the name implies, as opposed to shift(), you can add any item to the front end of an array and return the length of the array.

2.5 Reordering method

reverse() : Reverses the order of array items;

sort() : Sort in ascending order by default; To sort, the sort() method calls the toString() method for each item, and then compares the resulting string to determine how to sort it. Even if each item is a numeric value, the comparison is a string, as shown below.


  var person={
     name:"webb",
     age:25
   };
0

This sort of ordering is not optimal in many cases. So the sort() method can take a comparison function as an argument to specify which value precedes which.


  var person={
     name:"webb",
     age:25
   };
1

This comparison function works for most data types as long as you pass it as an argument to the sort() method, as follows,



  var person={
     name:"webb",
     age:25
   };
2

2.6 Operation Method

concat() : Creates a new array based on all items in the current array. For example,


 var colors=["red","blue","green"];
        var colors2=colors.concat("yellow",["black","brown"]);
        alert(colors);   //red,blue,green
        alert(colors2);   //red,blue,green,yellow,black,brown

slice() : Creates a new array based on one or more items in the current array. For example,


  var person={
     name:"webb",
     age:25
   };
4

splice() : This is probably the most powerful array method, and its main purpose is to insert items into the middle of an array, but there are two ways to use this method.

Delete: You can delete any number of items by specifying only two parameters: the location of the first item to be deleted and the number of items to be deleted.

Insert: You can insert as many items as you want into a given location by providing only three parameters: the starting position, 0 (the number of items to delete), and the items to insert. If you want to insert more than one item, you can pass 4, 5, or any number of items. For example, splice(2,0,"red","green") inserts the strings "red" and "green" from position 2 of the current array.

The splice() method always returns an array containing the items removed from the original array (or an empty array if no items are removed).

2.7 Position method

indexOf() and lastIndexOf() : Both methods take two parameters: the item to look for and (optionally) the index that represents the starting point location of the lookup. The former looks backwards from the beginning, and the latter looks forwards from the end

2.8 Iterative method

ECMAScript5 defines five iteration methods for the array, each of which takes two arguments: the function to run on each item and (optionally) the scope object to run the function -- affecting the value of this. Functions passed in these methods take three arguments: the value of the array item, the position of the item in the array, and the array object itself.

every() : Run the given function on each item in the array, returning true if the function returns true for each item.
filter() : Run a given function on each item in the array that returns an array of true items.
forEach() : Run the given function for each item in the array. This method has no return value.
map() : Runs a given function for each item in the array, returning an array of the results of each function call.
some() : Run the given function for each item in the array, returning true if the function returns true for any item.

None of the above methods modify the values contained in the array. For example,


  var person={
     name:"webb",
     age:25
   };
5

2.9 Merge method

reduce() : Start at item 1 of the array and iterate until the end.
reduceRight() : Starting with the last item in the array, traverse forward to the first item.
Both methods take two arguments: a function called on each item and (optionally) as the initial value on which the merge is based. The function passed to these methods takes four arguments: the first value, the current value, the index of the item, and the array object. Any value returned by this function is passed as the first argument to the next item. For example,


  var person={
     name:"webb",
     age:25
   };
6


Related articles: