ES6高級(jí)函數(shù)Array.reduce()和Object.assign()

很多時(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ù)制到
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市晓褪,隨后出現(xiàn)的幾起案子堵漱,更是在濱河造成了極大的恐慌,老刑警劉巖涣仿,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件勤庐,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡好港,警方通過(guò)查閱死者的電腦和手機(jī)愉镰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)媚狰,“玉大人岛杀,你說(shuō)我怎么就攤上這事阔拳≌腹拢” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵糊肠,是天一觀的道長(zhǎng)辨宠。 經(jīng)常有香客問(wèn)我,道長(zhǎng)货裹,這世上最難降的妖魔是什么嗤形? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮弧圆,結(jié)果婚禮上赋兵,老公的妹妹穿的比我還像新娘笔咽。我一直安慰自己,他們只是感情好霹期,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布叶组。 她就那樣靜靜地躺著,像睡著了一般历造。 火紅的嫁衣襯著肌膚如雪甩十。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,696評(píng)論 1 312
  • 那天吭产,我揣著相機(jī)與錄音侣监,去河邊找鬼。 笑死臣淤,一個(gè)胖子當(dāng)著我的面吹牛橄霉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播邑蒋,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼酪劫,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了寺董?” 一聲冷哼從身側(cè)響起覆糟,我...
    開(kāi)封第一講書(shū)人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎遮咖,沒(méi)想到半個(gè)月后滩字,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡御吞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年麦箍,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陶珠。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡挟裂,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出揍诽,到底是詐尸還是另有隱情诀蓉,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布暑脆,位于F島的核電站渠啤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏添吗。R本人自食惡果不足惜沥曹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧妓美,春花似錦僵腺、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至委刘,卻和暖如春丧没,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背锡移。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工呕童, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人淆珊。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓夺饲,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親施符。 傳聞我的和親對(duì)象是個(gè)殘疾皇子往声,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • ??引用類型的值(對(duì)象)是引用類型的一個(gè)實(shí)例浩销。 ??在 ECMAscript 中,引用類型是一種數(shù)據(jù)結(jié)構(gòu)听哭,用于將數(shù)...
    霜天曉閱讀 1,066評(píng)論 0 1
  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,238評(píng)論 0 4
  • 數(shù)組創(chuàng)建 javascript中創(chuàng)建數(shù)組的方式有兩種: 第一種是 使用Array構(gòu)造函數(shù): 第二種是 使用數(shù)組字面...
    那年點(diǎn)夏閱讀 731評(píng)論 4 3
  • 第3章 基本概念 3.1 語(yǔ)法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡(jiǎn)單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,132評(píng)論 0 21
  • 凌晨慢洋,頭昏腦漲,今天游戲,突然就想起了你陆盘, 想起第一次見(jiàn)你對(duì)我拘謹(jǐn)普筹、 不敢言, 那時(shí)我還覺(jué)得你好笑, 一個(gè)大男生好...
    秀發(fā)亂了閱讀 321評(píng)論 0 0