JavaScript学習メモ：配列(8)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

多くの場合、値を取得するために配列項目を蓄積する必要があります (合計など)。同様の問題に遭遇した場合、どのような解決策を思いつきますか?あなたも私と同じように、for または while ループを使用して配列を反復処理し、それらの値を順番に合計することを考えていますか?例:

var arr = [1,2,3,4,5,6];Array.prototype.sum = function (){    var sumResult = 0;    for (var i = 0; i < this.length; i++) {        sumResult += parseInt(this[i]);    }    return sumResult;}arr.sum(); // 21

ログイン後にコピー

または

var arr =  [1,2,3,4,5,6];Array.prototype.sum = function () {    var sumResult = 0;    var i = this.length;    while (i--) {        sumResult += parseInt(this[i]);    }    return sumResult;}arr.sum(); // 21

ログイン後にコピー

それらは最良の解決策ですか?まずは所要時間を見てみましょう。

// 测试for和while循环实现数组求和的性能var arr = [1,2,3,4,5,6];// for循环console.time("forLoop");Array.prototype.forLoop = function (){    for (var i = 0; i < 10000; i++) {        var sumResult = 0;        for (var j = 0; j < this.length; j++) {            sumResult += parseInt(this[j]);        }    }    return sumResult;}arr.forLoop();console.log('最终的值：' + arr.forLoop()); // 21console.timeEnd("forLoop"); // 54.965ms

ログイン後にコピー

while ループにかかった時間を見てみましょう:

var arry = [1,2,3,4,5,6];console.time("whileLoop");Array.prototype.whileLoop = function () {    for (var i = 0; i < 10000; i++) {        var sumResult = 0;        for (var j = 0; j < this.length; j++) {            sumResult += parseInt(this[j]);        }    }    return sumResult;}arry.whileLoop();console.log('最终的值：' + arry.whileLoop()); // 21console.timeEnd("whileLoop"); // 53.056ms

ログイン後にコピー

比較結果を見てみましょう

ループの種類	最終値 (合計)	費やした時間
for	21	54.965ms
while	21	53.056ms

注: 配列 [1,2,3,4,5,6] は 10000 回蓄積されました。

上記の for と while を使用すると目的の効果を達成できますが、JavaScript でより良い解決策はありますか?答えは「はい」です。JavaScript (ESMAScript 5) には、他に 2 つの配列メソッド、reduce() と ReduceRight() が用意されています。これらは、配列のすべての配列項目を反復処理して、最終値を返します。以下のコンテンツでは、主にこの 2 つの方法について学習します。

reduce() メソッド

reduce() メソッドは関数 callbackfn をアキュムレーターとして受け取り、配列内の各値 (左から右) が 1 つの値にマージされます。

構文

array.reduce(callbackfn,[initialValue])

ログイン後にコピー

reduce() メソッドは callbackfn 関数を受け取り、この関数には 4 つのパラメータが含まれます:

function callbackfn(preValue,curValue,index,array){}

ログイン後にコピー

preValue : 最後のコールバック呼び出しによって返された値、または指定された初期値 (initialValue)
curValue : 配列内の現在処理されている配列項目
Index : 配列内の現在の配列項目のインデックス値
array :reduce() メソッドが呼び出される配列

そしてInitialValue は最初のコールバックとして使用されます。fn 関数の最初のパラメータです。

reduce() メソッドは、配列内の削除された要素や値が割り当てられていない要素を除き、配列内の各要素に対してコールバック関数 callbackfn を順番に実行します。初期値 (または最後の値の戻り値) の 4 つのパラメーターを受け取ります。 callback function)、現在の要素の値、現在のインデックス、reduce() が呼び出される配列。

