javascript forEach ใช้อะไรได้บ้าง (แผนที่นั้นไม่สามารถทำได้)

ข้อแตกต่างเดียวที่ฉันเห็นในแผนที่และ foreach mapคือส่งคืนอาร์เรย์และforEachไม่ใช่ อย่างไรก็ตามฉันไม่เข้าใจบรรทัดสุดท้ายของforEachวิธีการ " func.call(scope, this[i], i, this);" ด้วยซ้ำ ยกตัวอย่างเช่นไม่ได้ " this" และ " scope" หมายถึงวัตถุเดียวกันและไม่ได้เป็นthis[i]และiหมายถึงค่าปัจจุบันในวง?

ฉันสังเกตเห็นในโพสต์อื่นมีคนพูดว่า "ใช้forEachเมื่อคุณต้องการทำบางสิ่งบนพื้นฐานของแต่ละองค์ประกอบของรายการคุณอาจจะเพิ่มสิ่งต่างๆลงในเพจเป็นต้นโดยพื้นฐานแล้วมันยอดเยี่ยมสำหรับเมื่อคุณต้องการ" ผลข้างเคียง " ฉันไม่รู้ความหมายของผลข้างเคียง

Array.prototype.map = function(fnc) {
    var a = new Array(this.length);
    for (var i = 0; i < this.length; i++) {
        a[i] = fnc(this[i]);
    }
    return a;
}

Array.prototype.forEach = function(func, scope) { 
    scope = scope || this; 
    for (var i = 0, l = this.length; i < l; i++) {
        func.call(scope, this[i], i, this); 
    } 
}

สุดท้ายมีการใช้วิธีการเหล่านี้ในจาวาสคริปต์จริงหรือไม่ (เนื่องจากเราไม่ได้อัปเดตฐานข้อมูล) นอกเหนือจากการจัดการตัวเลขเช่นนี้:

alert([1,2,3,4].map(function(x){ return x + 1})); //this is the only example I ever see of map in javascript.

ขอบคุณสำหรับการตอบกลับ

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

ขณะที่forEachคุณกำลังดำเนินการบางอย่างกับ - และเปลี่ยนตัวเลือก - แต่ละองค์ประกอบในอาร์เรย์เดิม forEachวิธีการทำงานฟังก์ชั่นที่คุณให้สำหรับแต่ละองค์ประกอบ แต่ผลตอบแทนอะไร ( undefined) บนมืออื่น ๆ ที่mapเดินผ่านอาร์เรย์ใช้ฟังก์ชั่นแต่ละองค์ประกอบและส่งเสียงผลเป็นแถวใหม่

"ผลข้างเคียง" ด้วยforEachคืออาร์เรย์เดิมกำลังถูกเปลี่ยน "ไม่มีผลข้างเคียง" ซึ่งmapหมายความว่าในการใช้สำนวนองค์ประกอบอาร์เรย์ดั้งเดิมจะไม่เปลี่ยนแปลง อาร์เรย์ใหม่คือการแมปแบบหนึ่งต่อหนึ่งของแต่ละองค์ประกอบในอาร์เรย์เดิม - การแปลงการแม็ปเป็นฟังก์ชันที่คุณให้มา

ความจริงที่ว่าไม่มีฐานข้อมูลที่เกี่ยวข้องไม่ได้หมายความว่าคุณจะไม่ต้องดำเนินการกับโครงสร้างข้อมูลซึ่งเป็นหนึ่งในสาระสำคัญของการเขียนโปรแกรมในภาษาใด ๆ สำหรับคำถามสุดท้ายของคุณอาร์เรย์ของคุณไม่ได้มีเพียงตัวเลขเท่านั้น แต่ยังมีวัตถุสตริงฟังก์ชัน ฯลฯ

