ว่าผมต้องการที่จะสรุปสำหรับแต่ละองค์ประกอบในa.xarr

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return a.x + b.x})
>> NaN

ฉันเชื่อว่าขวานไม่ได้กำหนดไว้ในบางจุด

งานต่อไปนี้ใช้ได้ดี

arr = [1,2,4]
arr.reduce(function(a,b){return a + b})
>> 7

ฉันทำอะไรผิดในตัวอย่างแรก

หลังจากซ้ำแรก your're กลับมาจำนวนหนึ่งแล้วพยายามที่จะได้รับทรัพย์สินxของมันจะเพิ่มไปยังวัตถุถัดไปซึ่งเป็นundefinedและคณิตศาสตร์ที่เกี่ยวข้องกับผลในการundefinedNaN

ลองส่งคืนวัตถุที่มีxคุณสมบัติที่มีผลรวมของคุณสมบัติ x ของพารามิเตอร์:

var arr = [{x:1},{x:2},{x:4}];

arr.reduce(function (a, b) {
  return {x: a.x + b.x}; // returns object with property x
})

// ES6
arr.reduce((a, b) => ({x: a.x + b.x}));

// -> {x: 7}

เพิ่มคำอธิบายจากความคิดเห็น:

ค่าที่ส่งคืนของการวนซ้ำแต่ละครั้งที่[].reduceใช้เป็นaตัวแปรในการทำซ้ำครั้งถัดไป

ย้ำ 1: a = {x:1}, b = {x:2}, {x: 3}มอบหมายให้aในการทำซ้ำ 2

การวนซ้ำ 2: a = {x:3}, b = {x:4}.

ปัญหากับตัวอย่างของคุณคือคุณคืนค่าตัวอักษร

function (a, b) {
  return a.x + b.x; // returns number literal
}

ย้ำ 1: a = {x:1}, b = {x:2}, // returns 3เป็นaในซ้ำไป

ย้ำ 2: a = 3, b = {x:2}ผลตอบแทนNaN

จำนวนตัวอักษร3ไม่ได้ (โดยทั่วไป) มีคุณสมบัติที่เรียกว่าxดังนั้นมันundefinedและ undefined + b.xผลตอบแทนNaNและNaN + <anything>อยู่เสมอNaN

ชี้แจง : ฉันชอบวิธีการของฉันมากกว่าคำตอบยอดนิยมอื่น ๆ ในหัวข้อนี้ในขณะที่ฉันไม่เห็นด้วยกับความคิดที่ว่าผ่านพารามิเตอร์ตัวเลือกเพื่อลดด้วยจำนวนเวทมนตร์เพื่อให้ได้จำนวนดั้งเดิมนั้นสะอาดกว่า มันอาจส่งผลให้เขียนบรรทัดน้อยลง แต่ imo มันอ่านได้น้อย

วิธีที่สะอาดกว่าในการบรรลุเป้าหมายนี้คือการให้ค่าเริ่มต้น:

var arr = [{x:1}, {x:2}, {x:4}];
arr.reduce(function (acc, obj) { return acc + obj.x; }, 0); // 7
console.log(arr);

ครั้งแรกที่ฟังก์ชั่นที่ไม่ระบุชื่อที่เรียกว่าจะได้รับการเรียกว่ามีและผลตอบแทน(0, {x: 1}) 0 + 1 = 1ครั้งต่อไปที่จะได้รับการเรียกว่ามีและผลตอบแทน(1, {x: 2}) 1 + 2 = 3มันแล้วเรียกว่ามีในที่สุดก็กลับมา(3, {x: 4})7

TL; DR ตั้งค่าเริ่มต้น

ใช้การทำลายล้าง

arr.reduce( ( sum, { x } ) => sum + x , 0)

โดยไม่ต้องทำลาย

arr.reduce( ( sum , cur ) => sum + cur.x , 0)

ด้วย typescript

arr.reduce( ( sum, { x } : { x: number } ) => sum + x , 0)

ลองใช้วิธีการทำลายล้าง:

const arr = [ { x: 1 }, { x: 2 }, { x: 4 } ]
const result = arr.reduce( ( sum, { x } ) => sum + x , 0)
console.log( result ) // 7

กุญแจสำคัญในการนี้คือการตั้งค่าเริ่มต้น ค่าที่ส่งคืนจะกลายเป็นพารามิเตอร์แรกของการวนซ้ำถัดไป

