preface

Note the common looping methods for arrays in JS.

forEach

ForEach is probably the most commonly used method of all, but do you really know it?

Callback (currentValue [, index [, array]])[, thisArg])

parameter

  1. Callback (value currently processed, subscript of value currently processed, array currently traversed)
  2. This in this callback refers to

The return value

undefined

code

    let arr=[1.2.3.4.6.null.undefined.' '];
    arr.forEach(console.log)
Copy the code

You’ll notice that it doesn’t do anything to uninitialized values, that is, 4, 6 won’t be traversed.

    let arr=[1.2.3.4.5];
    arr.forEach((value,index,arr) = >{
        arr.push(0);
        console.log(value); / / 1, 2, 3, 4, 5
    })
     console.log(arr);  / /,2,3,4,5,0,0,0,0,0 [1]
Copy the code

You can see that the scope of the traversal is defined, which is the value of the array when the callback function is first executed. Items added to the array after a forEach call are not accessed by the callback function.

     let arr = [1.2.3.4.5];
     arr.forEach((value, index, arr) = > {
         arr.unshift(0)
         console.log(value); / / 1,1,1,1,1
     })
     console.log(arr); //[0, 0, 0, 0, 1, 2, 3, 4, 5]
Copy the code

Do you feel conflicted? Is face? Let me break it down for you.

The range is fixed, but it’s oksqueezeGo out.

     let arr = [1.2.3.4.5];
     arr.forEach((value, index, arr) = > {
         if(index===2){
            arr.splice(index,1)}console.log(value);/ / 1,2,3,5
     })
        console.log(arr);/ /,2,4,5 [1]
Copy the code

Finally, loops in forEach cannot be terminated by a return. If you have to use it, that’s fine.

     let arr = [1.2.3.4.5];
     try {
            arr.forEach((value, index) = > {
                if (index === 2) {
                    throw new Error('stop')}console.log(value); / / 1, 2})}catch ({ message }) {
            console.log(message) / / termination
        }
Copy the code

map

The map() method creates a new array with the result that each element in the array is the return value from a call to the provided function.

Usage:

Arr. map(callback(currentValue [, index [, array]])[, thisArg])

parameter

  1. Callback (value currently processed, subscript of value currently processed, array currently traversed)
  2. This in this callback refers to

The return value

An array of

        let arr = [1.2.3.4.5.7.null.undefined];
        let result = arr.map(value= >{
            return value+' '
        })
        console.table(result);//['1','2','3','4','5','7','null','undefined']
Copy the code

Nothing is done to uninitialized values.

        let arr = [1.2.3.4.5.7.null.undefined];
        let result = arr.map(() = >{})console.table(result);//[undefined*9]
Copy the code

When the callback function returns no value, the array length is the same as the length of the traversal and the value is undefined. When the array is changed in the callback function, the result of the operation is the same as in forEach. I won’t write it again because I’m lazy

filter

The filter() method creates a new array containing all the elements of the test implemented by the provided function, which is simply a filter effect

usage

let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

parameter

  1. Callback (value currently processed, subscript of value currently processed, array currently traversed)
  2. This in this callback refers to

The return value

An array of

        let arr = [0.1.2.3.4.5];
        let result = arr.filter(value= > {
            return value > 3
        })
        console.table(result); / / (4, 5)
Copy the code

Filter out invalid data in the callback function.

        let arr = [0.1.2.3.4.5];
        let result = arr.filter(value= > {
            return 1; // Return a true value
        })
        console.table(result);//[0, 1, 2, 3, 4, 5]
Copy the code

Filter calls callback once for each element in the array and creates a new array with all elements that cause callback to return true or its equivalent. Similarly, when the array is changed in the callback function, the result of the operation is referred to above in forEach. I won’t write it again because I’m lazy

some

The some() method tests that at least one element in the array passes the provided function test. It returns a Boolean value.

usage

arr.some(callback(element[, index[, array]])[, thisArg] )

parameter

  1. Callback (value currently processed, subscript of value currently processed, array currently traversed)
  2. This in this callback refers to

The return value

