Use of JavaScript arrays and loops

An array is an ordered combination of elements. In JavaScript, Arrays can be created using formal Object Notation or initialized using direct quantitative notation. VararrObjectnewArray (val1, val2); // array vararrLiteral [val1, val2] as the object; // The direct amount of arrays is no different for developers:

An array is an ordered combination of elements. In JavaScript, Arrays can be created using formal Object Notation or initialized using direct quantitative notation.

Var arrObject = new Array ("val1", "val2"); // acts as an Array of Objects
Var arrLiteral = ["val1", "val2"]; // number of direct Arrays

For developers, there is no difference: An Array method can be called on both the direct volume and the object. For the JavaScript engine, it must be re-interpreted every time the array is accessed directly, especially when it is used in a function.

Use the new operator to create a new Array object:

Var arrObject = new Array ();

You can also create a new array with some values:

Var arrObject = new Array ("val1", "val2 ");

Arrays in JavaScript are indexed from 0, which means that the index of the first element is 0, and the last element is the length of the array minus 1.

1. Traverse arrays cyclically

　　Problem:It is easy to access all elements of the array.

　　Solution:

To access an array, the most common method is to use the for Loop:

Var animals = new Array ("cat", "dog", "whale", "seal ");
Var animalString = "";
For (var I = 0; I <animals. length-1; I ++ ){
AnimalString + = animals [I] + "";
}
Alert (animalString );
Script

　　Discussion:

A for loop can be used to access every element of an array. The array starts from 0, and the array attribute length is used to set the end of the loop.

2. storage and access values in order

　　Problem:If you want to store values in such a way, you can access values in sequence by storing them;

　　Solution:

To store and access values in the order of accept values, create a first-in-first-out (FIFO) queue. Use the push method of the JavaScriptArray object to add items to the queue and use shift to get the items:

// Create a new array
Var queue = new Array ();
// Press 3 entries
Queue. push ("first ");
Queue. push ("second ");
Queue. push ("third ");
// Obtain two entries
Alert (queue. shift ());
Alert (queue. shift ());
Alert (queue );
Script

　　Discussion:

The Array push method creates a new Array element and adds it to the end of the Array:

Each time you press an element, the count of the array element increases.

The Array shift method extracts Array elements from the front of the Array, removes them from the Array, and returns the element:

Var elem = queue. shift ();

For each shift operation element, the array element is automatically subtracted, because shift also modifies the array in addition to the return item.

3. store and access values in reverse order

