很多時(shí)候需要累加數(shù)組項(xiàng)得到一個(gè)值(比如說(shuō)求和)祟滴。如果你碰到一個(gè)類似的問(wèn)題,你想到的方法是什么呢这弧?for或者while循環(huán)娃闲,對(duì)數(shù)組進(jìn)行送代,依次把他們的值加起來(lái)匾浪。比如
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都能實(shí)現(xiàn)需要的效果皇帮,但在JavaScript中有沒(méi)有更好的方案呢?回答是肯定的蛋辈,在JavaScript中(ESMAScript6)提供了另外兩個(gè)數(shù)組方法reduce()和reduceRight()属拾,這兩個(gè)數(shù)組會(huì)送代數(shù)組的所有數(shù)組項(xiàng),然后返回一個(gè)最終值梯浪。接下來(lái)的內(nèi)容捌年,主要來(lái)學(xué)習(xí)兩種方法。
reduce()方法
reduce()方法接收一個(gè)函數(shù)callbackfn作為累加器(accumulator)挂洛,數(shù)組中的每一個(gè)值(開(kāi)始合并)礼预,最后成為一個(gè)值。
語(yǔ)法
array.reduce(callbackfn,[initialValue]);
reduce()方法接收callbackfn函數(shù)虏劲,而這個(gè)函數(shù)包含四個(gè)參數(shù):
function callbackfn(preValue,curValue,index,array){}
preValue:上一次調(diào)用回調(diào)返回的值托酸,或者是提供的初始值(initialValue)
curValue:數(shù)組中當(dāng)前被處理的數(shù)組項(xiàng)
index:當(dāng)前數(shù)組項(xiàng)在數(shù)組中的索引值
array:調(diào)用reduce()方法的數(shù)組
而initialValue作為第一次調(diào)用callbackfn函數(shù)的第一個(gè)參數(shù)。
reduce()方法為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)柒巫。
callbackfn励堡,不包含數(shù)組中被刪除或者從未被賦值的元素,接收四個(gè)參數(shù):初始值(或者上一次回調(diào)函數(shù)的返回值)堡掏,當(dāng)前元素值应结,當(dāng)前索引,調(diào)用reduce()的數(shù)組泉唁。
回調(diào)函數(shù)第一次執(zhí)行時(shí)鹅龄,preValue和curValue可以是一個(gè)值,如果initialValue在調(diào)用reduce()被提供亭畜,那么第一個(gè)preValue就等于initialValue扮休,如果initialValue沒(méi)有被提供,那么preValue等于數(shù)組中的第一個(gè)值拴鸵,curValue等于數(shù)組中的第二個(gè)值玷坠。
就像這個(gè):
var arr = [1,2,3,4,5];
arr.reduce(function(preValue,curValue,index,array){
return preValue + curValue;
}) //15
上面的實(shí)例是沒(méi)有提供initialValue這個(gè)參數(shù),如果提供initialValue這個(gè)參數(shù)劲藐,initialValue = 5八堡;
var arr = [1,2,3,4,5];
arr.reduce(function(preValue,curValue,index,array){
return preValue + curValue;
},5)
這樣一來(lái),不用多說(shuō),應(yīng)該都知道,可以使用reduce()實(shí)現(xiàn)數(shù)組求和的功能首装,如
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();
這基本就是這個(gè)方法的用發(fā)。
和它同樣的還有一個(gè)reduceRight()方法的功能和reduce()方法的功能是一樣的溶耘,不同的是reduceRight()方法是從數(shù)組的末端向前將數(shù)組中的數(shù)組項(xiàng)做累加二拐。
Object.assign()
語(yǔ)法
Object.assign(target,...sources);
target是目標(biāo)對(duì)象
sources是源對(duì)象
返回目標(biāo)對(duì)象
在JS中有一個(gè)很惡心的問(wèn)題凳兵,就是引用數(shù)據(jù)類型讓賦值的時(shí)候百新,操作一個(gè)另一個(gè)也會(huì)發(fā)生變化,很典型的一個(gè)堆棧問(wèn)題庐扫。
var obj = {a:1};
var obj2 = obj;
obj2.a = 2;
console.log(obj) //a = 2
就像這樣饭望,在ES6,出現(xiàn)了解決方式Object.assign();
var obj = {a:1};
var copy = Object.assign({},obj);
copy.a = 2;
console.log(obj) //a = 1
很強(qiáng)大的一個(gè)方法
如果目標(biāo)對(duì)象中的屬性具有相同的鍵形庭,則屬性將被源中的屬性覆蓋铅辞。后來(lái)的源的屬性將類似地覆蓋早先的屬性。
Object.assign方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象萨醒。
合并屬性
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}; 注意目標(biāo)對(duì)象也會(huì)發(fā)生變化
合并的時(shí)候如果具有相同屬性斟珊,會(huì)按照先后順序,去覆蓋賦值富纸。
原型鏈上的屬性和不可枚舉的屬性不可復(fù)制
var obj = Object.create({foo: 1}, { // foo 在 obj 的原型鏈上
bar: {
value: 2 // bar 是一個(gè)不可枚舉的屬性.
},
baz: {
value: 3,
enumerable: true // baz 是 obj 自身的一個(gè)可枚舉屬性
}
});
var copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }囤踩,原型鏈上的屬性和不可枚舉的屬性沒(méi)有復(fù)制到