แตกต่างที่สำคัญระหว่างสองวิธีคือแนวคิดและโวหาร: คุณใช้forEachเมื่อคุณต้องการที่จะทำบางสิ่งบางอย่างที่จะหรือมีองค์ประกอบของอาร์เรย์แต่ละ (ทำ "กับ" คือสิ่งที่โพสต์ที่อ้างความหมายโดย "ผลข้างเคียง" ผมคิดว่า) ในขณะที่คุณใช้mapเมื่อคุณต้องการคัดลอกและแปลงแต่ละองค์ประกอบของอาร์เรย์ (โดยไม่ต้องเปลี่ยนต้นฉบับ)

เนื่องจากทั้งสองmapและforEachเรียกใช้ฟังก์ชันในแต่ละรายการในอาร์เรย์และฟังก์ชันนั้นได้รับการกำหนดโดยผู้ใช้จึงแทบไม่มีอะไรที่คุณสามารถทำได้กับอีกรายการหนึ่งเลย เป็นไปได้แม้ว่าจะน่าเกลียดที่จะใช้mapเพื่อแก้ไขอาร์เรย์ในสถานที่และ / หรือทำบางอย่างกับองค์ประกอบอาร์เรย์:

var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
a.map(function(el) {
    el.val++; // modify element in-place
    alert(el.val); // do something with each element
});
// a now contains [{ val: 2 }, { val: 3 }, { val: 4 }]

แต่สะอาดกว่าและชัดเจนกว่ามากตามความตั้งใจที่จะใช้forEach:

var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
a.forEach(function(el) { 
    el.val++;
    alert(el.val);
});

โดยเฉพาะอย่างยิ่งถ้าโดยปกติในโลกแห่งความเป็นจริงelเป็นตัวแปรที่มนุษย์อ่านได้ที่มีประโยชน์:

cats.forEach(function(cat) { 
    cat.meow(); // nicer than cats[x].meow()
});

ในทำนองเดียวกันคุณสามารถใช้forEachเพื่อสร้างอาร์เรย์ใหม่ได้อย่างง่ายดาย:

var a = [1,2,3],
    b = [];
a.forEach(function(el) { 
    b.push(el+1); 
});
// b is now [2,3,4], a is unchanged

แต่ใช้งานได้สะอาดกว่าmap:

var a = [1,2,3],
    b = a.map(function(el) { 
        return el+1; 
    });

หมายเหตุเช่นกันว่าเพราะmapทำให้อาร์เรย์ใหม่ก็จะถูกเรียกเก็บอย่างน้อยบางส่วนตีประสิทธิภาพ / หน่วยความจำเมื่อสิ่งที่คุณต้องทำซ้ำโดยเฉพาะอย่างยิ่งสำหรับอาร์เรย์ขนาดใหญ่ - ดูhttp://jsperf.com/map-foreach

สำหรับเหตุผลที่คุณต้องการใช้ฟังก์ชั่นเหล่านี้มันมีประโยชน์ทุกครั้งที่คุณต้องจัดการอาร์เรย์ในจาวาสคริปต์ซึ่ง (แม้ว่าเราจะพูดถึงจาวาสคริปต์ในสภาพแวดล้อมเบราว์เซอร์) ก็ค่อนข้างบ่อยเกือบทุกครั้ง คุณกำลังเข้าถึงอาร์เรย์ที่คุณไม่ได้จดรหัสด้วยมือ คุณอาจกำลังจัดการกับอาร์เรย์ขององค์ประกอบ DOM บนเพจหรือข้อมูลที่ดึงมาจากคำขอ AJAX หรือข้อมูลที่ผู้ใช้ป้อนในฟอร์ม ตัวอย่างทั่วไปอย่างหนึ่งที่ฉันพบคือการดึงข้อมูลจาก API ภายนอกซึ่งคุณอาจต้องการใช้mapเพื่อแปลงข้อมูลให้อยู่ในรูปแบบที่คุณต้องการจากนั้นใช้forEachเพื่อทำซ้ำบนอาร์เรย์ใหม่ของคุณเพื่อแสดงต่อผู้ใช้ของคุณ

