js advanced array method


When you learn advanced js, you will learn several methods about arrays. I will list several here, and briefly introduce the usage and characteristics. The syntax of each method is similar


forEach iterates (traverses) the array This method has no return value and will modify the contents of the original array

The function is to call a method for each array element; traverse each element in the array without stopping the loop traversal due to return and break

        let arr = new Array(1, 2, 3, 4, 9, 4, 3, 5);
        let num = 0;
        arr.forEach(function(value, index, array) {
            console.log('each array element' + value);
            console.log('the index number of each array element' + index);
            console.log('the array itself' + array);
            num += value;

Cut out part of the print result

2. filter() method

The filter() method creates a new array, and the elements in the new array are checked by checking all the elements in the specified array that meet the conditions,

Mainly used to filter arrays, this method will not modify the value of the original array

        value Yes arr each value in the array,index subscript
        let newArr = arr.filter(function(value, index) {
            return value >= 3;

The output is as follows


It is used to detect whether the elements in the array meet the specified conditions, that is, to find whether there are elements in the array that meet the conditions

Note that its return value is a boolean value. If the element is found, it returns true, and if it is not found, it returns false

If the first element that satisfies the condition is found, the loop is terminated and the search is not continued

        // array.some(function(currentValue,index,arr))
        // currentValue: the value of the current item in the array
        // index: the current index of the array
        // arr: the array object itself
        Find if there is a value greater than or equal to 20 in the array
        let arr = new Array(10, 30, 4);
        let flag = arr.some(function (value) {
            return value >= 20;
        Find if there is any in the array'Gan Yu'this value
        let arr1 = new Array('Gan Yu', 'walnut', 'Thor', 'Kelly', 'Diona');
        let myWife = arr1.some(function (value) {
            return 'Gan Yu' === 'Gan Yu';

The output is as follows


every() method: Check whether all elements of an array are greater than or equal to a certain number

Unlike some, some returns true if a value in the array satisfies the condition, and this returns true only when all members are satisfied

        let arr = new Array(10, 30, 4);
        // Only one value is passed here, which refers to the current element
        judge arr Whether every value in the array is greater than 10
        let flag = arr.every((item) => {
            return item > 10;


map() method: a new array consisting of the returned values ​​after each element in the original array calls a specified method.

According to a certain mapping relationship, a new array is generated. The map has the meaning of the map and the meaning of the map

Feature: Can't stop

         let arr3 = [{ name: 'Gan Yu', age: 18 }, { name: 'walnut', age: 16 }, { name: 'Kelly', age: 8 }]
        // I hope to deal with this and an arr array, get rid of the age of the array elements and only need the name
        let arrNew = arr3.map(item => {
            return { name: item.name }

The output is as follows

Six. find and findIndex

find method: find the first element that meets the conditions, if found, return the element if not found, return undefined

findIndex method: find the first element that meets the conditions, if found, return the subscript of this element, if not found, return -1

Literally, find itself means search, and findIndex is the search index

        let arr1 = new Array('Gan Yu', 'walnut', 'Thor', 'Kelly', 'Diona');
        let flag = arr1.find((item) => {
            return item === 'Kelly'

        let flag2 = arr1.findIndex((item) => {
            return item === 'Kelly'

The output is as follows


Generally used for summation

        // reduce method
        let arr = [20, 30, 40];
        // The latter 0 is the initial value of the accumulation, that is, the value of sum. Of course, it can be omitted.
        // item represents each item in the arr array
        let res = arr.reduce((sum, item) => {
            console.log(sum, item);
            return sum + item;
        }, 0);

The output is as follows


Each method iterates over the array

Note: where forEach() will modify the contents of the original array; filter() will return a new array; some() and every() will return boolean values; find returns elements, findIndex returns subscripts, and find returns undefined if not found, findIndex not found returns -1

Tags: Javascript Front-end

Posted by lucy on Wed, 18 May 2022 01:47:51 +0300