数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究在 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() 方法添加到 Array 对象的原型对象。我们需要在函数内部实现 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 也是一个可选参数，因此如果用户没有将 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() 方法来提高迭代性能。此外，我们使用了三元运算符来初始化 start 变量。
此外，我们定义了字符串数组，并使用 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() 方法的方法。用户应该使用第二种方法，因为它更短、更易读且更简洁。
1K+ 次浏览
