Consolidate common array methods

Keywords: Javascript Front-end array

Common methods of traversing arrays

        1. forEach

                Note: forEach is the simplest and most commonly used array traversal method. It provides a callback function that can be used to process each element of the array. By default, there is no return value. The parameters of the callback function. The first parameter is each item of the array, the second parameter is the index of each item in the array, the third parameter is the array itself, and the last two parameters are optional

                Example:

var arr = [1, 2, 3, 4, 5]

arr.forEach((item, index) => {
        console.log(item, index);
})

// output

//1 0
//2 1
//3 2
//4 3
//5 4

        2.filter

                Note: the filter traversal array is generally used to filter whether there are qualified array elements in the array. A new number is returned by default. The parameters are the same as forEach. After the callback function is executed for the elements of the original array, if the return value is true, it will be added to the new array

                Example:

 var arr = [1, 2, 3, 4, 5]

 var newArr = arr.filter(item => item > 3)
 console.log(newArr);

 //[4, 5]

        3.every

                Note: every traversal array is generally used to judge whether there are array elements that meet the conditions in the array. If all elements meet the conditions, the return value is true. If one element does not meet the conditions, it returns false

                Example:

var arr = [1, 2, 3, 4, 5]
console.log(arr.every(item => item > 3));

//flase

        4.some

                explain:   The usage of some method is very similar to that of every, except that the return value is treu as long as one element meets the condition, and false if no element meets the condition

                Example:

var arr = [1, 2, 3, 4, 5]
console.log(arr.some(item => item > 3));


//true

Add array element

        1.push

                explain:   Append from behind   The return value is the length of the added array, which will change the original array

                Example:  

var arr = [1, 2, 3, 4, 5]
console.log(arr.push(6, 7));
console.log(arr);

// 7
// [1, 2, 3, 4, 5, 6, 7]

        2.unshift

                explain:   Add from front   The return value is the length of the added array, which will change the original array

                Example:  

var arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(6, 7));
console.log(arr);

// 7
// [6, 7, 1, 2, 3, 4, 5]

        3.concat

                explain:   Concatenate an array and return a new array

                Example:  

var arr = [1, 2, 3, 4, 5]
var arr2 = [6, 7]
console.log(arr.concat(arr2));
console.log(arr);

// [1, 2, 3, 4, 5, 6, 7]
// [1, 2, 3, 4, 5]

                Note: the return value is a new array, while the original array remains unchanged

Delete array elements

        1.pop

                explain:   Delete from post   The return value is the deleted element, which will change the original array

                Example:  

var arr = [1, 2, 3, 4, 5]
console.log(arr.pop());
console.log(arr);

// 5
// [1, 2, 3, 4]

        2. shift

                explain:   Delete from front   The return value is the deleted element, which will change the original array

                Example:  

var arr = [1, 2, 3, 4, 5]
console.log(arr.shift());
console.log(arr);


// 1
// [2, 3, 4, 5]

Intercept array elements  

        1.splice

                Note: the splice method can give three parameters. 1. Where to start   2. Number of intercepts   3. The replaced element is generally used to delete the element with the specified index in the array, or replace the element with the specified index, which will change the original array

                Example:

// Deletes the specified element
var arr = [1, 2, 3, 4, 5]
console.log(arr.splice(2, 2));
console.log(arr);

// [3, 4]
// [1, 2, 5]


// Replace specified element
var arr = [1, 2, 3, 4, 5]
console.log(arr.splice(2, 2, 6));
console.log(arr);

// [3, 4]
// [1, 2, 6, 5]

        2.slice

                 explain:   Intercept array elements and return a new array. The elements of the new array are the intercepted elements. You can give two parameters,

1. The start index 2. The end index (can be omitted, and the intercepted element does not include this) will not change the original array

                Example:  

// Only one parameter
var arr = [1, 2, 3, 4, 5]
console.log(arr.slice(1));
console.log(arr);

// [2, 3, 4, 5]
// [1, 2, 3, 4, 5]


// Two parameters
var arr = [1, 2, 3, 4, 5]
console.log(arr.slice(1, 3));

// [2, 3]

Convert array to string

        1.toString:   Convert array to string

          2.join:   Convert array to string   You can pass in different symbols for connection. The default connection is comma

                Example:

var arr = [1, 2, 3, 4, 5]
console.log(arr.join('|'));

// 1|2|3|4|5

Other methods

        1.reduce: array summation

                Code example:

var arr = [1, 2, 3, 4, 5]
console.log(arr.reduce((sum, val) => sum + val, 0));

// 15

        2.reverse: reverse array

                Code example:

var arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr);

// [5, 4, 3, 2, 1]

        3.sort: bubble sort

                Code example:

// Forward sort
var arr = [7, 2, 6, 4, 5]
arr.sort((a, b) => a - b)
console.log(arr);

// [2, 4, 5, 6, 7]


// Reverse sort
var arr = [7, 2, 6, 4, 5]
arr.sort((a, b) => b - a)
console.log(arr);

// [7, 6, 5, 4, 2]

The above is my opinion on the array. If there is any omission or error, please correct it. I will actively improve it

Posted by itsmani1 on Wed, 29 Sep 2021 11:41:57 -0700