Boolean (Returns true if at least one element in the array passes the callback function test; The return value is false if all elements fail the callback test.

        let arr=[1.2.3.4.5];

        let result=arr.some(function (value,index,arr) {
            console.log(value);//1,2 [3,4,5] will not be traversed
            return value===2
        })
        console.table(result);//true
Copy the code

Note that when the first value that satisfies the test is found in the callback function, it returns true regardless of whether subsequent values satisfy the test.

        let arr = [];  / / or /,,,,,,
        let result = arr.some(function (value, index, arr) {
            console.log(value);
            return 'true value'
        })
        console.table(result);  //false
Copy the code

If you test with an empty array, it returns false in all cases

        let arr=[1.2.3.4.5];

        let result=arr.some(function (value,index,arr) {
            console.log(value);  / / 1
            return 'true value'
        })
        console.table(result);//true
Copy the code

Some () executes the callback function once for each element in the array until one is found that causes the callback to return a “true” value. If such a value is found, some() will immediately return true. Otherwise, some() returns false.

Similarly, when the array is changed in the callback function, the result of the operation is referred to above in forEach. I won’t write it again because I’m lazy

every

The every() method tests whether all elements in an array pass the test of a given function. It returns a Boolean value.

usage

arr.every(callback(element[, index[, array]])[, thisArg])

parameter

  1. Callback (value currently processed, subscript of value currently processed, array currently traversed)
  2. This in this callback refers to

The return value

Boolean (Return true if each return of the callback function is’ true ‘, false otherwise.)

        let arr = [1.2.3.4.5];

        let result = arr.every(function (value, index, arr) {
            return value>0

        })
        console.log(result);//true
Copy the code
        let arr = [1.2.3.4.5];

        let result = arr.every(function (value, index, arr) {
            console.log(value); / / 1
            return value > 2

        })
        console.log(result); //false
Copy the code

In every, the callback returns false whenever it finds the first value that does not match the test, and subsequent values are not iterated.

        let arr = [];

        let result = arr.every(function (value, index, arr) {
            console.log(value);/ / does not perform
            return false

        })
        console.log(result); //true
Copy the code

Here too, contrary to the rules of the some method, test with an empty array, which returns true in all cases.

find

The find() method returns the value of the first element in the array that satisfies the provided test function. Otherwise return undefined.

usage

arr.find(callback[, thisArg])

parameter

  1. Callback (value currently processed, subscript of value currently processed, array currently traversed)
  2. This in this callback refers to

The return value

The value of the first element in the array that satisfies the provided test function, otherwise undefined is returned.

        let arr=[1.2.3.4.5];
        let result=arr.find((value,index,arr) = >{
            console.log(value); / / 1
            return value>0
        })
        console.log(result); / / 1
Copy the code
        let arr=[1.2.3.4.5];
        let result=arr.find((value,index,arr) = >{
            console.log(value);/ / 1, 2, 3, 4, 5
            return value>6
        })
        console.log(result); //undefined
Copy the code
        let arr = [, 2.4];
        let result = arr.find((value, index, arr) = > {
            console.log(`index:${index}--value:${value}`);//index:0--value:undefined
            return 'true value'
        })
        console.log(result); //undefined
Copy the code

Find the first value in the array that satisfies the test and return it. Once found, subsequent values are not iterated. Returns undefined if none of the values in the array satisfy the test

        let arr=[,2.4]; // Sparse array
        let result=arr.find((value,index,arr) = >{
            console.log(`index:${index}--value:${value}`);
        })
        console.log(result);
Copy the code

Results:

Note that the callback function is called for every index in the array from 0 to Length-1, not just the assigned indexes, which means that this method is less efficient for sparse arrays than methods that traverse only the indexes with values.

Again, the find method returns either an array value (the first value in the array that satisfies the test) or undefined.

findIndex

The findIndex() method returns the index of the first element in the array that satisfies the provided test function. Returns -1 if no corresponding element is found.

usage

arr.findIndex(callback[, thisArg])

parameter

  1. Callback (value currently processed, subscript of value currently processed, array currently traversed)
  2. This in this callback refers to

The return value

Array by providing the index of the first element of the test function. Otherwise, -1 is returned.

        let arr=[1.2.3.4.5];
        let result=arr.findIndex((value,index,arr) = >{
            console.log(value); / / 1, 2
            return value===2
        })
        console.log(result);/ / 1
Copy the code
        let arr=[1.2.3.4.5];
        let result=arr.findIndex((value,index,arr) = >{
            console.log(value);
            return value===6
        })
        console.log(result);
Copy the code

Find the first subscript with the value 2 in the array arr. When the first value in the array that satisfies the test is found, its subscript is returned, and subsequent values in the array are not iterated. If you can’t find any, return -1.

        let arr=[1.2.3.4.5];
        let result=arr.findIndex((value,index,arr) = >{
            console.log(value);/ / 1
            return 'true value'
        })
        console.log(result);/ / 0
Copy the code

Note that the method ends when the callback returns a ‘true’ value and returns the subscript of the currently iterated value.

        let arr = [1.4.5]; 
        let result = arr.findIndex((value, index, arr) = > {
            console.log(value);/ / 1, undefined * 2, four, five
            if (value == 5) {
                return 'true value'}})console.log(result);/ / 4
Copy the code

Like find, the callback function is called for every index in the array from 0 to Length-1, not just the assigned indexes, which means that this method is less efficient for sparse arrays than methods that traverse only the indexes with values.