Commonly used JavaScript array methods

1. filter()

grammar:

array.filter(function(currentValue,index,arr), thisValue)

Parameter Description:
currentValue : current element object (required)
index : the index value of the current element (optional)
arr : the array object to which the current element belongs (optional)
thisValue : The object passed to the function to be used as the "this" value when the callback is executed.
If thisValue is omitted, the value of " this " is " undefined " (optional)

//Filter elements whose age is greater than 10 var ages = [5, 32, 7, 10, 33, 12, 40]; 
var res = ages.filter(function (currentValue) { 
  return currentValue > 10; 
}) 
console.log(res.toString()); 
// Output: 32,33,12,40 
 
//Arrow function writing var res1 = ages.filter(item => item > 10) 
console.log(res.toString()); 

Output :

32,33,12,40

2. forEach()

grammar:

array.forEach(function(currentValue, index, arr), thisValue)

Parameter usage is the same as above

//Loop and output each parameter var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.forEach(function (currentValue, index) { 
  console.log("Parameter:" + currentValue + "Index:" + index); 
}) 
 
 
//Arrow function writing ages.forEach((item, index) => { 
  console.log("parameter:" + item + "index:" + index); 
}) 

Let’s look at the following code:

//Change 10 to 20 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.forEach(function (currentValue, index) { 
  if (currentValue === 10) { 
    ages[index] = 20 
    return 
  } 
  console.log(index); 
}) 
 
console.log(ages); 

After we changed the value of 10 to 20 in the code, we added a return , but the running results still showed that the value of index was printed 7 times. This is a shortcoming of forEach, which can only stop when the loop ends. So how to solve it?

3. some()

grammar:

array.some(function(currentValue,index,arr),thisValue)
Parameter usage is the same as above

//Change 10 to 20 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.some(function (currentValue, index) { 
  if (currentValue === 10) { 
    ages[index] = 20 
    return true 
  } 
  console.log(index); 
}) 
 
console.log(ages); 
 
//Change 10 to 20 arrow function var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.some((item, index) => { 
  if (item === 10) { 
    ages[index] = 20 
    return true 
  } 
  console.log(index); 
}) 
 
console.log(ages); 

The running result of the above code will only print the value of index three times. The shortcomings of forEach() can be perfectly solved through some . During the development process, you can choose according to your needs.

4. every()

grammar:

array.every(function(currentValue,index,arr), thisValue)
Parameter usage is the same as above

// Check if the value of each element is greater than 4 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
 
 
var res = ages.some(function (currentValue) { 
  return currentValue > 4 
}) 
console.log(res); 
// Output: true 
 
//arrow function var res = ages.some(item => item > 4) 
console.log(res); 

5. reduce()

grammar:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Parameter Description:

total : required. The initial value, or the return value after the calculation is completed.
currentValue : Required. Current element
currentIndex : Optional. The index of the current element
arr : optional. The array object to which the current element belongs.
initialValue : Optional. The initial value passed to the function

//Calculate the sum of all elements var numbers = [15.5, 2.3, 1.1, 4.7]; 
var res = numbers.reduce(function (total, currentValue) { 
  return total += currentValue 
}, 0) 
 
console.log(res); 
//23.6 
 
//Calculate the sum of elements greater than 4 var result = numbers.filter(item => item > 4).reduce((total, item) => total += item, 0) 
console.log(result); 
//20.2 

6. Merge arrays

Usage : var arr = [...array1,...array2]
Result : The element value of array 2 is concatenated to the element value of array 1

var arr = [1, 2, 3] 
var arr2 = [4, 5, 6] 
 
var res = [...arr, ...arr2] 
console.log(res); 
// Output: [1, 2, 3, 4, 5, 6] 
 
var res = [...arr2, ...arr] 
console.log(res); 
// Output: [4, 5, 6, 1, 2, 3] 

This is the end of this article about commonly used JavaScript array methods. For more relevant array JavaScript content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!