　　Problem:To store values in one way, that is, access values in the opposite order, first access the value of the last storage, that is, a stack of the last-in-first-out (LIFO.

　　Solution:

To store values in reverse order, create a LIFO stack. Use the push method of the JavaScriptArray object to add items to the stack, and use the pop method to obtain items:

// Create a new array
Var stack = new Array ();
// Press 3 entries
Stack. push ("first ");
Stack. push ("second ");
Stack. push ("third ");
// Two entries are displayed.
Alert (stack. pop (); // returns the third entry.
Alert (stack. pop (); // returns the second entry.
Alert (stack); // returns the first entry
Script

Discussion:

Stack is also an array, where each newly added element is located at the top of the stack and obtained in the order of first-in-first-out.

The Array push method creates a new element and adds it to the end of the Array:

Each time an element is pushed in, the count of the array element increases automatically.

The Array pop method extracts Array elements from the end of the Array, removes them from the Array, and returns the elements:

Each time an element is displayed, the array element count is automatically reduced, because the array is modified in the pop-up.

4. Search in the array

　　Problem:If you want to search for a specific value in the array, you can obtain the index of the array element.

　　Solution:

Use the new (ECMAScript 5) Array object Methods indeOf and lastIndexOf:

Var animals = new Array ("dog", "cat", "seal", "elephant", "lion ");
Alert (animals. indexOf ("elephant"); // print 3
Alert (animals. indexOf ("seal", 2); // print 2
Script

Although the browser sometimes supports both indexOf and lastIndexOf, this is just a formula in ECMAScript5. Both methods accept a search value and compare it with each element in the array. If this value is found, both methods return an index of the array element. If no value is found, return-1. indexOf to return the first element found, and lastIndexOf to return the last element found.

　　See:

Not all browsers support indexOf and lastindexOf. Solutions for this function:

If (! Array. prototype. indexOf ){
Array. prototype. indexOf = function (elt/*, from */){
Var len = this. length >>> 0;
Var from = Number (arguments [1]) | 0;
From = (from <0 )? Math. ceil (from): Math. floor (from );
If (from <0 ){
From + = len;
}
For (; from <len; from ++ ){
If (from in this & this [from] === elt ){
Return from;
}
}
Return-1;
}
}
Script

 5. Apply a function to each numeric Element

　　Problem:If you want to use a function to check an array value, replace it if the given conditions are met.

　　Solution:

Use the forEach method of the new ECMAScript 5 Array object to bind a callback function to each Array element:

Function replaceElement (element, index, array ){
If (element = "AB "){
Array [index] = "**";
}
}
Var charSets = new Array ("AB", "bb", "cd", "AB", "cc", "AB", "dd", "AB ");
// Apply the function to each array element
CharSets. forEach (replaceElement)
Alert (charSets); // print **, bb, cd, **, cc, **, dd ,**
Script

　　Discussion:

The forEach method accepts a parameter, which is a function. This function has three parameters: array elements, element indexes, and arrays.

　　See:

Most browsers support forEach. However, for browsers that are not supported, you can use the Array. prototype attribute to simulate forEach behavior.

If (! Array. prototype. forEach ){
Array. prototype. forEach = function (fun/*, thisp */){
Var len = this. length >>> 0;
If (typeof fun! = "Function "){
Throw new TypeError ();
}
Var thisp = arguments [1];
For (var I = 0; I <len; I ++ ){
If (I in this ){
Fun. call (thisp, this [I], I, this );
}
}
};
}
Script

6. Create a filtered Array

　　Problem:You want to filter the values of elements in an array and assign the result to a new array.

　　Solution:

Use the filter method of the Array object:

Function removeChars (element, index, array ){
Return element! = "**";
}
Var charSets = new Array ("**", "bb", "cd", "**", "cc", "**", "dd ", "**");
Var newArray = charSets. filter (removeChars );
Alert (newArray); // bb, cd, cc, dd
Script

　　Discussion:

The filter method is a new method added by ECMAScript5. This method applies a callback function to each array element. The function passed as a parameter to the filter method returns a Boolean value, true or false, Which is returned based on the results of the test array element. The returned value determines whether the array element is added to a new array. If the function returns true, the array element is added. Otherwise, the array element is not added.

　　See:

Simulation of browsers that do not support the filter method:

If (! Array. prototype. filter ){
Array. prototype. filter = function (fun/*, thisp */){
Var len = this. length >>> 0;
If (typeof fun! = "Function "){
Throw new TypeError ();
}
Var res = new Array ();
Var thisp = arguments [1];
For (var I = 0; I <len; I ++ ){
If (I in this ){
Var val = this [I]; // put fun and modify this
If (fun. call (thisp, val, I, this )){
Res. push (val );
}
}
}
Return res;
};
}
Script

7. Verify the array content

　　Problem:Make sure that an array meets a certain condition.

　　Solution:

Use the every method of the Array object to check each element of a given condition.

Function testValue (element, index, array ){
Var re =/^ [a-zA-Z] + $ /;
Return re. test (element );
}
Var elemSet = new Array ("***", 123, "abc", "-", "AAA ");
Alert (elemSet. every (testValue ));
Script

　　Discussion:

The every and some methods of the Array object are the newest ECMAScript 5Array methods. The difference is that when the every method is used, the processing will end as long as the function returns a false value, and this method returns false. Some method will continue to test every array element, knowing that the callback function returns true. In this case, no other elements are verified. This method returns true. If the callback function tests all elements and does not return true at any time, some methods return false.

　　See:

Implementation of browsers that do not support every and some:

If (! Array. prototype. some ){
Array. prototype. some = function (fun/*, thisp */){
Var I = 0,
Len = this. length >>> 0;
If (typeof fun! = "Function "){
Throw new TypeError ();
}
Var thisp = arguments [1];
For (; I <len; I ++ ){
If (I in this
& Fun. call (thisp, val, I, this )){
Return true
}
}
Return false;
};
}
If (! Array. prototype. every ){
Array. prototype. every = function (fun/*, thisp */){
Var len = this. length >>> 0;
If (typeof fun! = "Function "){
Throw new TypeError ();
}
Var thisp = arguments [1];
For (var I = 0; I <len; I ++ ){
If (I in this
& Fun. call (thisp, val, I, this )){
Return false
}
}
Return true;
};
}
Script