1. Understand arrays
An array is a collection of certain types of data, and the data types can be integers, strings, or even objects.
Javascript does not support multidimensional arrays, but because arrays can contain objects (arrays are also objects), arrays can achieve functions similar to multidimensional arrays by nesting each other.
1.1 Defining an array
Declare an array with 10 elements:
The code copy is as follows: var a = new Array(10);
At this time, the memory space has been opened for a, containing 10 elements, and called with the array name plus [subscript], for example, a[2], but the element is not initialized at this time, and the call will return undefined.
The following code defines a variable array and assigns values.
The code copy is as follows:
var a = new Array();
a[0] = 10;
a[1] = "aaa";
a[2] = 12.6;
As mentioned above, objects can be placed in the array, such as the following code:
The code copy is as follows:
var a = new Array();
a[0] = true;
a[1] = document.getElementById("text");
a[2] = {x:11, y:22};
a[3] = new Array();
Arrays can also be assigned directly when instantiated, for example:
The code copy is as follows:
var a = new Array(1, 2, 3, 4, 5);
var b = [1, 2, 3, 4, 5];
a and b are both arrays, but b uses an implicit declaration and creates another instance. At this time, if alert(a==b) is used, false will be popped up
1.2 Multidimensional array
In fact, Javascript does not support multi-dimensional arrays. In asp, you can use dim a(10,3) to define multi-dimensional arrays. In Javascript, if you use var a = new Array(10,3) you will report an error.
But as mentioned before, an array can contain objects, so an element in the array can be declared as an array, for example:
The code copy is as follows:
var a = new Array();
a[0] = new Array();
a[0][0] = 1;
alert(a[0][0]); //Pop 1
Assign value when declared
The code copy is as follows:
var a = new Array([1,2,3], [4,5,6],[7,8,9]);
var b = [[1,2,3], [4,5,6], [7,8,9]];
The same effect is, a uses conventional instantiation, b is an implicit declaration, and the result is a multi-dimensional array.
1.3 Array literals
I really don’t know what it is called in Chinese, text arrays?
Speaking of arrays, we have to talk about Array Literals. Arrays are actually special objects. Objects have unique properties and methods. Values and calls are obtained through object names, attributes, objects, and methods (), while arrays use subscripts to obtain values. Array Literals are very similar to arrays, and they are collections of certain data types. However, Array Literals is fundamentally an object, declarations and calls are different from arrays:
The code copy is as follows:
var aa = new Object();
aa.x = "cat";
aa.y = "sunny";
alert(aa.x); //pop up cat
Create a simple object. The general call is through aa.x. If it is treated as Array literals, cat will pop up with alert(aa["x"])
The code copy is as follows:
var a = {x:"cat", y:"sunny"};
alert(a["y"]); //Popt up sunny
This is another way to create objects, and the result is the same
2. Operation of array elements
As mentioned above, elements can be read and written through array [subscript]
The range of subscripts is 0 (23 (superscript 2) -1). When subscripts are negative, floating point or even boolean values, the array will be automatically converted to object type, for example:
The code copy is as follows:
var b = new Array();
b[2.2] = "XXXXX";
alert(b[2.2]); //-> XXXXX
At this time, it is equivalent to b["2.2"] = "XXXXX".
2.1 Loop of arrays
The code copy is as follows:
var a = [1,2,3,4,5,6];
for(var i =0; i<a.length; i++){
alert(a[i]);
}
This is the most commonly used one. After going through the array, the code will pop up 1 to 6 in turn.
There is another commonly used one:
The code copy is as follows:
var a = [1,2,3,4,5,6];
for(var e in a){
alert(e);
}
Or pop up 1 to 6 in turn. For...in is an object that goes through the object (array is a special object) and is used on the array. Because the array has no attribute name, the value is output directly. This structure statement is used on the object, for example:
The code copy is as follows:
var a = {x:1,y:2,z:3};
for(var e in a){
alert(e + ":" + a[e]);
}
At this time, e takes the attribute name, i.e. x, y, x. To obtain the value, the array name [attribute] is used, so a[e] is equivalent to a["x"], a[y"], a[z"], a["z"]
2.2 Commonly used functions in arrays
concat
Append the array after the existing array and return the new array without affecting the existing array:
The code copy is as follows:
var a = [123];
var b = "sunnycat";
var c = ["www",21,"ido"];
var d = {x:3.14, y:"SK"};
var e = [1,2,3,4,[5,6,[7,8]]];
alert(a.concat(b)); // -> 123,sunnycat
alert(a); // -> 123
alert(b.concat(c, d)); // -> sunnycatwww,21,ido[object Object]
alert(c.concat(b)); // -> www,21,ido,sunnycat
alert(e.concat(11,22,33).join(" # ")); // -> 1 # 2 # 3 # 4 # 5,6,7,8 # 11 # 22 # 33
It should be noted that it can only be used for arrays or strings. If the connected (a) is a numerical, boolean, or object, an error will be reported. When the string is connected to the array, the string will be spliced with the first element of the array into a new element, and the connected string will be added with the string (I don’t know the reason for this, please disclose it if you are familiar with the information). For those containing arrays and objects, keep it the same after connection.
Join
Connect the array into a string with the specified spacer:
The code copy is as follows:
var a = ['a','b','c','d','e','f','g'];
lert(a.join(",")); // -> a,b,c,d,e,f,g is equivalent to a.toString()
alert(a.join(" x ")); // -> axbxcxdxexfxg
This is easy to understand, but it should be noted that it is only converted into a one-dimensional array. If there is an array in the array, it will not use the string specified by join, but use the default toString(), for example,
The code copy is as follows:
var a = ['a','b','c','d','e','f','g',[11,22,33]];
alert(a.join(" * ")); // -> a * b * c * d * e * f * g * 11,22,33
Note: The array in the array is not used for * connection
pop
Delete the last element of the array and return the element
The code copy is as follows:
var a = ["aa","bb","cc"];
document.write(a.pop()); // -> cc
document.write(a); // -> aa, bb
Note: If the array is empty, undefined is returned.
push
Add an array behind the array and return the new length of the array
The code copy is as follows:
var a = ["aa","bb","cc"];
document.write(a.push("dd")); // -> 4
document.write(a); // -> aa,bb,cc,dd
document.write(a.push([1,2,3])); // -> 5
document.write(a); // -> aa,bb,cc,dd,1,2,3
The difference from concat is that concat does not affect the original array, it directly returns the new array, while push directly modifies the original array, which returns the new length of the array.
sort
Array sorting, let's first look at an example
The code copy is as follows:
var a = [11,2,3,33445,5654,654,"asd","b"];
alert(a.sort()); // -> 11,2,3,33445,5654,654,asd,b
Is the result very surprising? Yes, the sorting is not based on integer size, but on string comparison, which is to compare the ANSI code of the first character, and the small ones are in front. If the same is true, the second character will be compared. If you want to compare according to integer values, you can do this.
The code copy is as follows:
var a = [11,2,3,33445,5654,654];
a.sort(function(a,b) {
return a - b;
});
alert(a); // -> 2,3,11,654,5654,33445
The sort() method has an optional parameter, which is the function in the code. This is a simple example. Non-numbers cannot be sorted. Non-numbers need to be judged more, so I won't talk about it here.
reverse
Inversely sort the array and sort(), take the first character ASCII value and compare it
The code copy is as follows:
var a = [11,3,5,66,4];
alert(a.reverse()); // -> 4,66,5,3,11
If the array also contains an array, it will not solve the elements if it is processed as an object.
The code copy is as follows:
var a = ['a','b','c','d','e','f','g',[4,11,33]];
alert(a.reverse()); // -> 4,11,33,g,f,e,d,c,b,a
alert(a.join(" * ")); // -> 4,11,33 * g * f * e * d * c * b * a
It should be the last 11, because 4, 11, 33 are regarded as a complete object comparison, so they are ranked first.
If you can't understand it, use join() to string it together, and it will be much more obvious
shift
Delete the first element of the array and return the element, which is similar to pop
The code copy is as follows:
var a = ["aa","bb","cc"];
document.write(a.shift()); // -> aa
document.write(a); // -> bb,cc
Note: When the array is empty, undefined is returned.
unshift
In contrast to shift, add elements to the front of the array and return the new length of the array.
The code copy is as follows:
var a = ["aa","bb","cc"];
document.write(a.unshift(11)); // -> 4 Note: Undefined is returned in IE
document.write(a); // -> 11,aa,bb,cc
document.write(a.unshift([11,22])); // -> 5
document.write(a); // -> 11,22,11,aa,bb,cc
document.write(a.unshift("cat")); // -> 6
document.write(a); // -> cat,11,22,11,aa,bb,cc
Pay attention to this method, undefined will be returned in IE, which seems to be a bug with Microsoft. I can correctly play the new length of the array under firefox.
slice
Return array fragment
The code copy is as follows:
var a = ['a','b','c','d','e','f','g'];
alert(a.slice(1,2)); // -> b
alert(a.slice(2)); // -> c,d,e,f,g
alert(a.slice(-4)); // -> d,e,f,g
alert(a.slice(-2,-6)); // -> empty
a.slice(1,2), starting from the subscript is 1 to the subscript is 2, note that the elements with subscript are not included.
If there is only one parameter, then the default is to the end of the array
-4 represents the fourth last element, so the four elements in the countdown are returned
The last line starts from the second to last. Since it is intercepted later, it is obviously impossible to retrieve the previous element, so it returns an empty array. If it is changed to a.slice(-6,-2), it returns b,c,d,e
splice
Delete an element of a fragment from the array and return the deleted element
The code copy is as follows:
var a = [1,2,3,4,5,6,7,8,9];
document.write(a.splice(3,2)); // -> 4,5
document.write(a); // -> 1,2,3,6,7,8,9
document.write(a.splice(4)); // -> 7,8,9 Note: Return empty under IE
document.write(a); // -> 1,2,3,6
document.write(a.splice(0,1)); // -> 1
document.write(a); // -> 2,3,6
document.write(a.splice(1,1,["aa","bb","cc"])); // -> 3
document.write(a); // -> 2,aa,bb,cc,6,7,8,9
document.write(a.splice(1,2,"ee").join("#")); // -> aa,bb,cc#6
document.write(a); // -> 2,ee,7,8,9
document.write(a.splice(1,2,"cc","aa","tt").join("#")); // -> ee#7
document.write(a); // -> 2,cc,aa,tt,8,9
Note that this method is in IE. The second parameter is necessary. If it is not filled, it will default to 0. For example, a.splice(4), and in IE, it will return empty. The effect is equivalent to a.splice(4,0)
toString
Convert arrays into strings, not just arrays, but all objects can use this method
The code copy is as follows:
var a = [5,6,7,8,9,["A","BB"],100];
document.write(a.toString()); // -> 5,6,7,8,9,A,BB,100
var b = new Date()
document.write(b.toString()); // -> Sat Aug 8 17:08:32 UTC+0800 2009
var c = function(s){
alert(s);
}
document.write(c.toString()); // -> function(s){ alert(s); }
Boolean value returns true or false, and object object object name]
Compared with the join() method, join() only replaces one-dimensional arrays, while toString() completely planarizes the entire array (regardless of one-dimensional or multidimensional).
At the same time, this method can be used for decimal, binary, ength and hexadecimal conversion, for example:
The code copy is as follows:
var a = [5,6,7,8,9,"A","BB",100];
for(var i=0; i<a.length; i++){
document.write(a[i].toString() + " binary is " + a[i].toString(2) + " , octal is " + a[i].toString(8) + " , hexadecimal is " + a[i].toString(16)); // -> 4,5
}
Output result:
The code copy is as follows:
The binary of 5 is 101, the octal is 5, and the hexadecimal is 5
The binary of 6 is 110, the octal is 6, and the hexadecimal is 6
The binary of 7 is 111, the octal is 7, and the hexadecimal is 7
The binary of 8 is 1000, the octal is 10, and the hexadecimal is 8
The binary of 9 is 1001, the octal is 11, and the hexadecimal is 9
The binary of A is A, the octal is A, and the hexadecimal is A
The binary of BB is BB, the octal is BB, and the hexadecimal is BB.
The binary of 100 is 1100100, the octal is 144, and the hexadecimal is 64.
Conversion can only be performed on elements. If the entire array is converted, the array will be returned intact.
toLocaleString
Returns the local format string, mainly used on the Date object
The code copy is as follows:
var a = new Date();
document.write(a.toString()); // -> Sat Aug 8 17:28:36 UTC+0800 2009
document.write(a.toLocaleString()); // -> August 8, 2009 17:28:36
document.write(a.toLocaleDateString()); // -> August 8, 2009
The difference is that toString() returns the standard format, and toLocaleString() returns the full date of the local format (in [Control Panel] >> [Region and Language Options], by modifying the [Time] and [Long Date] formats), toLocaleDateString() is the same as toLocaleString(), but it only takes less time.
valueOf
Return different original values according to different objects. If used for output, it is similar to toString(). However, toString() returns string type, and valueOf() returns the original object type
The code copy is as follows:
var a = [1,2,3,[4,5,6,[7,8,9]]];
var b = new Date();
var c = true;
var d = function(){
alert("sunnycat");
};
document.write(a.valueOf()); // -> 1,2,3,4,5,6,7,8,9
document.write(typeof (a.valueOf())); // -> object
document.write(b.valueOf()); // -> 1249874470052
document.write(typeof(b.valueOf())); // -> number
document.write(c.valueOf()); // -> true
document.write(typeof(c.valueOf())); // -> boolean
document.write(d.valueOf()); // -> function () { alert("sunnycat"); }
document.write(typeof(d.valueOf())); // -> function
Arrays are also objects, so typeof (a.valueOf()) returns object, and the returned multidimensional array is still
The code copy is as follows:
var a = [1,2,3,[4,5,6,[7,8,9]]];
var aa = a.valueOf();
document.write(aa[3][3][1]); // -> 8
The Date object returns the number of milliseconds from January 1, 1970, and the Math and Error objects do not have a valueOf method.