เพื่อนที่ใช้ขีดเส้นใต้รู้ว่ามันมี API ที่สมบูรณ์มากในการเรียกการสำรวจของอาร์เรย์ (ชุด) และ _.each () เป็นหนึ่งในนั้น นี่คือตัวอย่างง่ายๆ:
var arr = [1, 2, 3, 4, 5]; _. แต่ละ (arr, ฟังก์ชัน (el) {console.log (el);});รหัสข้างต้นจะส่งออก 1, 2, 3, 4, 5 ในทางกลับกัน มันไม่น่าสนใจมากเหรอ? คุณไม่จำเป็นต้องเขียนบทด้วยตัวเองด้วยซ้ำ วิธี _.each () มีประโยชน์มากในการสำรวจอาร์เรย์ แต่การใช้งานภายในนั้นไม่ยากเลย มาดูกันว่า _.each () ถูกนำไปใช้อย่างไร ก่อนหน้านี้มาดู API ของ _.each () _.each () โดยทั่วไปเรียกว่าดังนี้:
_.each (arr, fn, บริบท);
ได้รับ 3 พารามิเตอร์
อันแรกคืออาร์เรย์ที่ต้องผ่านการสำรวจ (ที่จริงแล้วมันเป็นไปได้ที่จะเป็นวัตถุดังนั้นเรามาพูดคุยกันในภายหลัง);
อย่างที่สองคือฟังก์ชั่นการโทรกลับ (ฟังก์ชั่นการโทรกลับนี้สามารถผ่านในพารามิเตอร์ 3 ตัวเช่น: ฟังก์ชัน (el, i, arr) ซึ่งเป็นองค์ประกอบปัจจุบันดัชนีปัจจุบันและอาร์เรย์ดั้งเดิมตามลำดับ);
ประการที่สามคือบริบทที่ฟังก์ชั่นการโทรกลับจะต้องถูกผูกไว้นั่นคือการระบุค่านี้ของฟังก์ชั่นการโทรกลับ FN
ตกลงความต้องการนั้นชัดเจนมากเริ่มทำงานกันเถอะ!
ก่อนอื่นให้ใช้ _.each () ที่ง่ายที่สุดซึ่งไม่สามารถแก้ไขบริบทนี้ได้และรับพารามิเตอร์สองตัว รหัสมีดังนี้:
var _ = {}; // สมมติว่านั่นคือขีดล่าง // การใช้งานที่ง่ายที่สุดของ _.each method_.each = function (arr, fn) {สำหรับ (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr; // ส่งคืนอาร์เรย์ดั้งเดิม}แล้วล่ะ? มันไม่ง่ายมากเหรอ? เพียงใช้ A for Loop และเรียกใช้ฟังก์ชันการโทรกลับ สามารถทำได้ในรหัสเพียงไม่กี่บรรทัด ฉันเชื่อว่าไม่มีเพื่อนที่จะเข้าใจได้! ลองทดสอบกันเพื่อดูว่าใช้งานได้ตามปกติหรือไม่:
var arr = [1, 2, 3, 4, 5]; _. แต่ละ (arr, ฟังก์ชัน (el, i, arr) {console.log (el);});เปิดในเบราว์เซอร์และคอนโซลจะเห็นผลลัพธ์ที่ถูกต้อง
รหัสง่าย ๆ ดังกล่าวไม่มีความหมายเลย ลองมาดูตัวอย่างที่ท้าทายมากขึ้น ตัวอย่างเช่น Array arr มีคุณสมบัติผลรวม เราจำเป็นต้องสรุปองค์ประกอบทั้งหมดของอาร์เรย์และเก็บไว้ในผลรวมดังนี้:
var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // แอตทริบิวต์ผลรวมใช้เพื่อจัดเก็บผลรวมขององค์ประกอบอาร์เรย์ _.each (arr, ฟังก์ชัน (el, i, arr) {this.sum += el;});ในเวลานี้สิ่งนี้ใช้ในฟังก์ชั่นการโทรกลับ หากไม่ผูกพันนี่คือหน้าต่างตามค่าเริ่มต้น นี่ไม่ใช่สิ่งที่เราต้องการ เราหวังว่ามันจะผูกพันกับอาร์เรย์ arr การโทรหรือสมัครสามารถใช้ฟังก์ชั่นนี้ได้รหัสมีดังนี้:
var _ = {}; // สมมติว่านี่คือขีดล่าง // bind รับสองพารามิเตอร์ fn และบริบท // bind fn กับบริบท var bind = function (fn, บริบท) {context = context || โมฆะ; ฟังก์ชั่น return (el, i, arr) {fn.call (บริบท, el, i, arr); }} // _.each_.each = ฟังก์ชั่น (arr, fn, บริบท) {// เรียกวิธีการผูกและผูก fn ไปยังบริบท fn = bind (fn, บริบท); สำหรับ (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr;} // กรณีทดสอบ: var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // แอตทริบิวต์ผลรวมใช้เพื่อจัดเก็บผลรวมขององค์ประกอบอาร์เรย์ _.each (arr, ฟังก์ชัน (el, i, arr) {this.sum += el;}, arr); console.log (arr.sum); // 15ตกลง _.each () นี้มีประสิทธิภาพพอที่จะทำซ้ำผ่านอาร์เรย์ตามปกติและคุณยังสามารถระบุค่านี้ได้ที่จะเปลี่ยนบริบทของฟังก์ชั่นการโทรกลับ อย่างไรก็ตามดังที่เราได้กล่าวไปแล้วก่อนหน้านี้ _.each () ของขีดเส้นใต้ขีด จำกัด สามารถสำรวจวัตถุและการใช้งานนี้ไม่ยาก เพียงตัดสินว่าพารามิเตอร์แรกที่ส่งผ่านเป็นวัตถุหรืออาร์เรย์ ถ้าเป็นอาร์เรย์ให้วนซ้ำเหมือนเรา มิฉะนั้นถ้ามันเป็นวัตถุให้ใช้วัตถุสำหรับ ... ในการสำรวจแบบวนรอบ หากคุณสนใจคุณสามารถลองด้วยตัวเองหรือตรวจสอบซอร์สโค้ดของขีดล่าง
หมายเหตุ: เนื่องจากมาตรฐาน ES5 อาร์เรย์ดั้งเดิมได้มีวิธีการสำรวจไปยัง array.prototype.foreach, array.prototype.map ฯลฯ และสามารถใช้ภาษาพื้นเมืองในโครงการได้
ข้างต้นเป็นคำอธิบายเต็มรูปแบบของการวิเคราะห์เชิงลึกของวิธีการสำรวจอาร์เรย์ JS (แนะนำ) แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!