This article introduces Js' Array array object, the specific content is as follows
Table of contents
1. Introduction: Introduction to the description, definition method and properties of Array array objects.
2. Example method: Introduction to the instance methods of Array object: concat, every, filter, forEach, indexOf, join, lastIndexOf, map, pop, push, reverse, shift, slice, sort, splice, toString, tounshift, etc.
3. Static method: Introduction to the static method of the Array object: ().
4. Practical operation: Perform example operations on Array: index, for traversal, shallow copy, deep copy and other operations.
1. Introduction
1.1 Description
An array is an ordered collection of values. Each value is called an element, and each element has a position in the array, represented by a number, called an index. JavaScript arrays are of no type: array elements can be of any type, and different elements in the same array may also have different types. --"Authoritative Guide to JavaScript (Sixth Edition)"
1.2 Definition method
var names = new Array("Zhang San", "Li Si", "Wang Wu");
//orvar names = ["Zhang San", "Li Si", "Wang Wu"];
1.3 Attributes
length: represents the length of the element in the array.
2. Example method
Common methods:
1) unshift(): Insert element at the head of the array
2) shift(): Remove and return the first element of the array
3) push(): Insert element at the end of the array
4) pop(): Remove and return the last element of the array
2.1 concat(): Connect elements to array. The original array will not be modified, and the new array will be returned.
parameter:
①value1,value2...valueN: any number of values
Return value:
{Array} A new array containing the original Array and newly added elements.
Example:
var demoArray = ['a', 'b', 'c'];
var demoArray2 = ('e');
(demoArray); // => demoArray:['a','b','c'] The original array does not change(demoArray2); // => ['a','b','c','e']
2.2 every(): traverse the elements in turn to determine whether each element is true
parameter:
① function(value,index,self){}: Each element will use this function to determine whether it is true. When it is judged that one is false, the traversal will be immediately ended.
value: The element of the array traversal
index: element number
self: Array itself
Return value:
{Boolean}: Return true only if each element is true; if one is false, return false.
Example:
var demoArray = [1, 2, 3];
var rs = (function (value, index, self) {
return value > 0;
});
(rs); // => true
2.3 filter(): Iterate over the elements in turn and return a new array containing elements that meet the criteria.
parameter:
① function(value,index,self){}: Each element calls this function in turn, returning a new array containing elements that meet the criteria.
value: The element of the array traversal
index: element number
self: Array itself
Return value:
{Array} A new array containing elements that match the criteria
Example:
var demoArray = [1, 2, 3];
var rs = (function (value, index, self) {
return value > 0;
});
(rs); // => [1, 2, 3]
2.4 forEach(): traverse elements in sequence and execute the specified function; no return value
parameter:
① function(value,index,self){}: Each element calls this function in turn
value: The element of the array traversal
index: element number
self: Array itself
Return value: None
Example:
var demoArray = [1, 2, 3];
(function (value, index, self) {
(value); // => Output in sequence: 1 2 3});
2.5 indexOf(): Find matching elements in an array. If no matching element exists, return -1. Use the "===" operator when searching, so you need to distinguish between 1 and '1'
parameter:
①value: The value to be found in the array.
②start: The serial number position that starts searching, if omitted, it is 0.
Return value:
{Int}: Returns the first matching value in the array. If it does not exist, return -1
Example:
['a', 'b', 'c'].indexOf('a'); // =>0
['a', 'b', 'c'].indexOf('a', 1); // =>-1
['a', 'b', 'c'].indexOf('d'); // =>-1
[1, 2, 3].indexOf('1'); // => -1: The '===' matching method used
2.6 join(): splice all elements in the array into a string through a delimiter
parameter:
①sparator {String}: The separator between each element. If omitted, it is separated by the English comma ',' by default.
Return value:
{String}: A string spliced by each element with a sparator as a separator.
Example:
['a', 'b', 'c'].join(); // => 'a,b,c'
['a', 'b', 'c'].join('-'); // => 'a-b-c'
2.7 lastIndexOf: Reversely look up matching elements in an array. If no matching element exists, return -1. Use the "===" operator when searching, so you need to distinguish between 1 and '1'
parameter:
①value: The value to be found in the array.
②start: The position of the sequence number that starts searching. If omitted, start searching from the last element.
Return value:
{Int}: Start to find the first matching value in the array from right to left. If it does not exist, return -1
Example:
['a', 'b', 'c'].lastIndexOf('a'); // => 0
['a', 'b', 'c'].lastIndexOf('a', 1); // => 0
['a', 'b', 'c'].lastIndexOf('d'); // => -1
[1, 2, 3].lastIndexOf('1'); // => -1: The '===' matching method used
2.8 map(): Iterate over and calculate each element in sequence, and return the calculated array of elements
parameter:
① function(value,index,self){}: Each element calls this function in turn to return the calculated element
value: The element of the array traversal
index: element number
self: Array itself
Return value:
{Array} A new array containing even good elements
Example:
[1, 2, 3].map(function (value, index, self) {
return value * 2;
}); // => [2, 4, 6]
2.9 pop(): Remove and return the last element of the array
Parameters: None
Return value:
{Object} The last element of the array; if the array is empty, return undefined
Example:
var demoArray = ['a', 'b', 'c']; (); // => c (); // => b (); // => a (); // => undefined
2.10 push(): Add elements to the end of the array
parameter:
①value1,value2...valueN: Add any number of values to the end of the array
Return value:
{int} The new length of the array
Example:
var demoArray = ['a', 'b', 'c'];
('d'); // => 4, demoArray ： ['a', 'b', 'c', 'd']
('e', 'f'); // => 6, demoArray ：['a', 'b', 'c', 'd', 'e', 'f']
(demoArray); // => ['a', 'b', 'c', 'd', 'e', 'f']
2.11 reverse(): Invert the order of array elements
Parameters: None
Return value: None (invert element order in the original array).
Example:
var demoArray = ['a', 'b', 'c', 'd', 'e']; (); (demoArray); // => ["e", "d", "c", "b", "a"]
2.12 shift(): Remove and return the first element of the array
Parameters: None
Return value:
{Object} The first element of the array; if the array is empty, undefined is returned.
Example:
var demoArray = ['a', 'b', 'c']; (); // => a (); // => b (); // => c (); // => undefined
2.13 slice(startIndex, endIndex): Return part of the array
parameter:
① startIndex: the sequence number at the beginning; if it is a negative number, it means that the calculation starts from the end, -1 represents the last element, -2 is the second to last, and so on.
②endIndex: The last sequence number of the element at the end, if not specified, the end is the end. The intercepted element does not contain the element with the sequence number here, and the ending is the previous element with the sequence number here.
Return value:
{Array} A new array containing all elements from startIndex to the previous element of the endIndex.
Example:
[1, 2, 3, 4, 5, 6].slice(); // => [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5, 6].slice(1); // => [2, 3, 4, 5, 6]: Intercepted from serial number 1[1, 2, 3, 4, 5, 6].slice(0, 4); // => [1, 2, 3, 4]: Intercept the element from serial number 0 to serial number 3 (the previous one of serial number 4)[1, 2, 3, 4, 5, 6].slice(-2); // => [5, 6]: Intercept the next 2 elements
2.14 sort(opt_orderFunc): sort according to certain rules
parameter:
① opt_orderFunc(v1,v2) {Function}: optional sorting rule function. If omitted, the letters of the element will be sorted from small to large.
v1: The previous element is traversed.
v2: The following elements are traversed.
Sorting rules:
Compare v1 and v2 and return a number to represent the sorting rules of v1 and v2:
Less than 0: v1 is less than v2, v1 is ahead of v2.
Equal to 0: v1 equals v2, v1 is ahead of v2.
Greater than 0: v1 is greater than v2, v1 is behind v2.
Return value: None (sorting operations in the original array).
Example:
[1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5]: All elements are converted into characters, and the characters of 11 are before 2
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
return v1 - v2;
}); // => [1, 2, 3, 4, 5, 11, 22] : sorted from small to large
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
return -(v1 - v2); //Inverse, you can convert from large to small}); // => [22, 11, 5, 4, 3, 2, 1]
2.15 splice(): Insert and delete array elements
parameter:
① start {int}: The starting sequence number to start inserting, deleting or replacing.
②deleteCount {int}: The number of elements to be deleted, start calculation from start.
③value1,value2 ... valueN {Object}: Optional parameter, indicating the element to be inserted, and it starts to insert from start. If the parameter ② is not 0, then perform the delete operation first and then perform the insert operation.
Return value:
{Array} Returns a new array containing deleted elements. If the parameter ② is 0, it means that no element is deleted and an empty array is returned.
Example:
// 1. Deletevar demoArray = ['a', 'b', 'c', 'd', 'e']; var demoArray2 = (0, 2); // Delete 2 elements starting from 0 with the sequence number and return an array containing the deleted elements: ['a', 'b'](demoArray2); // => ['a', 'b'] (demoArray); // => ['c', 'd', 'e'] // 2. Insertvar demoArray = ['a', 'b', 'c', 'd', 'e']; var demoArray2 = (0, 0, '1', '2', '3'); // ② The parameter is 0, return an empty array(demoArray2); // => [ ] (demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e'] // 3. Delete first and then insertvar demoArray = ['a', 'b', 'c', 'd', 'e']; // When the ② parameter is not 0, then perform the deletion operation first (delete 4 elements with sequence number starting from 0, return an array containing the deleted elements), and then perform the insertion operationvar demoArray2 = (0, 4, '1', '2', '3'); (demoArray2); // => ['a', 'b', 'c', 'd'] (demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']
2.16 toString(): splice all elements in the array into a string through an English comma ','
Parameters: None
Return value:
{String} All elements in the array are spliced into a string by an English comma ',' and returned. The same is to call the join() method without parameters.
Example:
[1, 2, 3, 4, 5].toString(); // => '1,2,3,4,5' ['a', 'b', 'c', 'd', 'e'].toString(); // => 'a,b,c,d,e'
2.17 unshift(): Insert element at the head of the array
parameter:
①value1,value2...valueN: Add any number of values to the header of the array
Return value:
{int} The new length of the array
Example:
var demoArray = [];
('a'); // => demoArray:['a']
('b'); // => demoArray:['b', 'a']
('c'); // => demoArray:['c', 'b', 'a']
('d'); // => demoArray:['d', 'c', 'b', 'a']
('e'); // => demoArray:['e', 'd', 'c', 'b', 'a']
3. Static method
3.1 (): Determine whether the object is an array
parameter:
①value {Object}: any object
Return value:
{Boolean} Returns the judgment result. When true, it means that the object is an array; when false, it means that the object is not an array
Example:
([]); // => true
(['a', 'b', 'c']); // => true
('a'); // => false
('[1, 2, 3]'); // => false
4. Practical operation
4.1 Index
Description: Each element has a position in the array, represented by a number, called an index. The index starts from 0, that is, the index of the first element is 0, the index of the second element is 1, and so on;
Returns undefined when obtaining an index that does not exist in an array.
Example:
var demoArray = ['a', 'b', 'c', 'd', 'e']; demoArray[0]; // => Get the first element:'a'demoArray[0] = 1; // Set the first element to 1(demoArray); // => demoArray:[1, 'b', 'c', 'd', 'e'] (demoArray[9]); // => undefined: Return undefined when the obtained index does not exist
4.2 for statements
Note: You can traverse the array one by one through the for statement
Example:
var demoArray = ['a', 'b', 'c', 'd', 'e'];
for (var i = 0, length = ; i < length; i++) {
(demoArray[i]); // => Output elements in the array one by one}
4.3 shallow copy
Note: The Array type is a reference type; when array a is copied to array b, element modification is made to array b, and array a will also be modified.
Example:
var demoArrayA = ['a', 'b', 'c', 'd', 'e']; var demoArrayB = demoArrayA; // Assign array A to array BdemoArrayB[0] = 1; // Modify the elements of array B(demoArrayA); // => [1, 'b', 'c', 'd', 'e']: The elements of array A have also changed
4.4 Deep Copy
Note: Use the concat() method to return a new array; prevent shallow copying, perform element modification operations on array b, and array a will not change.
Example:
var demoArrayA = ['a', 'b', 'c', 'd', 'e']; var demoArrayB = (); // Use concat() method to return a new arraydemoArrayB[0] = 1; // Modify the elements of array B(demoArrayA); // => ['a', 'b', 'c', 'd', 'e']: The elements of array A have not changed(demoArrayB); // => [ 1, 'b', 'c', 'd', 'e']: The element of array B has changed
4.5 Determine whether the two arrays are equal
Note: The Array array is a reference type, so even []===[] will return false, so you can judge whether the string returned by the array toString() method is equal.
Example:
([]===[]); // => false (['a', 'b'] === ['a', 'b']); // => false (['a', 'b'].toString() === ['a', 'b'].toString()); // true
The above is all about this article. I hope it will be helpful to everyone to learn JavaScript Array objects.