极客教程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>
我们学习了实现array.reduce()方法的polyfill。我们看到了实现用户定义的reduce()方法的两种不同方法。用户应该使用第二种方法，因为它更短，更易读，更干净。