Common JavaScript array methods

Directory 1, filter () 2, forEach () 3, some () 4, every () 5, reduce () 6, Merge Array

1. filter ()

Syntax:

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

Parameter description:
currentValue Current Element Object (Required)
index Index value of the current element (optional)
arr Array object to which the current element belongs (optional)
thisValue Object is used when the callback is executed, passed to the function, and used as the value of "this".
If omitted thisValue , " this The value of "is" undefined "(Optional)

// Filter age is greater than 10 Elements of  
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 ()

Syntax:

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

Parameter usage is the same as above

// Loop out 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); 
}) 

Look at the following code:

// Put 10 Modify 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 1 return However, the running results show that the value of index is printed seven times, which is one disadvantage of forEach and can only be stopped at the end of the loop. So how to solve it?

3. some ()

Syntax:

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

// Put 10 Modify 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); 
 
// Put 10 Modify 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 results in the above code will only be printed 3 times index The value of, through the some It can be solved perfectly index0 The shortage, the development process depends on everyone's needs to choose.

4. every ()

Syntax:

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

// Determine whether 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 ()

Syntax:

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

Parameter description:

total : Required. Initial value, or the return value after calculation.
currentValue : Required. Current element
currentIndex : Optional. Index of the current element
arr : Optional. The array object to which the current element belongs.
initialValue : Optional. 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 greater than 4 The sum of the elements of  
var result = numbers.filter(item => item > 4).reduce((total, item) => total += item, 0) 
console.log(result); 
//20.2 

6. Merge arrays

Usage: var arr = [... Array 1,... Array 2]
Result: Splice the element values of Array 2 after the element values of Array 1

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