Summary of some common methods of JavaScript array

1. How to create an array in JavaScript

(1) Using the Array constructor:

var arr1 = new Array(); //Create an empty array var arr2 = new Array(10); //Create an array with 20 items var arr3 = new Array("zs","ls","ww"); //Create an array with 3 strings

(2) Using array literal notation:

var arr4 = []; // Create an empty array var arr5 = [10]; // Create an array with 1 item var arr6 = ["zs","ls","ww"]; // Create an array with 3 strings

2. Summary of Array Methods

3. Detailed explanation of the method

1.join()

Function: Put all elements in the array into a string according to the specified separator and return the string.

Parameter: join(str); The parameter is optional and defaults to "," which uses the passed character as a separator.

    var arr = [1,2,3];
    console.log(arr.join()); //1,2,3
    console.log(arr.join("-")); //1-2-3

The join() method can be used to repeat a string. Just pass in the string and the number of repetitions, and the repeated string will be returned. The function is as follows:

function repeatString(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi

2.pop()

pop(): Remove the last item from the end of the array, reduce the length of the array, and then return the removed item

ar arr = [1,2,3];
console.log(arr.pop()); //3
console.log(arr); //[1,2]---Original array changes

3.shift()

Function: This method is used to delete and return the first element of an array.

var arr = [1,2,3]
console.log(arr.shift()); //1
console.log(arr); //[2,3]---Original array changes

4. push()

Function: Add one or more elements to the end of an array and return the new length.

var arr = [1,2,3];
console.log(arr.push("hello")); //4
console.log(arr); //[1,2,3,"hello"]---original array changesconsole.log(arr.push("a","b")); //6
console.log(arr); //[1,2,3,"hello","a","b"]---Original array changes

5.unshift()

Function: Add one or more elements to the beginning of an array and return the new length.

var arr = [1,2,3];
console.log(arr.unshift("hello")); //4
console.log(arr); //["hello",1,2,3]---original array changes console.log(arr.unshift("a","b")); //6
console.log(arr); //["a","b","hello",1,2,3]---Original array changes

6.concat()

Function: Add parameters to the original array. This method first creates a copy of the current array, then adds the received parameters to the end of the copy, and finally returns the newly constructed array. When no arguments are passed to the concat() method, it simply copies the current array and returns the copy.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = arr1.concat(arr2);
console.log(arr3); //[1,2,3,4,5,6]

7. slice()

Function: Returns a new array consisting of items from the specified start subscript to the end subscript in the original array.

The slice() method can accept one or two parameters, the starting and ending positions of the items to be returned. With only one argument, the slice() method returns all items starting from the position specified by the argument to the end of the current array. If two arguments are given, the method returns the items between the start and end positions - but not including the end position.

var arr = [1,3,5,7,9,11];
var arrCopy1 = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = ​​arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11] (the original array remains unchanged)
console.log(arrCopy1); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

8.sort()

Function: Sort the elements in an array, in ascending order by default.

var arr = [6,1,5,2,3];
console.log(arr.sort()); //[1, 2, 3, 5, 6]
console.log(arr); //[1, 2, 3, 5, 6]---Original array changes

9.reverse()

Function: Reverse the order of array items.

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13] (the original array changes)

10. toString()

Function: Convert to string, similar to join() without parameters. This method will be called automatically when the data undergoes implicit type conversion. If called manually, it will be directly converted to a string.

var arr = [1,2,3];
console.log(arr.toString()); //1,2,3
console.log(arr); //[1,2,3]---The original array has not changed

11.splice()

Function: A very powerful array method with many uses, which can achieve deletion, insertion and replacement.

Deletion: You can delete any number of items by specifying only two parameters: the position of the first item to be deleted and the number of items to be deleted. For example, splice(0,2) removes the first two items in the array.

Insertion: You can insert any number of items into a specified position by providing only three parameters: the starting position, 0 (the number of items to be deleted), and the items to be inserted. For example, splice(2,0,4,6) will insert 4 and 6 starting at position 2 in the current array.

