JavaScript 为Array.prototype.reduce()方法实现polyfill

polyfill是一个使用用户定义的方法来扩展浏览器功能的概念。如果用户的浏览器没有更新，可能会发生浏览器不支持任何编程语言的最新功能，如JavaScript。

作为一个开发者，我们需要检查该功能是否被浏览器支持，如果不支持，我们需要调用一个用户定义的方法。

在本教程中，我们将讨论为array.reduce()方法实现polyfill。如果任何浏览器不支持array.reduce()方法，我们将调用用户定义的reduce()方法。

在我们开始学习本教程之前，让我们先了解reduce()方法的作用。reduce()方法将数组减少为一个元素。例如，我们可以使用array.reduce()方法来找到数组中所有元素的总和，因为我们将所有数组元素减少到单一的sum变量中。此外，我们还可以使用reduce()方法将数组中的所有字符串连接成一个单一的字符串。

语法

用户可以按照下面的语法来实现array.reduce()方法的polyfill。

Array.prototype.reduce = function (callbackFunc, initial) {

   // implement logic for reduce() method
}

在上面的语法中，我们已经在数组对象的原型对象中加入了reduce()方法。我们需要在函数中实现reduce()方法的逻辑。

例子（使用内置的reduce()方法）

在下面的例子中，我们创建了数字数组，并使用reduce()方法来获得所有数组元素的总和。用户可以观察到我们是如何将数组减少为一个元素的。

<html>
<body>
   <h2>Using the <i> reduce() method without polyfill </i> in JavaScript</h2>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      function callback(sum, value) {
         return sum + value;
      }
      let array = [30, 50, 6, 7, 8, 9, 50, 3, 2, 3, 43, 5, 4, 3, 23, 32, 456];
      let sum = array.reduce(callback, 0);
      content.innerHTML += "The array values are " + array + "<br>";
      content.innerHTML += "The sum of all array elements using the array.reduce() method is " + sum + "<br>";
   </script>
</body>
</html>

实现reduce()方法的polyfill

用户应该按照以下步骤来实现array.reduce()方法的逻辑。

第1步 - 创建一个singleElement变量，并用作为参数传递的初始值来初始化它。另外，initial是一个可选的参数，所以如果用户没有把初始值作为参数传递给reduce()方法，它可以是未定义的。

第2步 - 使用for循环来迭代数组。

第3步 – 如果singleElement的值是未定义的，用数组的第一个元素初始化它。

第4步 – 使用call()方法为每个数组元素执行回调函数，并用回调函数的返回值替换singleElement变量的值。

第5步 - 一旦for循环的迭代完成，返回singleElement变量的值。

例子

在下面的例子中，我们使用reduce()方法对数组元素进行求和，和上面的例子一样，但这里我们使用的是用户定义的reduce()方法。

我们按照上面的步骤实现了用户定义的reduce()方法，用户可以观察到它的输出与前面的例子相同。

<html>
<body>
   <h2>Using the <i> reduce() method with polyfill </i> in JavaScript</h2>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      function callback(sum, value) {
         return sum + value;
      }
      let array = [30, 50, 6, 7, 8, 9, 50, 3, 2, 3, 43, 5, 4, 3, 23, 32, 456];
      Array.prototype.reduce = function (callbackFunc, initial) {

         // initial is an optional parameter.

         // if initial passed as an argument, initialize the singleElement with the initial value.

         // Otherwise, initialize the singleElement with the first value of the array. 
         let singleElement = initial;
         for (let k = 0; k < this.length; k++) {
            if (singleElement) {
               singleElement = callbackFunc.call(null,
               singleElement, this[k], k, this);
            }
            else {
               singleElement = this[k];
            }
         }

         // return the single element.
         return singleElement;
      }
      let sum = array.reduce(callback)
      content.innerHTML += "The array values are " + array + "<br>";
      content.innerHTML += "The sum of all array elements using the array.reduce() method is " + sum + "<br>";
   </script>
</body>
</html>

例子

我们在下面的例子中优化了polyfilled reduce()方法。我们在reduce()方法中使用了forEach()方法来提高迭代性能。同时，我们使用了三元操作符来初始化起始变量。

此外，我们定义了字符串数组，并使用array.reduce()方法将所有数组元素转换为一个字符串。

<html>
<body>
   <h2>Using the <i> reduce() method with polyfill </i> in JavaScript</h2>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      Array.prototype.reduce = function (callbackFunc, start) {
         let array = this;
         array.forEach(value => {
            start = start !== undefined ? callbackFunc(start, value) : value
         })
         return start;
      }
      function callback(finalStr, str) {
         return finalStr + str;
      }
      let strings = [" Hi ", " Users ", "!", " Welcomes ", " to ", " the ", " tutorialspoint's ", " JavaScript ", " blog! "];
      let finalStr = strings.reduce(callback, "")
      content.innerHTML += "The array values: " + strings + "<br>";
      content.innerHTML += "The final string after merging all array values using the array.reduce() method: " + finalStr + "<br>";
   </script>
</body>
</html>