コールバック関数が初めて実行されるとき、reduce() を呼び出すときに initialValue が指定された場合、preValue と curValue は値になります。最初の preValue は initialValue に等しく、curValue は最初の値に等しくなります。配列;initialValue が指定されていない場合、preValue は配列の最初の値と等しく、`curValue は配列の 2 番目の値と等しくなります。

例を見てみましょう:

var arr = [0,1,2,3,4];arr.reduce(function (preValue,curValue,index,array) {    return preValue + curValue;}); // 10

ログイン後にコピー

例のコールバック関数は 4 回実行され、各回のパラメーターと戻り値は次のとおりです:

	preValue	curValue	インデックス	配列	戻り値
最初のコールバック	0	1	1	[0,1,2,3,4]	1
2 番目のコールバック	1	2	2	[0,1,2,3,4]	3
3 番目のコールバック	3	3	3	[0,1,2,3,4]	6
4 番目のコールバック	6	4	4	[0,1,2,3,4]	10

上記の例のreduce()メソッドはinitialValueを提供しませんイニシャルvalue, next 上の例では、初期値 5 を提供するように少し変更します。このとき、reduce()メソッドはコールバックを5回実行し、各回のパラメータと戻り値は以下の通りです。

... 1,2, 3,4]15

最初のコールバック曲

[0,1,2,3,4]

2番目のコールバック

[ 0,1,2 ,3,4]

3 番目のコールバック

[0,1,2,3,4]

4 番目のコールバック

这样一来，不用多说，应该都知道，可以使用 reduce() 实现数组求和的功能。如：

var arr = [1,2,3,4,5,6];Array.prototype.sum = function (){    var sumResult = 0;    return this.reduce(function (preValue, curValue) {        return sumResult = preValue + curValue;    });    return sumResult;}arr.sum(); // 21

ログイン後にコピー

回到文章的前面，来看看使用 reduce() 方法对数组求和，需要多少时间：

var arr = [1,2,3,4,5,6];console.time("ruduce");Array.prototype.ruduceSum = function (){    for (var i = 0; i < 10000; i++) {        return  this.reduce (function (preValue, curValue) {            return preValue + curValue;        });    }}arr.ruduceSum();console.log('最终的值：' + arr.ruduceSum()); // 21console.timeEnd("ruduce"); // 0.417ms

ログイン後にコピー

同时看看所费时间的对比：

循环类型	最终值(和)	所费时间
for	21	54.965ms
while	21	53.056ms
reduce	21	0.417ms

在Chrome浏览器下，每次执行的数据都会略有不同，但可以明显的看出 reduce() 对数组项求和所费时间是最短的。

reduceRight() 方法

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

reduceRight() 首次调用回调函数 callbackfn 时， prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数，则 prevValue 等于 initialValue ， curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数，则 prevValue 等于数组最后一个值， curValue 等于数组中倒数第二个值。

来看实例：

var arr = [0,1,2,3,4];arr.reduceRight(function (preValue,curValue,index,array) {    return preValue + curValue;}); // 10

ログイン後にコピー

回调将会被调用四次，每次调用的参数及返回值如下：

	preValue	curValue	index	array	返回值
第一次回调	4	3	3	[0,1,2,3,4]	7
第二次回调	7	2	2	[0,1,2,3,4]	9
第三次回调	9	1	1	[0,1,2,3,4]	10
第四次回调	10	0	0	[0,1,2,3,4]	10

如果提供一个初始值 initialValue 为 5 :

var arr = [0,1,2,3,4];arr.reduceRight(function (preValue,curValue,index,array) {    return preValue + curValue;}, 5); // 15

ログイン後にコピー

回调将会被调用五次，每次调用的参数及返回的值如下：

	preValue	curValue	index	array	返回值
第一次回调	5	4	4	[0,1,2,3,4]	9
第二次回调	9	3	3	[0,1,2,3,4]	12
第三次回调	12	2	2	[0,1,2,3,4]	14
第四次回调	14	1	1	[0,1,2,3,4]	15
第五次回调	15	0	0	[0,1,2,3,4]	15

同样的，可以对一个数组求和，也可以使用 reduceRight() 方法:

var arr = [1,2,3,4,5,6];console.time("ruduceRight");Array.prototype.ruduceRightSum = function (){    for (var i = 0; i < 10000; i++) {        return  this.reduceRight (function (preValue, curValue) {            return preValue + curValue;        });    }}arr.ruduceRightSum();console.log('最终的值：' + arr.ruduceSum()); // 21console.timeEnd("ruduceRight"); // 5.725ms

ログイン後にコピー

总结

reduce() 和 reduceRight() 两个方法功能都是类似的，可以让数组调用一个回调函数 callbackfn 作为累加器。实际上根据这个回调函数，可以实现不同的功能，比如说，对数组项求合；将多个数组合并到一个数组等等。甚至配合数组其他的方法你还可以做更多功能的处理。如果感兴趣的话不仿尝试一二。

初学者学习笔记，如有不对，还希望高手指点。如有造成误解，还希望多多谅解。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。