The Array type is the most commonly used reference type in ECMAScript. Data in ECMAScript is quite different from arrays in most other languages. Although data in ECMAScript is an ordered list of data like arrays in other languages, the difference is that each item in an ECMAScript array can hold any type of data, whether it is a numerical value, string or object. At the same time, the array size in ECMAScript can be dynamically adjusted, that is, it can automatically grow according to the data addition to accommodate the newly added data. Below is a summary of the commonly used operation functions and usages of arrays in JavaScript.
•Create an array
There are two main methods to create arrays: constructor and array literals, as shown below:
var arr = new Array(); var arr = [];
For the constructor, we can pass a numeric value to create an array containing the given number of terms, as follows:
var arr = new Array(3); //The length of the array is 3
You can also directly pass the values stored in the array, as follows:
var arr = new Array("red","green","blue");Either way, it is recommended to use array literals to create arrays.
•Detection array
For a single global execution environment, the instanceof operator can detect whether it is an array, for example:
var arr = [1,2,3]; console.log(arr instanceof Array); //true
However, if the web page contains multiple frameworks, it also contains multiple global execution environments. ES5 has added the Array.isArray() method to determine whether a value is an array, regardless of which global execution environment it was created, as follows:
if(Array.isArray(arr)){ //Perform some operations}•Array string conversion
Each object has toLocaleString(), toString(), and valueof() methods. Calling the toString() method of the array will return a string spliced in the form of a string of each value in the array and separated by commas. Calling the valueof() method of the array will return an array, but in fact it is called the toString() method of each item in the array, as follows:
var arr = ["red","green","blue"]; console.log(arr.toString()); //red,green,blue console.log(arr.valueof()); //red,green,blue console.log(arr); //red,green,blue
The toLocaleString() method of the array is different from toString() that it will call the toLocaleString() method of each item in the array, and splice the return value of each item toLocaleString() method into a string separated by commas. Using the join() method, you can use different separators to build this string, as follows:
var arr = ["red","green","blue"]; console.log(arr.join(",")); //red,green,blue console.log(arr.join("||")); //red||green||blue•Add and delete arrays
The push() method receives any number of parameters, adds them one by one to the end of the array, and returns the length of the modified array, for example:
var arr = [1,2,3]; arr.push(4,5); console.log(arr); //[1,2,3,4,5]
In contrast to push() is the pop() method, which removes the last item from the end of the array and returns the removed item, for example:
var arr = [1,2,3]; arr.pop(); //3 arr.pop(); //2 console.log(arr); //[1]
The other two methods used are shift() and unshift(), which are similar to pop() and push(). The shift() method is used to remove items from the start position of the array and return the removed items, for example:
var arr = [1,2,3]; arr.shift(); //1 arr.shift(); //2 console.log(arr); //[3]
The unshift() method is the opposite of shift() purpose. It can add any item to the front end of the array and return the length of the new array, for example:
var arr = [1,2,3]; arr.unshift(4); //Return length 4 arr.unshift(5); //Return length 5 console.log(arr); //[1,2,3,4,5]
•Flip and sort of arrays
The flip method provided by the array is reverse(), which inverts the order of data items, for example:
var arr = [1,2,3]; arr.reverse(); console.log(arr); //[3,2,1]
sort() can also sort arrays, but its default sorting method is not the size, but is sorted one by one according to the corresponding string. The sort() method can receive a comparison function and perform custom sorting, for example:
function compare(value1,value2){ return value1-value2; } var arr = [1,3,2,5,4]; arr.sort(compare); console.log(arr); //[1,2,3,4,5]•Array connection
The concat() method will create a copy of the current array, then add the received parameters to the end of the copy, and finally return the newly built array, with the original array unchanged, for example:
var arr = [1,2,3]; var arr2 = arr.concat(4,[5,6]); console.log(arr); //[1,2,3] console.log(arr2); //[1,2,3,4,5,6]
•Array segmentation
The slice() method receives one or two parameters, that is, the start and end positions of the item to be returned. If only one parameter is needed, all items from the specified position to the end of the array are returned. If two parameters are received, all items between the start and end positions are returned but the items that do not include the end positions, for example:
var arr = [1,2,3,4,5]; var arr2 = arr.slice(1); //[2,3,4,5] var arr3 = arr.slice(1,3); //[2,3]
Note that the slice() method will not affect the original array.
•splice() method
Since the splice() method is very powerful, I will summarize it separately. It can receive three parameters. The first parameter indicates the location of adding or deleting items, the second parameter indicates the number of items to be deleted, and the second parameter indicates the new items added to the array (optional). By providing different parameters, you can realize functions such as deletion, insertion and replacement, such as:
var arr = [1,2,3,4,5]; arr.splice(2,0,11,22); //Insert two items from position 2, console.log(arr); //[1,2,11,22,3,4,5] arr.splice(2,2,33,44); //Delete two items from position 2, insert two items, and return the deleted item console.log(arr); //[1,2,33,44,4,5] arr.splice(1,1); //Delete one item from position 1, and return the deleted item console.log(arr); //[1,33,44,4,5]
•Array position method
ES5 provides two position methods: indexOf() and lastIndexOf(). Both methods receive two parameters: the item to be found and the index indicating the location of the search starting point (optional). The indexOf() method looks backward from the beginning of the array, while the lastIndexOf() looks forward from the end of the array, for example:
var arr = [1,2,3,4,5,4,3,2,1]; console.log(arr.indexOf(4)); //3 console.log(arr.lastIndexOf(4)); //5 console.log(arr.indexOf(4,4)); //5 console.log(arr.lastIndexOf(4,4)); //3
•Iteration method of array
ES5 defines 5 iterative methods, each receiving two parameters: the function to be run on each item and (optional) the scope object that runs the function -- the value that affects this. The function passing in these methods can receive three parameters: the value of the array item, the index of the item in the array, and the array object itself.
Among them, the every() method and some() method are similar. For the every() method, the passed function must return true for each item before this method returns true. For some(), the method returns true as long as the passed function returns true for any item in the array. Examples are as follows:
var arr = [1,2,3,4,5,4,3,2,1]; var everyResult = arr.every(function(item,index,array){ return (item>2); }); console.log(everyResult); //false, not all greater than 2 var someResult= arr.some(function(item,index,array){ return (item>2); }); console.log(someResult); //true, if one item is greater than 2The filter() method determines whether to include an item in the returned array based on the given function, for example:
var arr = [1,2,3,4,5,4,3,2,1]; var filterResult = arr.filter(function(item,index,array){ return (item>2); }); console.log(filterResult); //[3,4,5,4,3], returns an array with all values greater than 2The map() method runs the given function for each item in the array, and then returns the array composed of the result of each item function running, for example:
var arr = [1,2,3,4,5,4,3,2,1]; var mapResult = arr.map(function(item,index,array){ return item*2; }); console.log(mapResult); //[2,4,6,8,10,8,6,4,2], multiply each item in the original array by 2 and returnThe last method is forEach(), which runs the given function only on each item in the array, without a return value, for example:
var arr = [1,2,3,4,5,4,3,2,1]; arr.forEach(function(item,index,array){ //Perform some operations});•Array reduction method
ES5 also provides two methods to reduce arrays: reduce() and reduceRight(). Both methods iterate over all items in the array and return a final value. reduce() gradually traverses from the first item to the last item, reduceRight() traverses from the last item to the end of the first item. Both functions receive four parameters: the previous value, the current value, the index of the item, and the array object. Any value returned by this function will be automatically passed to the next item as the first parameter. For example, use the reduce() method to find the sum of all items in the array:
var arr = [1,2,3,4,5]; var sum = arr.reduce(function(pre,cur,index,array){ return pre+cur; }); console.log(sum); //15The first time the callback function is executed, pre is 1 and cur is 2. The second time, pre is 3(1+2) and cur is 3. This process will access every item in the array and finally return the result. The reduceRight() method is similar to reduce(), but the direction is the opposite.
This note is mainly summarized based on advanced JavaScript programming and online resources. Please point it out if there are any incomplete points.
The above article is based on JavaScript Array Array method (a must-read for beginners) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.