Método JavaScript Array reduce()

A continuación se muestra el ejemplo del método Array reduce() .

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        JavaScript Array reduce() Method
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color: green;">GeeksforGeeks</h1>
      
    <p>
        Click here to get the Subtract
        of array elements from the left side
    </p>
      
    <button onclick="myGeeks()">
        Click Here!
    </button>
      
    <br><br>
      
    Subtract: <span id="GFG"></span>
      
    <!-- Script to use reduce method -->
    <script>
        var arr = [175, 50, 25];
  
        function subofArray(total, num) {
            return total - num;
        }
        function myGeeks(item) {
            document.getElementById("GFG").innerHTML
                    = arr.reduce(subofArray);
        }
    </script>
</body>
  
</html>          

Producción:

El método arr.reduce() en JavaScript se usa para reducir la array a un solo valor y ejecuta una función proporcionada para cada valor de la array (de izquierda a derecha) y el valor de retorno de la función se almacena en un acumulador. .

Sintaxis:

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

Parámetro: Este método acepta cinco parámetros como se mencionó anteriormente y se describe a continuación:

function(total, currentValue, index, arr): Es el parámetro requerido y se usa para ejecutar cada elemento de la array. Contiene cuatro parámetros que se enumeran a continuación:
- total: es un parámetro obligatorio y se usa para especificar el valor inicial o el valor devuelto previamente por la función.
- currentValue: Es un parámetro obligatorio y se utiliza para especificar el valor del elemento actual.
- currentIndex: es un parámetro opcional y se utiliza para especificar el índice de array del elemento actual.
- arr: es un parámetro opcional y se utiliza para especificar el objeto de array al que pertenece el elemento actual.
initialValue: es un parámetro opcional y se utiliza para especificar el valor que se pasará a la función como valor inicial.

Ejemplo 1: este ejemplo utiliza el método reduce() para devolver la suma de todos los elementos de la array.

<!DOCTYPE html>
<html>
      
<head>
    <title>
        JavaScript Array reduce() Method
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color: green;">GeeksforGeeks</h1>
      
    <p>
        Click here to get the sum
        of array elements
    </p>
      
    <button onclick="myGeeks()">
        Click Here!
    </button>
      
    <br><br>
      
    Sum: <span id="GFG"></span>
      
    <!-- Script to use reduce method -->
    <script>
        var arr = [10, 20, 30, 40, 50, 60];
   
        function sumofArray(sum, num) {
            return sum + num;
        }
        function myGeeks(item) {
            document.getElementById("GFG").innerHTML
                    = arr.reduce(sumofArray);
        }
    </script>
</body>
  
</html>

Producción:

Ejemplo 2: este ejemplo utiliza el método reduce() para devolver la suma redonda de todos los elementos de la array.

<!DOCTYPE html>
<html>
      
<head>
    <title>
        JavaScript Array reduce() Method
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color: green;">GeeksforGeeks</h1>
      
    <p>
        Click here to get the sum
        of array elements
    </p>
      
    <button onclick="myGeeks()">
        Click Here!
    </button>
      
    <br><br>
      
    Sum: <span id="GFG"></span>
      
    <!-- Script to use reduce method -->
    <script>
        var arr = [1.5, 20.3, 11.1, 40.7];
   
        function sumofArray(sum, num) {
            return sum + Math.round(num);
        }
        function myGeeks(item) {
            document.getElementById("GFG").innerHTML
                    = arr.reduce(sumofArray, 0);
        }
    </script>
</body>
  
</html>

Salida:

Navegadores compatibles: Los navegadores compatibles con el método JavaScript Array reduce() se enumeran a continuación:

Google Chrome 3 y superior
Microsoft Edge 12 y superior
Mozilla Firefox 3.0 y superior
Safari 5 y superior
Ópera 10.5 y superior

Publicación traducida automáticamente

Artículo escrito por rathbhupendra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta