ES6高階函式Array.reduce()和Object.assign()

很多時候需要累加陣列項得到一個值（比如說求和）。如果你碰到一個類似的問題，你想到的方法是什麼呢？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都能實現需要的效果，但在JavaScript中有沒有更好的方案呢？回答是肯定的，在JavaScript中（ESMAScript6）提供了另外兩個陣列方法reduce()和reduceRight()，這兩個陣列會送代陣列的所有陣列項，然後返回一個最終值。接下來的內容，主要來學習兩種方法。

reduce()方法

reduce()方法接收一個函式callbackfn作為累加器(accumulator)，陣列中的每一個值（開始合併），最後成為一個值。

語法

array.reduce(callbackfn,[initialValue]);

reduce()方法接收callbackfn函式，而這個函式包含四個引數：

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

preValue：上一次呼叫回撥返回的值，或者是提供的初始值(initialValue)
curValue：陣列中當前被處理的陣列項
index：當前陣列項在陣列中的索引值
array：呼叫reduce()方法的陣列

而initialValue作為第一次呼叫callbackfn函式的第一個引數。

reduce()方法為陣列中的每一個元素依次執行回撥函式。
callbackfn，不包含陣列中被刪除或者從未被賦值的元素，接收四個引數：初始值(或者上一次回撥函式的返回值)，當前元素值，當前索引，呼叫reduce()的陣列。

回撥函式第一次執行時，preValue和curValue可以是一個值，如果initialValue在呼叫reduce()被提供，那麼第一個preValue就等於initialValue，如果initialValue沒有被提供，那麼preValue等於陣列中的第一個值，curValue等於陣列中的第二個值。

就像這個：

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

上面的例項是沒有提供initialValue這個引數，如果提供initialValue這個引數，initialValue = 5；

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

這樣一來，不用多說，應該都知道，可以使用reduce()實現陣列求和的功能，如

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

這基本就是這個方法的用發。

和它同樣的還有一個reduceRight()方法的功能和reduce()方法的功能是一樣的，不同的是reduceRight()方法是從陣列的末端向前將陣列中的陣列項做累加。

Object.assign()

語法

Object.assign(target,...sources)；
target是目標物件
sources是源物件
返回目標物件

在JS中有一個很噁心的問題，就是引用資料型別讓賦值的時候，操作一個另一個也會發生變化，很典型的一個堆疊問題。

    var obj = {a:1};
    var obj2 = obj;
    obj2.a = 2;
    console.log(obj) //a = 2

就像這樣，在ES6，出現瞭解決方式Object.assign();

var obj = {a:1};
var copy = Object.assign({},obj);
copy.a = 2;
console.log(obj) //a = 1

很強大的一個方法

如果目標物件中的屬性具有相同的鍵，則屬性將被源中的屬性覆蓋。後來的源的屬性將類似地覆蓋早先的屬性。

Object.assign方法只會拷貝源物件自身的並且可列舉的屬性到目標物件。

合併屬性

var o1= {a:1};
var o2 = {b : 2};
var o3 = {c:3};
var obj = Object.assign(o1,o2,o3);
console.log(obj) //{a:1,b:2,c:3};
console.log(o1) //{a:1,b:2,c:3}; 注意目標物件也會發生變化

合併的時候如果具有相同屬性，會按照先後順序，去覆蓋賦值。

原型鏈上的屬性和不可列舉的屬性不可複製

var obj = Object.create({foo: 1}, { // foo 在 obj 的原型鏈上
  bar: {
            value: 2  // bar 是一個不可列舉的屬性.
      },
  baz: {
             value: 3,
             enumerable: true  // baz 是 obj 自身的一個可列舉屬性
      }
  });

var copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }，原型鏈上的屬性和不可列舉的屬性沒有複製到