คำตอบที่ได้รับการโหวต (จาก Ken Redler) ทำให้เข้าใจผิด

ผลข้างเคียงในวิธีวิทยาการคอมพิวเตอร์ว่าทรัพย์สินของฟังก์ชั่น / วิธี alters รัฐทั่วโลก[wiki] ในแง่แคบบางประการอาจรวมถึงการอ่านจากรัฐทั่วโลกมากกว่าจากการโต้แย้ง ในการเขียนโปรแกรมที่จำเป็นหรือ OO ผลข้างเคียงจะปรากฏขึ้นเกือบตลอดเวลา และคุณอาจใช้ประโยชน์จากมันโดยไม่รู้ตัว

ความแตกต่างที่สำคัญระหว่างforEachและmapคือการmapจัดสรรหน่วยความจำและเก็บค่าที่ส่งคืนในขณะที่forEachโยนมันออกไป ดูข้อมูลจำเพาะของ emcaสำหรับข้อมูลเพิ่มเติม

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

อย่างไรก็ตามควรสังเกตว่า JavaScript ไม่มีข้อ จำกัด เกี่ยวกับผลข้างเคียง mapคุณยังสามารถปรับเปลี่ยนภายในอาร์เรย์เดิม

var a = [1,2,3]; //original
var b = a.map( function(x,i){a[i] = 2*x; return x+1} );
console.log("modified=%j\nnew array=%j",a,b);
// output:
// modified=[2,4,6]
// new array=[2,3,4]

นี่เป็นคำถามที่สวยงามพร้อมคำตอบที่คาดไม่ถึง

ต่อไปนี้จะขึ้นอยู่กับรายละเอียดอย่างเป็นทางการของArray.prototype.map()

มีอะไรที่forEach()สามารถทำเช่นนั้นmap()ไม่สามารถ นั่นคือmap()เป็นที่เข้มงวดซุปเปอร์ชุดforEach()ของ

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

var a = [0, 1, 2, 3, 4], mapped = null;
mapped = a.map(function (x) { a[x] = x*x*x; return x*x; });
console.log(mapped); // logs [0, 1, 4, 9, 16]  As expected, these are squares.
console.log(a); // logs [0, 1, 8, 27, 64] These are cubes of the original array!!

ในตัวอย่างข้างต้นaถูกตั้งค่าอย่างสะดวกa[i] === iสำหรับi < a.length. ถึงกระนั้นมันก็แสดงให้เห็นถึงพลังของmap()และโดยเฉพาะอย่างยิ่งความสามารถในการเปลี่ยนอาร์เรย์ที่ถูกเรียกใช้

หมายเหตุ 1:
คำอธิบายอย่างเป็นทางการบอกเป็นนัยว่าmap()อาจเปลี่ยนความยาวของอาร์เรย์ที่เรียกได้! อย่างไรก็ตามฉันไม่เห็นเหตุผล (ที่ดี) ในการทำเช่นนี้

หมายเหตุ 2:
แม้ว่าmap()แผนที่จะเป็นชุดพิเศษforEach()แต่forEach()ก็ควรใช้ในกรณีที่ต้องการให้มีการเปลี่ยนแปลงอาร์เรย์ที่กำหนด สิ่งนี้ทำให้ความตั้งใจของคุณชัดเจน

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

คุณสามารถใช้งานได้mapเหมือนforEachเดิม

มันจะทำมากกว่าที่จะเป็นอย่างไรก็ตาม

scopeสามารถเป็นวัตถุโดยพลการ มันไม่จำเป็นthisเสมอไป

สำหรับว่ามีการใช้งานจริงสำหรับmapและforEachเพื่อถามว่ามีการใช้งานจริงforหรือwhileลูปหรือไม่

