Understanding JavaScript array objects and their methods

Source: Internet
Author: User
Tags array to string closure javascript array

Array in my current learning programming language can see, all kinds of methods are countless, but the function is the same, at most, the method name is slightly different, the foreigner is not a quasi ah, if the English better than the Students for learning methods (method) is very fast, because the basic can be translated, But also to practice, generally speaking, the English level does not affect the programming technology, look at the API words, know a little simple vocabulary, almost.

Array Object

The article repeatedly put the array and the object together, because the array has all the characteristics of the object, more accurately say that the array belongs to a class of objects, a class of objects that inherit from Array.prototype, so there are a lot of methods on the prototype chain for the use of array objects, arrays and objects slightly different, For example, the object's properties are unordered, and the elements of the array (which are also attributes) are ordered, and the array elements can only be accessed by means of an index. JS in the array is a weak type, so in the array can hold any type of elements, this is a simple introduction before, here is not too much explanation, the two-dimensional array is no longer described, here is mainly about the array of methods and characteristics

var array = [1, 2, "Wang", {x:1}, [1, 2], function () {document.write ("Hello")}];

ARRAY[0]; 1

array["2"]; Wang

array[3].x; 1

array["5"] (); Hello

Do not think I index is not written wrong, said before, the index is actually the object's key value, so it can be used, by your choice, written out to let everyone have more understanding and experience.

Methods of arrays

Array as a combination of ordered data, because its characteristics require a large number of methods to edit the array, after all, the performance of the arrays are too poor, not every time by ourselves to write the logical method, so we only need to use the prototype chain provided by a large number of already packaged methods can be.

Common compatible methods include join (array to string), reverse (reverse order), sort (sort), concat (array concatenation), splice (intercept of the array), splice (array truncation and splicing), these are the main less need to consider the compatibility of the method, The method after ES5 should also be fully compatible, so mention, ForEach (traversal), map (element Edit), filter (element filter), Every/some (array condition judgment), reduce (22 element operation), IndexOf (index Lookup), IsArray.

Here are all the code examples to explain each method

Join method

var array = [1, 2, 3];

Array.join (); "1, 2, 3"

Array.join ("_"); "1_2_3"

This method is mainly used to concatenate elements in the array into strings, and the usage rate is very wide.

Reverse method

To be clear, this is not a sort, but an array of elements in reverse order, this method modifies the original array object, rather than copy out an object as the return value.

var array = [1, 3, 2];

Array.reverse (); [2, 3, 1];

Array [2, 3, 1], the original array has been modified

Sort method

This is a sort method, by default the element is ToString, and then the string is compared, generally by a closure as a parameter to modify the order of sorting, so the order is not applicable to the argument is not reliable. This method also modifies the primitive group.

var array = [13, 24, 51, 3];

Array.Sort (); [13, 24, 3, 51]


* When each element is converted to a string, only the first element inside the string is compared, so this happens, and 3 is queued to the third


Array.Sort (function (A, b) {return a B;}); [3, 13, 25, 51]


* Compare each element in the array with a closure and then modify the sort


Array [3, 13, 25, 51], the original array was modified.

Concat method

Array stitching method, can be in the end of the array to join the desired parameters, could be any type, if the stitching is an array, will do a lacy operation, if it is a two-dimensional array, then only Lacy once the array, that is, the elements in the array will save the original attribute, originally a one-dimensional array element, but also an array element Originally two-dimensional or two-dimensional, this method returns an array without modifying the original array.

var array = [1, 2, 3];

Array.concat (4, 5); [1, 2, 3, 4, 5]

Array [1, 2, 3], the original array has not been modified

Array.concat ([10, 11], 13); [1, 2, 3, 10, 11, 13], the array in the parameter is lacy, preserving the element dimension.

Array.concat ([1, [2, 3]]); [1, 2, 3, 1, [2, 3]], the array in the parameter is lacy, preserving the element dimension. 2 and 3 are originally elements of a two-dimensional array, and are now still 2-dimensional array elements.

Slice method

The slice method mainly completes the interception of the array elements, leaving the array of the elements that they want to get, the parameters inside the slice () determine the specific coordinates of the interception, this method does not modify the original array, but to copy a new array as the return value, the code example.

var array = [1, 2, 3, 4, 5];

Array.slice (1, 3); [2, 3], the element with index 1 is the beginning, the element with index 3 ends, left closed right

Array.slice (1); [2, 3, 4, 5], starting with an index of 1, intercept to the last

Array.slice (1,-1); [2, 3, 4], the coordinates of a negative number are represented from the right, but there is no 0 coordinate, so-1 is array[4], so it can also be understood to intercept the array length minus 1.

Array.slice (-4,-3); [2], in accordance with the above understanding, the array length minus 4 to minus 3 that is, Array.slice (1, 2), so the result is [2].

Splice method

Slice method is the interception of the array, and splice is to intercept their unwanted parts, leaving the request, but also to the original array directly to operate, and splice can also be cut off the unwanted part after stitching on their own desired elements, code example.