เทคนิคที่ใช้ในคำตอบยอดนิยมไม่ได้เป็นสำนวน

คำตอบที่ยอมรับจะเสนอให้ไม่ผ่านค่า "ทางเลือก" นี้เป็นธรรมเป็นวิธีที่เป็นสำนวนที่เป็นพารามิเตอร์ที่สองมักจะรวม ทำไม? สามเหตุผล:

1. อันตราย - การไม่ผ่านค่าเริ่มต้นเป็นอันตรายและสามารถสร้างผลข้างเคียงและการกลายพันธุ์ได้หากฟังก์ชั่นการโทรกลับไม่สนใจ

ดูเถิด

const badCallback = (a,i) => Object.assign(a,i) 

const foo = [ { a: 1 }, { b: 2 }, { c: 3 } ]
const bar = foo.reduce( badCallback )  // bad use of Object.assign
// Look, we've tampered with the original array
foo //  [ { a: 1, b: 2, c: 3 }, { b: 2 }, { c: 3 } ]

หากอย่างไรก็ตามเราได้ทำเช่นนี้ด้วยค่าเริ่มต้น:

const bar = foo.reduce( badCallback, {})
// foo is still OK
foo // { a: 1, b: 2, c: 3 }

สำหรับเร็กคอร์ดยกเว้นว่าคุณตั้งใจจะกลายพันธุ์วัตถุต้นฉบับให้ตั้งค่าพารามิเตอร์แรกของObject.assignเป็นวัตถุว่างเปล่า Object.assign({}, a, b, c)เช่นนี้

2 - การอนุมานประเภทที่ดีกว่า - เมื่อใช้เครื่องมือเช่น typescript หรือตัวแก้ไขเช่น VS Code คุณจะได้รับประโยชน์จากการบอกผู้เริ่มต้นคอมไพเลอร์และสามารถจับข้อผิดพลาดหากคุณทำผิด หากคุณไม่ได้ตั้งค่าเริ่มต้นในหลาย ๆ สถานการณ์อาจไม่สามารถเดาได้และคุณอาจจบลงด้วยข้อผิดพลาดรันไทม์ที่น่าขนลุก

3 - ให้ความเคารพผู้ปฏิบัติงาน - จาวาสคริปต์ส่องแสงได้ดีที่สุดเมื่อมีการเปิดใช้งานฟังก์ชันลูกด้านใน ในโลกที่ใช้งานได้มีมาตรฐานว่าคุณจะ "พับ" หรือreduceใช้อาร์เรย์อย่างไร เมื่อคุณพับหรือใช้catamorphismกับอาเรย์คุณจะรับค่าของอาเรย์นั้นเพื่อสร้างชนิดใหม่ คุณต้องสื่อสารประเภทผลลัพธ์ที่เกิดขึ้น - คุณควรทำสิ่งนี้แม้ว่าประเภทสุดท้ายคือค่าในอาเรย์อาเรย์อื่นหรือประเภทอื่น ๆ

ลองคิดอีกวิธีหนึ่ง ใน JavaScript ฟังก์ชันสามารถส่งผ่านข้อมูลเช่นเดียวกับที่นี่คือวิธีการเรียกกลับใช้งานผลของรหัสต่อไปนี้คืออะไร

[1,2,3].reduce(callback)

มันจะส่งคืนตัวเลขหรือไม่ วัตถุหรือไม่? ทำให้ชัดเจนยิ่งขึ้น

[1,2,3].reduce(callback,0)

อ่านเพิ่มเติมเกี่ยวกับฟังก์ชั่นการเขียนโปรแกรมเฉพาะที่นี่: https://github.com/fantasyland/fantasy-land#foldable

พื้นหลังบางอย่างเพิ่มเติม

reduceวิธีการจะใช้เวลาสองพารามิเตอร์

Array.prototype.reduce( callback, initialItem )

callbackฟังก์ชั่นใช้พารามิเตอร์ต่อไป

(accumulator, itemInArray, indexInArray, entireArray) => { /* do stuff */ }

สำหรับการทำซ้ำครั้งแรก

• ถ้าinitialItemมีให้ที่reduceฟังก์ชั่นผ่านการinitialItemเป็นและรายการแรกของอาร์เรย์เป็นaccumulatoritemInArray