แม้ว่าคำถามก่อนหน้านี้ทั้งหมดจะถูกต้อง แต่ฉันก็จะสร้างความแตกต่างอย่างแน่นอน การใช้mapและforEachสามารถบ่งบอกถึงเจตนา

ฉันชอบใช้mapเมื่อฉันเพียงแค่เปลี่ยนข้อมูลที่มีอยู่ไม่ทางใดก็ทางหนึ่ง (แต่ต้องการให้แน่ใจว่าข้อมูลเดิมไม่มีการเปลี่ยนแปลง

ฉันชอบใช้forEachเมื่อฉันปรับเปลี่ยนคอลเล็กชันให้เข้าที่

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

var b = [{ val: 1 }, { val: 2 }, { val: 3 }];
var c = b.map(function(el) {
    return { val: el.val + 1 }; // modify element in-place
});
console.log(b);
//  [{ val: 1 }, { val: 2 }, { val: 3 }]
console.log(c);
//  [{ val: 3 }, { val: 4 }, { val: 5 }]

กฎทั่วไปของฉันคือการตรวจสอบให้แน่ใจว่าmapคุณสร้างวัตถุ / ค่าใหม่เสมอเพื่อส่งคืนสำหรับแต่ละองค์ประกอบของรายการแหล่งที่มาและส่งคืนแทนที่จะดำเนินการบางอย่างกับแต่ละองค์ประกอบ

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

TL; DR คำตอบ -

แผนที่จะส่งคืนอาร์เรย์อื่นเสมอ

forEach ไม่ ขึ้นอยู่กับคุณที่จะตัดสินใจว่าจะทำอย่างไร ส่งคืนอาร์เรย์ถ้าคุณต้องการหรือทำอย่างอื่นถ้าคุณไม่ทำ

ความยืดหยุ่นเป็นที่พึงปรารถนาคือบางสถานการณ์ หากไม่ใช่สิ่งที่คุณกำลังจัดการอยู่ให้ใช้แผนที่

เป็นอีกครั้งที่ฉันรู้สึกเหมือนเป็นหมอผีที่เพิ่มคำตอบให้กับคำถามที่ถูกถามเมื่อ 5 ปีก่อน (มีความสุขมากที่มีกิจกรรมล่าสุดดังนั้นฉันจึงไม่ใช่คนเดียวที่รบกวนคนตาย :)

คนอื่น ๆ ได้โพสต์เกี่ยวกับคำถามหลักของคุณแล้วเกี่ยวกับความแตกต่างระหว่างฟังก์ชัน แต่สำหรับ...

มีการใช้งานจริงสำหรับวิธีการเหล่านี้ในจาวาสคริปต์ (เนื่องจากเราไม่ได้อัปเดตฐานข้อมูล) นอกเหนือจากการจัดการตัวเลขเช่นนี้:

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

const DATE_REGEXP = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})\.(\d{3})Z$/;
const TEST_STRING = '2016-01-04T03:20:00.000Z';

var [
    iYear,
    iMonth,
    iDay,
    iHour,
    iMinute,
    iSecond,
    iMillisecond
    ] = DATE_REGEXP
        // We take our regular expression and...
        .exec(TEST_STRING)
        // ...execute it against our string (resulting in an array of matches)...
        .slice(1)
        // ...drop the 0th element from those (which is the "full string match")...
        .map(value => parseInt(value, 10));
        // ...and map the rest of the values to integers...

// ...which we now have as individual variables at our perusal
console.debug('RESULT =>', iYear, iMonth, iDay, iHour, iMinute, iSecond, iMillisecond);

ดังนั้น ... ในขณะที่นี่เป็นเพียงตัวอย่าง - และทำการแปลงข้อมูลขั้นพื้นฐานเท่านั้น (เพื่อประโยชน์ในตัวอย่าง) ... การทำสิ่งนี้โดยไม่มีแผนที่จะเป็นงานที่น่าเบื่อกว่ามาก

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