Explore the similarities and differences of JavaScript objects and arrays, and the function variable caching techniques

The most classic and most controversial word in JavaScript is that everything in JavaScript is an object. This point to mention, is any jser are not unfamiliar with the object and array.

There was a time when it was amazing how the two data types used to store data are different. So, I'm going to explore.

First, master three kinds of data types

First of all, a prerequisite must be mastered, is to understand the JavaScript data type classification, mainly divided into the following three kinds:

The first type is scalar (scalar), which is a single string (string) or number (numbers), such as "Beijing", a separate word.

The second type is the sequence (sequence), which is a number of related data that are tied together in a certain order, also called an array or list, such as "Beijing, Shanghai."

The third type is mapping (mapping), which is a key/value pair (Key/value), that is, the data has a key name, and a corresponding key value, which is called hash/hash (hash) or dictionary (dictionary), such as "Capital: Beijing".

You can also know from here that an object is a type of data , and An array is a sequence of data .

For more detailed answers, refer to Nanyi's blog "Data type and JSON format"

　　

Ii. Declaration and instantiation of the method

1. Declaration and instantiation of objects
　　

The first way var obj = new Object (); obj.name = "Wall";//the second way var obj = {};obj.name = "wall";//the Third way var obj = {   "name": "Wal L "};//the Third Way of the minimalist version var obj = {   name:" Wall "//key reduced by a pair of double quotes};//the fourth way var obj = {};obj[" name "] =" Wall ";

　　

2. Declaration and instantiation of arrays

　　

The first way var arr = new Array (); arr[0] = "wall";//the second way var arr = [];arr[0] = "wall";//the Third way var arr = ["Wall"];//Fourth way var arr = [];arr.push ("Wall");//Strange Fifth way, is also a focus behind the key var arr = [];arr["name"] = "Wall";

Third, the mode of use

The value of name in the Output object Console.log (obj.name);//or Console.log (obj["name"]);//The value of name in the output array Console.log (arr[0]);// The value in the fifth way of the output array declaration is Console.log (arr["name"]);

Iv. comparison

As can be seen above, in fact, in the simple data storage requirements, select arrays and select objects for storage, the difference is not very large, and both can be used subscript way to access, so sometimes they have doubts in the end where the difference is.

The simplest difference is that the object, the system defaults to the length property, and the array is the default length property. This, in turn, involves an interesting phenomenon:

Under Chrome's console, output a simple example

　　

Here, someone will be wondering why the length of variable B will be 0! Why not 1.

To verify my idea, write another example:

　　

Originally, b["Test"] This key value is not put into the sequence of the array, where would it go? So I checked the structure of the variable B, and then re-instantiate a new variable B, comparing it, and finally found the reason:

        

It turns out that test is stored as an attribute value of an array, instead of being added to the array's data series, suddenly suddenly enlightened, hehe ~

It is also possible to conclude that an array is an object that can store the data of a sequence type, that is, the inheritance and extension of the object. The sequence type data of an array can be read and written by an integer subscript, and its custom property values can be accessed through the object's access to the property values, without interfering with each other.

V. Places to be aware of in object instantiation

The Third way var obj = {   "name": "Wall"};//the third Way of the minimalist version var obj = {   name: "Wall"//key reduced by a pair of double quotation marks};

Although the two approaches look different, they can be accessed using Obj.name, but a third approach is recommended instead of the minimalist version.

The reason for this is that if you instantiate it in a minimalist way, the key name is a JavaScript-reserved keyword that throws an error before ECMAScript 5 SyntaxError (an explanation from the JavaScript Secret Garden).

Six, the technique of function variable cache

I'm not going to say much, just go ahead and code:

define function var fun = function (options) {    if (!arguments.callee.arr) {      Arguments.callee.arr = {         "name": "Wall", "Who         ": "Jser"              };       Console.log ("Init");//identifies whether to call initialize    }    return arguments.callee.arr[options];}    Access Nameconsole.log ("name");//access to Whoconsole.log ("who");

The results of the operation are as follows:

So, obviously, as soon as the data is initialized, it will be stored under the current function object, and as one of its property values, the next operation will avoid repetitive work.

Maybe a lot of readers still don't quite understand what Arguments.callee is, but it's pointing to the object that calls the current method, which is fun.

The reason for this is that, in the actual production process, multi-person collaborative coding, may be accidentally put you here to change the function of the name of something, the role of the cache will be invalidated, and even error. However, one drawback is that in strict mode, Arguments.callee is disabled.

Finally, put on a not to do the above optimization of the code, in fact, the same effect (in fact, the Arguments.callee is replaced with fun).

define function var fun = function (options) {    if (!fun.arr) {      Fun.arr = {         ' name ': "Wall",         "who": "Jser"              };       Console.log ("Init");//identifies whether to call initialize    }    return fun.arr[options];}    Access Nameconsole.log ("name");//access to Whoconsole.log ("who");

In addition, the Arguments.callee here can be replaced with this pointer, however, the call should be aware of this pointer point, here can be called by the new function ().

Via:cnblogs.com/walls/p/4281531.html

Explore the similarities and differences of JavaScript objects and arrays, and the function variable caching techniques