• ถ้าinitialItemจะไม่ให้ไว้ที่reduceฟังก์ชั่นผ่านรายการแรกในอาร์เรย์เป็นinitialItemและรายการที่สองในอาร์เรย์เป็นitemInArrayซึ่งสามารถทำให้เกิดความสับสนพฤติกรรม

ฉันสอนและแนะนำให้ตั้งค่าเริ่มต้นของการลดเสมอ

คุณสามารถตรวจสอบเอกสารที่:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

หวังว่านี่จะช่วยได้!

คนอื่น ๆ ได้ตอบคำถามนี้ แต่ฉันคิดว่าฉันจะโยนในแนวทางอื่น แทนที่จะไปที่ขวานสรุปโดยตรงคุณสามารถรวมแผนที่ (จากขวานถึง x) และลด (เพื่อเพิ่ม x's):

arr = [{x:1},{x:2},{x:4}]
arr.map(function(a) {return a.x;})
   .reduce(function(a,b) {return a + b;});

เป็นที่ยอมรับอาจจะช้าลงเล็กน้อย แต่ฉันคิดว่ามันคุ้มค่าที่จะกล่าวถึงเป็นตัวเลือก

การทำให้เป็นทางการในสิ่งที่ถูกชี้ให้เห็นคือรีดิวเซอร์ (catamorphism) ซึ่งใช้สองข้อโต้แย้งซึ่งอาจเป็นประเภทเดียวกันโดยบังเอิญและส่งคืนชนิดที่ตรงกับอาร์กิวเมนต์แรก

function reducer (accumulator: X, currentValue: Y): X { }

นั่นหมายความว่าร่างกายของความต้องการลดที่จะเกี่ยวกับการแปลงcurrentValueและมูลค่าปัจจุบันของค่าของใหม่accumulatoraccumulator

สิ่งนี้ใช้งานได้อย่างตรงไปตรงมาเมื่อเพิ่มเนื่องจากค่าตัวสะสมและองค์ประกอบทั้งสองเกิดขึ้นเป็นประเภทเดียวกัน (แต่ให้บริการตามวัตถุประสงค์ที่ต่างกัน)

[1, 2, 3].reduce((x, y) => x + y);

มันใช้งานได้เพราะพวกมันเป็นตัวเลขทั้งหมด

[{ age: 5 }, { age: 2 }, { age: 8 }]
  .reduce((total, thing) => total + thing.age, 0);

ตอนนี้เรากำลังให้ค่าเริ่มต้นแก่ผู้รวบรวม ค่าเริ่มต้นควรเป็นประเภทที่คุณคาดว่าตัวรวบรวมจะเป็น (ประเภทที่คุณคาดว่าจะออกมาเป็นค่าสุดท้าย) ในกรณีส่วนใหญ่ ในขณะที่คุณไม่ได้ถูกบังคับให้ทำเช่นนี้ (และไม่ควร) มันเป็นสิ่งสำคัญที่ต้องจำไว้

เมื่อคุณทราบแล้วคุณสามารถเขียนการลดความหมายสำหรับปัญหาความสัมพันธ์ n: 1 อื่น ๆ

การลบคำซ้ำ:

const skipIfAlreadyFound = (words, word) => words.includes(word)
    ? words
    : words.concat(word);

const deduplicatedWords = aBunchOfWords.reduce(skipIfAlreadyFound, []);

พบจำนวนคำทั้งหมดที่พบ:

const incrementWordCount = (counts, word) => {
  counts[word] = (counts[word] || 0) + 1;
  return counts;
};
const wordCounts = words.reduce(incrementWordCount, { });

การลดอาร์เรย์ของอาร์เรย์ลงในอาร์เรย์เดียว:

const concat = (a, b) => a.concat(b);

const numbers = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
].reduce(concat, []);

เมื่อใดก็ตามที่คุณต้องการเปลี่ยนจากสิ่งต่าง ๆ เป็นค่าเดียวที่ไม่ตรงกับ 1: 1 การลดคือสิ่งที่คุณอาจพิจารณา

ในความเป็นจริงแล้วทั้งแผนที่และตัวกรองสามารถนำไปใช้เป็นการลด:

const map = (transform, array) =>
  array.reduce((list, el) => list.concat(transform(el)), []);

const filter = (predicate, array) => array.reduce(
  (list, el) => predicate(el) ? list.concat(el) : list,
  []
);

