Array.reduce() 累計值處理

詳細內容
分類：Javascript
發佈：2013-03-10, 週日 21:52
點擊數：3051

Javascript的Array.reduce()方法：

     Array.reduce()方法的參數是一個回呼函式，reduce()方法會由左至右的為陣列中的每個元素呼叫一次回呼函式，並將回呼函式的傳回值當作下一次呼叫回呼函式的參數傳入。reduce()方法定義在ECMA-262第五版中，可能會有些瀏覽器不支援此方法。若要確定在所有瀏覽器中都能正確的執行，可以在原型中自行定義此方法。若是陣列中的元素沒有給定初始值，那reduce()方法會跳過該元素不會呼叫回呼函式，如果給定的初始值是undefined一樣也會呼叫。

Array.reduce()的語法：

array.reduce( callbackfn [ , initialValue] )

callbackfn：回呼函式，reduce()方法利用此函式來處理陣列中的元素，

                  callbackfn有四個傳入值previousValue、currentValue、index、array，

                  previousValue：前一次callbackfn的傳回值。

                  currentValue：當前的元素值。

                  index ：當前元素索引。

                  array：目前處理中的陣列。

                  傳回值：回呼函式會有一傳回值，此傳回值當成下一次callbackfn()的previousValue參數。

initialValue：初始值，此參數可以省略，如果是有設定，那麼第一次呼叫callbackfn()的previousValue參數會等於這個初始值，currentValue會是陣列的第一個有值的元素，若是沒有設定initialValue，那第一次呼叫callbackfn()時，previousValue參數會等於陣列的第一個有值的元素，currentValue會是陣列的第二個有值的元素。

Array.reduce()的範例：

從1加到10，未給定初始值：

<script type="text/javascript">
var t=1;
function add(previousValue, currentValue, index, array) {
var sum=previousValue+currentValue;
  document.writeln("第"+t+"次呼叫add：previousValue="+previousValue+ ", currentValue="+ currentValue +", index="+index+", 傳回值="+sum+"<br/>");
  t=t+1;
  return sum;
}
var myArray = [1,2,3,4,5,6,7,8,9,10];
document.writeln("After Array.reduce()："+myArray.reduce(add) );
</script>

Array.reduce()的範例輸出：

第1次呼叫add：previousValue=1, currentValue=2, index=1, 傳回值=3
第2次呼叫add：previousValue=3, currentValue=3, index=2, 傳回值=6
第3次呼叫add：previousValue=6, currentValue=4, index=3, 傳回值=10
第4次呼叫add：previousValue=10, currentValue=5, index=4, 傳回值=15
第5次呼叫add：previousValue=15, currentValue=6, index=5, 傳回值=21
第6次呼叫add：previousValue=21, currentValue=7, index=6, 傳回值=28
第7次呼叫add：previousValue=28, currentValue=8, index=7, 傳回值=36
第8次呼叫add：previousValue=36, currentValue=9, index=8, 傳回值=45
第9次呼叫add：previousValue=45, currentValue=10, index=9, 傳回值=55
After Array.reduce()：55

在原型中新增Array.reduce()方法：

     Array.reduce()方法是ECMS-262中的標準方法，但並非所有瀏覽器都支援，為確保在所有瀏覽器中都能正確執行，可自行在原型中定義該方法。下面是來自MDN中Array reduce method的程式，將其放入<script>的開頭：

if ('function' !== typeof Array.prototype.reduce) {
  Array.prototype.reduce = function(callback, opt_initialValue){
    'use strict';
    if (null === this || 'undefined' === typeof this) {
      // At the moment all modern browsers, that support strict mode, have
      // native implementation of Array.prototype.reduce. For instance, IE8
      // does not support strict mode, so this check is actually useless.
      throw new TypeError(
          'Array.prototype.reduce called on null or undefined');
    }
    if ('function' !== typeof callback) {
      throw new TypeError(callback + ' is not a function');
    }
    var index = 0, length = this.length >>> 0, value, isValueSet = false;
    if (1 < arguments.length) {
      value = opt_initialValue;
      isValueSet = true;
    }
    for ( ; length > index; ++index) {
      if (!this.hasOwnProperty(index)) continue;
      if (isValueSet) {
        value = callback(value, this[index], index, this);
      } else {
        value = this[index];
        isValueSet = true;
      }
    }
    if (!isValueSet) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    return value;
  };
}

關於Array物件的其他屬性與方法，請參考：陣列物件 Array。

 
 

  按個讚!~支持本站!~

FB推薦載入中  

你可能會有興趣的文章

返回本頁開頭    返回部落格首頁