ความแตกต่างระหว่าง. map, .every และ .forEach คืออะไร?

118

ฉันสงสัยเสมอว่าความแตกต่างระหว่างพวกเขาคืออะไร ดูเหมือนพวกเขาจะทำสิ่งเดียวกัน ...

javascript foreach map-function

6

มีคนเพิ่มแท็ก jQuery ... เมื่อพิจารณาeveryและforEachไม่ใช่วิธีการ jQuery ฉันคิดว่าคำถามไม่น่าเกี่ยวข้องกับ jQuery แต่อย่างใด developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6

— James Allardice

ฉันคิดว่าลิงค์นี้น่าจะมีคำตอบที่คุณกำลังมองหา

— zBomb

ฉันคิดถูกหรือเปล่าที่คุณกำลังอ้างถึงเมธอดอาร์เรย์เฉพาะของ Mozilla ตามรายละเอียดในลิงค์ในความคิดเห็นก่อนหน้าของฉัน

— James Allardice

@James - เหล่านี้จะไม่ Mozilla ที่เฉพาะเจาะจง ฉันจะแชร์ลิงค์ไปยัง webkit และเอกสารโอเปร่าด้วย แต่ฉันไม่รู้ว่ามันอยู่ตรงไหนของหัวฉัน

— gilly3

@ gilly3 - อ่าจุดดี ฉันเชื่อว่าพวกเขารองรับเฉพาะใน IE9 เท่านั้นไม่ใช่ด้านล่าง

— James Allardice

224

ความแตกต่างอยู่ในค่าที่ส่งคืน

.map() ส่งคืนอาร์เรย์ของออบเจ็กต์ใหม่ที่สร้างขึ้นโดยการดำเนินการบางอย่างกับรายการเดิม

.every() ส่งคืนบูลีน - จริงหากทุกองค์ประกอบในอาร์เรย์นี้เป็นไปตามฟังก์ชันการทดสอบที่ให้มา ความแตกต่างที่สำคัญ.every()คืออาจไม่ได้เรียกใช้ฟังก์ชันทดสอบสำหรับทุกองค์ประกอบในอาร์เรย์เสมอไป เมื่อฟังก์ชันการทดสอบส่งคืนค่าเท็จสำหรับองค์ประกอบใด ๆ แล้วจะไม่มีการทำซ้ำองค์ประกอบอาร์เรย์อีกต่อไป ดังนั้นฟังก์ชั่นการทดสอบมักจะไม่มีผลข้างเคียง

.forEach() ไม่ส่งคืนอะไรเลย - มันวนซ้ำ Array เพื่อดำเนินการตามที่กำหนดสำหรับแต่ละรายการใน Array

อ่านเกี่ยวกับเหล่านี้และอื่น ๆ อีกมากมายวิธีการอาร์เรย์ซ้ำที่ MDN

— gilly3
แหล่งที่มา

อีกทางหนึ่งอาจอ้างถึงMDN

— JoshWillik

3

@josh - ฉันอ้างถึง MDN ชื่อวิธีการแต่ละชื่อเชื่อมโยงกับเอกสารที่เกี่ยวข้องที่ MDN

— gilly3

@ gilly3 ฉันขอโทษฉันปัดสวะข้อความสีน้ำเงิน>.>

— JoshWillik

.forEach () ส่งคืนสิ่งที่ไม่ถูกต้องตอนนี้อาจจะไม่ใช่ในปี 2012 แต่อย่างน้อยในปี 2015 ใน Chrome ลองใช้ arr2 = ['sue', 'joe', 'ben', 'guy', 'tom', 'jon ']; b = arr2.forEach (ฟังก์ชัน (el, indx) {console.log (indx + ':' + el);}); console.log (ข);

— jason

1

@EugeneMercer By "original item" ฉันหมายถึงค่าดั้งเดิมของแต่ละองค์ประกอบของอาร์เรย์

— gilly3

88

คำตอบของ gilly3 ดีมาก ฉันแค่อยากจะเพิ่มข้อมูลเล็กน้อยเกี่ยวกับฟังก์ชัน "วนซ้ำองค์ประกอบ" ประเภทอื่น ๆ

.every() (หยุดการวนซ้ำในครั้งแรกที่ตัววนซ้ำส่งคืนเท็จหรือสิ่งที่เป็นเท็จ)
.some() (หยุดการวนซ้ำในครั้งแรกที่ตัววนซ้ำส่งคืนค่าจริงหรือสิ่งที่เป็นจริง)
.filter() (สร้างอาร์เรย์ใหม่รวมถึงองค์ประกอบที่ฟังก์ชันตัวกรองส่งคืนค่าจริงและละเว้นรายการที่ส่งคืนค่าเท็จ)
.map() (สร้างอาร์เรย์ใหม่จากค่าที่ส่งคืนโดยฟังก์ชันตัววนซ้ำ)
.reduce() (สร้างค่าโดยการเรียกตัววนซ้ำซ้ำ ๆ โดยส่งผ่านค่าก่อนหน้าดูรายละเอียดข้อมูลจำเพาะมีประโยชน์สำหรับการสรุปเนื้อหาของอาร์เรย์และสิ่งอื่น ๆ อีกมากมาย)
.reduceRight() (เช่นลด แต่ทำงานจากมากไปหาน้อยมากกว่า)

ให้เครดิตกับ: TJCrowder สำหรับแต่ละอาร์เรย์ใน JavaScript?

— raphaelgontijolopes
แหล่งที่มา

รับ 100 ไลค์จากฉัน!

— Shamim

6

การพิจารณาคำตอบที่ดีข้างต้นอีกประการหนึ่งคือการผูกมัด ด้วย forEach () คุณไม่สามารถเชื่อมโยง แต่ด้วยแผนที่ () คุณสามารถทำได้

ตัวอย่างเช่น:

var arrayNumbers = [3,1,2,4,5];

arrayNumbers.map(function(i) {
    return i * 2
}).sort();

ด้วย. forEach () คุณไม่สามารถทำ .ort () ได้คุณจะได้รับข้อผิดพลาด

— นาดีนโรส
แหล่งที่มา

0

สำหรับRamdaความแตกต่างระหว่างR.map()และR.forEach()คือ:

R.forEach()ส่งคืนอาร์เรย์เดิมในขณะที่R.map()ส่งคืน functor
R.forEach()สามารถทำงานบนอาร์เรย์เท่านั้น แต่R.map()ยังสามารถทำงานบนวัตถุได้ (เช่นคู่คีย์ / ค่าของวัตถุจะถือว่าเหมือนกับอาร์เรย์)

— Michael Osofsky
แหล่งที่มา

คำถามคือภาษา Javascript เกี่ยวข้อง Ramda ในขณะที่ Great เป็นหัวข้อและห้องสมุดที่แตกต่างกันโดยสิ้นเชิง

— SeaWarrior404