reduceฉันหวังว่านี้มีบางส่วนบริบทต่อไปสำหรับวิธีการใช้งาน

สิ่งหนึ่งที่นอกเหนือจากนี้ซึ่งฉันยังไม่ได้แบ่งคือเมื่อมีความคาดหวังว่าประเภทอินพุตและเอาต์พุตมีความหมายโดยเฉพาะว่าเป็นแบบไดนามิกเนื่องจากองค์ประกอบอาร์เรย์เป็นฟังก์ชัน:

const compose = (...fns) => x =>
  fns.reduceRight((x, f) => f(x), x);

const hgfx = h(g(f(x)));
const hgf = compose(h, g, f);
const hgfy = hgf(y);
const hgfz = hgf(z);

สำหรับการทำซ้ำครั้งแรก 'a' จะเป็นวัตถุแรกในอาร์เรย์ดังนั้น ax + bx จะคืนค่า 1 + 2 เช่น 3 ในการทำซ้ำครั้งถัดไปจะมีการกำหนดค่าที่ส่งคืน 3 ให้กับ a ดังนั้น a จึงเป็นตัวเลขในขณะนี้ จะให้ NaN

วิธีง่ายๆคือการจับคู่หมายเลขในอาเรย์ก่อนแล้วจึงลดจำนวนดังต่อไปนี้:

arr.map(a=>a.x).reduce(function(a,b){return a+b})

ที่นี่arr.map(a=>a.x)จะให้อาร์เรย์ของตัวเลข [1,2,4] ตอนนี้ใช้.reduce(function(a,b){return a+b})จะง่ายจะเพิ่มตัวเลขเหล่านี้โดยไม่ต้องยุ่ง

อีกวิธีง่ายๆคือให้ผลรวมเริ่มต้นเป็นศูนย์โดยการกำหนด 0 ถึง 'a' ดังต่อไปนี้:

arr.reduce(function(a,b){return a + b.x},0)

ในแต่ละขั้นตอนของการลดของคุณคุณจะไม่ส่งคืน{x:???}วัตถุใหม่ ดังนั้นคุณต้องทำ:

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return a + b.x})

หรือคุณต้องทำ

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return {x: a.x + b.x}; }) 

ในขั้นตอนแรกมันจะทำงานได้ดีเนื่องจากมูลค่าของaจะเป็น 1 และที่bจะเป็น 2 แต่จะส่งคืน 2 + 1 และในขั้นตอนต่อไปมูลค่าของbจะเป็นค่าตอบแทนfrom step 1 i.e 3ดังนั้นb.xจะไม่ได้กำหนด .. .and undefined + anyNumber จะเป็น NaN และนั่นคือสาเหตุที่คุณได้รับผลลัพธ์นั้น

คุณสามารถลองทำสิ่งนี้โดยให้ค่าเริ่มต้นเป็นศูนย์เช่น

arr.reduce(function(a,b){return a + b.x},0);

หากคุณมีวัตถุที่ซับซ้อนที่มีข้อมูลจำนวนมากเช่นอาร์เรย์ของวัตถุคุณสามารถใช้วิธีการทีละขั้นตอนเพื่อแก้ปัญหานี้

สำหรับเช่น:

const myArray = [{ id: 1, value: 10}, { id: 2, value: 20}];

ก่อนอื่นคุณควรแมปอาร์เรย์ของคุณเข้ากับอาร์เรย์ใหม่ที่คุณสนใจซึ่งอาจเป็นอาร์เรย์ของค่าใหม่ในตัวอย่างนี้

const values = myArray.map(obj => obj.value);

ฟังก์ชั่นโทรกลับนี้จะส่งกลับอาร์เรย์ใหม่ที่มีค่าเฉพาะจากอาร์เรย์เดิมและเก็บไว้ในค่า const ตอนนี้ค่า const ของคุณเป็นอาร์เรย์ดังนี้:

values = [10, 20];

และตอนนี้คุณก็พร้อมที่จะลดค่าใช้จ่ายแล้ว:

const sum = values.reduce((accumulator, currentValue) => { return accumulator + currentValue; } , 0);