var array = [1, 2, 3, 4, 5];

var Secondarray = Array.splice (2); return [3, 4, 5], the truncated element will have an array as the return value.

Array [1, 2]

Secondarray; [3, 4, 5]

var array = [1, 2, 3, 4, 5];

var Secondarray = Array.splice (2, 2); return [3, 4]

Array [1, 2, 5]

Secondarray; [3, 4];

var array = [1, 2, 3, 4, 5];

var Secondarray = Array.splice (1, 1, ' A ', ' B '); RETURN[2], while stitching on the original array ' a ', ' B ', two elements

Array [1, ' A ', ' B ', 3, 4, 5]

Secondarray; [2]

The following methods are all in ES5.

foreach method

The Foreach method is like the for-in, which is the traversal method, which mainly iterates through each element in the array, and the foreach () and sort are like, require a closure to function as a parameter, and the inside of the closure function is three parameters, the following code distance is described.

var array = [1, 2, 3, 4, 5];

Array.foreach (function (element, index, array) {

document.write ("array[" + Index + "]" + ":" + element + "<br/>");


The output is:

Array[0]: 1
ARRAY[1]: 2
ARRAY[2]: 3
ARRAY[3]: 4
ARRAY[4]: 5

function () in the parameter name can be arbitrary, which is the characteristics of closures, here is not explained in detail, simply say the parameters are what to do, the first parameter is the traversed element, that is, the value of each element in the array, the second parameter is the index of the array, the third parameter is the array itself.

Map method

This method is used to process the elements of an array, returning a new one, and the original array does not change.

var array = [1, 2, 3];

var Secondarray = Array.map (function (x) {

return x + 10;


Array [1, 2, 3]

Secondarray; [11, 12, 13];

Filter method

Filter is a filtering method that picks up the elements you want to filter and returns a new array.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var Secondarray = Array.filter (function (x, index) {

Return index <= 3 | | x >= 8;


Array [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Secondarray; [1, 2, 3, 4, 8, 9, 10]

The parameter X in the function in this method is the value of the element, index is the indexed, and the meaning of the closure parameter is to return only elements that have an index of less than or equal to 3 or a value greater than or equal to 8. The effect of the array filter is completed.

Every/some method

The main function of these two methods is to iterate over the elements in the array to determine whether the conditions are met, every requirements are each element to meet the requirements, some requirements are as long as there is a condition can be, these two methods give me a logic or, logic and sense. And this also has a logical and logical or short-circuit effect, so once the result is determined, the traversal will also terminate.

var array = [1, 2, 3, 4, 5];

Array.every (function (x) {

return x < 10; Determine if each element is less than 10

}); True

Array.every (function (x) {

return x < 3; Determine if each element is less than 3

}); False

Array.some (function (x) {

return x = = 1; Determine if there are elements equal to 1

}); True

Array.some (function (x) {

return x > 100; Determine if there are elements greater than 100

}); False

Reduce/reduceright method

The reduce method is mainly responsible for the operation of 22 elements, such as the accumulation, such as comparison, can be through reduce.

var array = [1, 2, 3];

var result = Array.reduce (function (x, y) {

return (x + y);

}); 6

Array [1, 2, 3], original array not modified

var array = [3, 9, 6];

The flow here is first 1 and 2 Enter, then get the result as the next x parameter, then again is 3 and 3 Enter, finally got 6

var max = Array.reduce (function (x, y) {

document.write (x + ' | ' + y);

return (x > y x:y);


3 | 9

9 | 6

Max 9

The output is very clear, we will not repeat it.

REDUCERIGNT features and reduce is the same, but not from left to right, but from right to left, interested students to write their own to know.

IndexOf method

The IndexOf method is to get the index position of the first occurrence of the element in the array, if no 1 is returned in the array, the first parameter in the method is the element to be found, the second parameter is optional, the index position from which to start the lookup, and finally the index of the element in the array.

var array = [1, 2, 3, 2, 1];

Array.indexof (2); 1, description array[1] = 2

Array.indexof (99); -1, indicating that there is no 99 element in the array

Array.indexof (1, 1); 4, starting from index 1 to find 1 this element, then only the fourth one is

Array.indexof (1,-3); 4, the array length is 5, that is, starting from array[2] to find the element index, so still 4

Array.indexof (2,-1); -1, the array length is 5, that is, starting from array[4] to find the element index, so no, so-1

Another way is LastIndexOf (), this and indexof is the same, just look at the index from the back, and reduceright, like the students interested in their own try.

IsArray class method

is not exactly the class method, because JS does not have the class, but in order to let everyone understand me to say that, the above methods are on the Array.prototype, so with the object directly can be called, and this method is an array constructor on the method, So you need to use an array to make the call, and it is primarily to determine whether an object is an array object, and if it is an array object, returns True.

var array = [1, 2, 3, 4, 5];

Array.isarray (array); True

Array of commonly used methods are almost so much, I hope that everyone's study can help.

Understanding JavaScript array objects and their methods

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.