1. The find () and findIndex ()

The find() method is used to find the first eligible array member. Its argument is a callback function that is executed by all array members until the first member that returns true is found, and then returned. If there is no qualified member, undefined is returned.

[1, 2, 5, 1, 9]. Find ((n) = > n < 0) / / find the first members of less than 0 in this array / / 1Copy the code

The find() callback can take three arguments, the current value, the current position, and the original array. The findIndex() method is used much like the find() method, returning the location of the first qualified array member, or -1 if all members fail.

[1, 2, 5, -1, 9]. FindIndex ((n) => n < 0) // 3 const fruits = [{name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; const index = fruits.findIndex(fruit => fruit.name === 'cherries'); console.log(index); // 3 console.log(fruits[index]);Copy the code

In addition, both methods can find nans, compensating for the IndexOf methods of arrays.

[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
Copy the code

In the above code, the indexOf method cannot recognize NaN members of the array, but the findIndex method can do so with the object. is method.

2. filter()

The filter() method tests all elements with the specified function and creates a new array containing all elements that pass the test. 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. Elements that do not pass the callback test are skipped and not included in the new array. Filter does not change the original array.

var arr = [10, 20, 30, 40, 50] var newArr = arr.filter(item => item > 30); console.log(newArr); / / [40, 50]Copy the code

3. forEach()

Iterate over all elements of the number group, use the callback function to operate on the array, automatically traverse the entire array, and cannot break out of the loop in the middle, uncontrollable, does not support return operation output, return is only used to control whether the loop jumps out of the current loop. The callback takes three arguments: the first argument is the contents of the array to iterate over, the second argument is the corresponding array index, and the third argument is the array itself.

Var arr = [1,2,3,4,5,]; arr.forEach(function(item,index){ console.log(item); });Copy the code

This method returns no value, but simply iterates through each item in the array without modifying the original array. But you can modify the original array by its index;

Var ary =,23,24,42,1 [12]; var res = ary.forEach(function (item,index,input) { input[index] = item*10; }) console.log(res); //--> undefined; console.log(ary); //--> alter array index;Copy the code

4. Some () and every ()

The every() and some() methods are both iterating over arrays in JS and return only Boolean values.

every()

Returns true if each element in the array meets the condition; Return false if one is not satisfied;

some()

Check if there is at least one element in the array that meets the criteria and return true if there is only one element that meets the criteria and false if there is none

Var arr1=[1, 2, 3, 4, 5]; var arr2=[1, 4, 6, 8, 10]; console.log( arr1.every(function(value, index, array){ return value % 2 == 0; })); // false console.log( arr2.some(function(value, index, array){ return value % 2 == 0; })); // trueCopy the code

5. map()

The map() method returns a new array whose elements are the values processed by the call to the original array element.

The map() method processes the elements in their original array order.

Note: Map () does not detect empty arrays.

Note: Map () does not change the original array.

array.map(function(currentValue,index,arr), thisValue) var data = [1, 2, 3, 4]; Var arrayOfSquares = data.map(function (item) {return item * item; }); alert(arrayOfSquares); // [1, 4, 9, 16]Copy the code

6. reduce()

1. The reduce() method receives a function as an accumulator. Each value in the array (from left to right) is merged to a single value.

Array.reduce (callback, initialValue) 2. Callback: A function (also called reducer) that executes each value in the array and contains four parameters.

PreviousValue: the value returned by the callback of the last call or the initialValue provided. CurrentValue: the element being processed in the array. Index: the index of the current element in the array Let goodList = [{id: 1, price: 10, qty: 5}, {id: 2, price: 15, qty: 2}, {id: 3, price: 20, qty: 2}, {id: 3, price: 20, qty: 1}] let totalPrice = goodList.reduce((prev, cur) => { return prev + cur.price * cur.qty }, 0) console.log(totalPrice) // 100 var arrString = 'abcdaabc' // let count = arrString.split('').reduce(function(res, cur) { res[cur] ? res[cur]++ : res[cur] = 1 return res }, {}) console.log(count) // {a: 3, b: 2, c: 2, d: 1}Copy the code