อย่างที่คุณเห็นวิธีการลดจะเรียกใช้ฟังก์ชันการเรียกกลับหลายครั้ง แต่ละครั้งจะใช้ค่าปัจจุบันของรายการในอาร์เรย์และผลรวมกับตัวสะสม ดังนั้นในการรวมอย่างถูกต้องคุณต้องตั้งค่าเริ่มต้นของการสะสมของคุณเป็นอาร์กิวเมนต์ที่สองของวิธีการลด

ตอนนี้คุณมีผลรวมคงที่ใหม่ของคุณด้วยค่า 30

ลดฟังก์ชั่นวนซ้ำผ่านคอลเลกชัน

arr = [{x:1},{x:2},{x:4}] // is a collection

arr.reduce(function(a,b){return a.x + b.x})

แปลเป็น:

arr.reduce(
    //for each index in the collection, this callback function is called
  function (
    a, //a = accumulator ,during each callback , value of accumulator is 
         passed inside the variable "a"
    b, //currentValue , for ex currentValue is {x:1} in 1st callback
    currentIndex,
    array
  ) {
    return a.x + b.x; 
  },
  accumulator // this is returned at the end of arr.reduce call 
    //accumulator = returned value i.e return a.x + b.x  in each callback. 
);

ในระหว่างการเรียกกลับดัชนีแต่ละครั้งค่าของตัวแปร "ตัวสะสม" จะถูกส่งผ่านไปยังพารามิเตอร์ "a" ในฟังก์ชันการเรียกกลับ หากเราไม่เริ่มต้น "สะสม" ค่าของมันจะไม่ได้กำหนด การโทร undefined.x จะทำให้คุณเกิดข้อผิดพลาด

เพื่อแก้ปัญหานี้เริ่มต้น "สะสม" ด้วยค่า0เป็นคำตอบของ Casey แสดงให้เห็นข้างต้น

เพื่อให้เข้าใจถึงฟังก์ชั่น "ลด" ในเชิงลึกฉันขอแนะนำให้คุณดูซอร์สโค้ดของฟังก์ชั่นนี้ ไลบรารี Lodash มีฟังก์ชันลดซึ่งทำงานเหมือนกับฟังก์ชัน "ลด" ใน ES6

นี่คือลิงค์: ลดรหัสต้นฉบับ

เพื่อส่งคืนผลรวมของxอุปกรณ์ประกอบฉากทั้งหมด:

arr.reduce(
(a,b) => (a.x || a) + b.x 
)

คุณสามารถใช้แผนที่และลดฟังก์ชั่น

const arr = [{x:1},{x:2},{x:4}];
const sum = arr.map(n => n.x).reduce((a, b) => a + b, 0);

ฟังก์ชันลดอาร์เรย์ใช้พารามิเตอร์สามตัวคือ initialValue (ค่าเริ่มต้นคือ 0), ตัวสะสมและค่าปัจจุบัน โดยค่าเริ่มต้นค่าของ initialValue จะเป็น "0" ซึ่งถ่ายโดยตัวสะสม

เรามาดูกันในโค้ด

var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal ) ; 
// (remember Initialvalue is 0 by default )

//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks .
// solution = 7

ตอนนี้ตัวอย่างเดียวกันกับค่าเริ่มต้น:

var initialValue = 10;
var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal,initialValue ) ; 
/
// (remember Initialvalue is 0 by default but now it's 10 )

//first iteration** : 10 +1 => Now accumulator =11;
//second iteration** : 11 +2 => Now accumulator =13;
//third iteration** : 13 + 4 => Now accumulator = 17;
No more array properties now the loop breaks .
//solution=17

เช่นเดียวกับอาร์เรย์วัตถุเช่นกัน (คำถาม stackoverflow ปัจจุบัน):

var arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(acc,currVal){return acc + currVal.x}) 
// destructing {x:1} = currVal;
Now currVal is object which have all the object properties .So now 
currVal.x=>1 
//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks 
//solution=7

สิ่งหนึ่งที่น่าสนใจใน MIND คือค่าเริ่มต้นโดยค่าเริ่มต้นคือ 0 และสามารถให้สิ่งที่ฉันหมายถึง {}, [] และหมายเลข

คุณไม่ควรใช้ขวานสำหรับเครื่องสะสม แต่คุณสามารถทำเช่นนี้ได้ `arr = [{x: 1}, {x: 2}, {x: 4}]

arr.reduce (ฟังก์ชั่น (a, b) {a + bx}, 0) `