Replace: You can insert any number of items into a specified position and delete any number of items at the same time. You only need to specify 3 parameters: the starting position, the number of items to be deleted, and the number of items to be inserted. The number of items inserted does not have to be equal to the number of items deleted. For example, splice (2,1,4,6) will delete the item at position 2 in the current array and then insert 4 and 6 starting at position 2.

The splice() method always returns an array containing the items removed from the original array, or an empty array if no items were removed.

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

12.valueOf()

Function: Returns the original value of an array (usually the array itself). It is usually called by js in the background and does not appear explicitly in the code.

var arr = [1,2,3];
console.log(arr.valueOf()); //[1,2,3]
console.log(arr); //[1,2,3]
//To prove that the array itself is returned console.log(arr.valueOf() == arr); //true

13.indexOf()

Function: Query the position of the specified data in the array from left to right. If the specified data does not exist, return -1. This method is a query method and does not change the array.

Parameters: indexOf(value, start); value is the data to be queried; start is optional and indicates the starting position of the query. When start is a negative number, count forward from the end of the array; if the value cannot be found, the method returns -1

var arr = ["h","e","l","l","o"];
console.log(arr.indexOf("l")); //2
console.log(arr.indexOf("l",3)); //3
console.log(arr.indexOf("l",4)); //-1
console.log(arr.indexOf("l",-1)); //-1
console.log(arr.indexOf("l",-3)); //2

14.lastIndexOf()

Function: Query the position of the specified data in the array from right to left. If the specified data does not exist, return -1. This method is a query method and does not change the array.

Parameters: lastIndexOf(value, start); value is the data to be queried; start is optional and indicates the starting position of the query. When start is a negative number, count forward from the end of the array; if value is not found, the method returns -1

var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l")); //3
console.log(arr.lastIndexOf("l",3)); //3
console.log(arr.lastIndexOf("l",1)); //-1
console.log(arr.lastIndexOf("l",-3)); //2
console.log(arr.lastIndexOf("l",-4)); //-1

15. forEach()

Function: Loop through an array and run a given function on each item in the array. This method has no return value.

Parameters: All are function types, with parameters passed by default. The parameters are: the array content to be traversed; the corresponding array index, and the array itself.

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// The output is:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

16.map()

Function: Run a given function on each item in an array and return an array consisting of the results of each function call.

If you want every value in the array to change, use map

 let arr = [10, 30, 50, 60, 120, 230, 340, 450]
        let newArr = arr.map(n => {
            return n * 2
        })
        console.log(newArr);

17.filter()

Function: Filter, run the given function on each item in the array and return an array that meets the filter conditions.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

18.every()

Function: Determine whether each item in the array meets the conditions. Only when all items meet the conditions will true be returned.

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

19.some()

Function: Determine whether there are items in the array that meet the conditions. As long as there is one item that meets the conditions, it will return true.

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

20.reduce()

Function: Starting from the first item of the array, traverse one by one to the end, iterate all the items of the array, and then build a final return value.

parameter:

The first parameter is: accumulator is the current aggregate value,

The second parameter is: current is the current element when looping the array

The third parameter is: index is the index value of the array element

The fourth parameter is: Array is the array itself

int: is the initial value of the accumulator and can be set by yourself

The first two parameters are usually used, and the last two parameters are not commonly used. The most common usage scenario is the sum of arrays.

 // Function: To summarize all the contents in the array, at least two values ​​must be passed let arr = [10, 30, 50, 60, 120, 230, 340, 450]
        let newArr = arr.reduce((pre, n) => {
            return pre + n
        }, 0)
        console.log(newArr);

21.reduceRight()

Function: (Similar to reduce) Start from the last item of the array, traverse forward one by one to the first item, iterate all items of the array, and then build a final return value.

Parameters: Same as reduce.

var arr = [1,2,3,4,5];
var sum = arr.reduceRight(function(pre, cur, index, array){
return pre + cur;
},10);
console.log(sum); //25

22.findIndex()

Function: Returns the index of the first element in an array that satisfies the provided test function. If not, returns -1.

let arr = [10, 2, 9, 17, 22];
let index = arr.findIndex((item) => item > 13)
console.log(index); // 3

Summarize

This concludes this article on the summary of some common methods of JavaScript arrays. For more relevant JavaScript array methods, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!