• I. การวนซ้ำอาร์เรย์จริง
• สำหรับแต่ละวิธีและวิธีการที่เกี่ยวข้อง
• สำหรับวง
• การใช้ for...in loop อย่างเหมาะสม
• for...of loop (การใช้ตัววนซ้ำโดยนัย)
• การใช้ตัววนซ้ำอย่างชัดเจน
• ครั้งที่สอง วนซ้ำวัตถุที่มีลักษณะคล้ายอาเรย์
• การใช้เมธอดเพื่อวนซ้ำอาร์เรย์จริง
• แปลงเป็นอาร์เรย์จริง
• หมายเหตุเกี่ยวกับออบเจ็กต์รันไทม์

I. การวนซ้ำอาร์เรย์จริง

ในขณะนี้ มีสามวิธีในการวนซ้ำองค์ประกอบของอาร์เรย์จริง:

วิธีการ Array.prototype.forEach ;

คลาสสิกสำหรับวง

สร้าง "อย่างถูกต้อง" สำหรับ...ในลูป

นอกจากนี้ เร็วๆ นี้ ด้วยการถือกำเนิดของมาตรฐาน ECMAScript 6 (ES 6) ใหม่ คาดว่าจะมีอีกสองวิธี:

for...of loop (การใช้ตัววนซ้ำโดยนัย);

การใช้ตัววนซ้ำอย่างชัดเจน

1. วิธี forEach และวิธีการที่เกี่ยวข้อง

หากโครงการของคุณได้รับการออกแบบมาเพื่อรองรับคุณสมบัติของมาตรฐาน ECMAScript 5 (ES5) คุณสามารถใช้นวัตกรรมอย่างใดอย่างหนึ่ง - วิธี forEach

ตัวอย่างการใช้งาน:

วาร์ = ["a", "b", "c"]; a.forEach(ฟังก์ชั่น(รายการ) ( console.log(รายการ); ));

โดยทั่วไป การใช้ forEach จำเป็นต้องเชื่อมต่อไลบรารีการจำลอง es5-shim สำหรับเบราว์เซอร์ที่ไม่รองรับวิธีนี้โดยกำเนิด ซึ่งรวมถึง IE 8 และเก่ากว่า ซึ่งยังคงมีการใช้งานอยู่ในบางแห่ง

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

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

forEach ได้รับการออกแบบมาเพื่อวนซ้ำองค์ประกอบทั้งหมดของอาร์เรย์ แต่นอกเหนือจากนั้น ES5 ยังมีวิธีที่มีประโยชน์อีกมากมายสำหรับการวนซ้ำองค์ประกอบทั้งหมดหรือบางส่วน พร้อมทั้งดำเนินการบางอย่างกับองค์ประกอบเหล่านั้น:

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

2. สำหรับวง

เก่าดีสำหรับกฎเกณฑ์:

วาร์ = ["a", "b", "c"]; ดัชนี var; สำหรับ (ดัชนี = 0; ดัชนี< a.length; ++index) { console.log(a); }

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

วาร์ ก = ["a", "b", "c"]; ดัชนี var, len; สำหรับ (ดัชนี = 0, len = a.length; ดัชนี< len; ++index) { console.log(a); }

ตามทฤษฎีแล้ว โค้ดนี้ควรจะทำงานเร็วกว่าโค้ดก่อนหน้าเล็กน้อย

หากลำดับขององค์ประกอบไม่สำคัญคุณสามารถไปไกลกว่านี้ในแง่ของการปรับให้เหมาะสมและกำจัดตัวแปรสำหรับจัดเก็บความยาวของอาเรย์โดยเปลี่ยนลำดับการค้นหาเป็นแบบย้อนกลับ:

วาร์ = ["a", "b", "c"]; ดัชนี var; สำหรับ (ดัชนี = a.length - 1; ดัชนี >= 0; --index) ( console.log(a); )

อย่างไรก็ตาม ในเอ็นจิ้น JavaScript สมัยใหม่ เกมการปรับให้เหมาะสมนั้นมักจะไม่มีความหมายอะไรเลย

3. การใช้ for...in loop อย่างถูกต้อง

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

อย่างไรก็ตาม ในบางกรณี เช่น การวนซ้ำอาร์เรย์แบบกระจาย for...in อาจมีประโยชน์ได้ ตราบใดที่คุณใช้ความระมัดระวัง ดังที่แสดงในตัวอย่างด้านล่าง:

// a - อาร์เรย์กระจัดกระจาย var a = ; เป็น = "เป็น"; ก = "ข"; มี = "ค"; สำหรับ (คีย์ var ใน a) ( if (a.hasOwnProperty(key) && /^0$|^d*$/.test(key) && key

• HTML
• จาวาสคริปต์

$("ul#myList").children().each(function())( console.log($(this).text()); )); // ผลลัพธ์: // HTML // CSS // JavaScript

เรามาดูวิธีการกำหนดดัชนีสุดท้าย (item) ในแต่ละวิธีของ jQuery

// เลือกองค์ประกอบ var myList = $("ul li"); // กำหนดจำนวนองค์ประกอบในการเลือก var Total = myList.length; // วนซ้ำองค์ประกอบที่เลือก myList.each(function(index) ( if (index === Total - 1) ( // นี่คือองค์ประกอบสุดท้ายในส่วนที่เลือก ) ));

มีข้อความที่มีความยาวตามต้องการซึ่งจะต้องแสดงภายในบล็อกที่มีความสูงและความกว้างคงที่ ในกรณีนี้ หากข้อความไม่พอดี ควรแสดงส่วนของข้อความที่พอดีกับบล็อกที่กำหนด หลังจากนั้นจึงตั้งค่าจุดไข่ปลา

งานนี้ค่อนข้างธรรมดา แต่ในขณะเดียวกันก็ไม่ใช่เรื่องเล็กน้อยอย่างที่คิด

ตัวเลือกสำหรับข้อความบรรทัดเดียวใน CSS

ในกรณีนี้ คุณสามารถใช้คุณสมบัติ text-overflow: จุดไข่ปลา ในกรณีนี้คอนเทนเนอร์จะต้องมีคุณสมบัติ ล้นเท่ากัน ที่ซ่อนอยู่หรือ คลิป

บล็อก ( กว้าง : 250px ; white-space : nowrap ; overflow : ซ่อน ; text-overflow : จุดไข่ปลา ; )

ตัวเลือกสำหรับข้อความหลายบรรทัดใน CSS

วิธีแรกในการตัดข้อความหลายบรรทัดโดยใช้คุณสมบัติ CSS คือการใช้องค์ประกอบหลอก :ก่อนและ :หลังจาก- เริ่มต้นด้วยมาร์กอัป HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. มีค่าใช้จ่ายน้อยกว่า veniam, ต้องใช้ความพยายามอย่างมากในการ ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor ใน Hendrerit ใน vulputate velit esse molestie ผลที่ตามมา, vel illum dolore eu feugiat nulla facilisis ที่ Vero Eros และ accumsan et iusto odio dignisisim qui blandit luptatum

และตอนนี้คุณสมบัตินั้นเอง

กล่อง ( ล้น : ซ่อน ; ความสูง : 200px ; ความกว้าง : 300px ; line-height : 25px ; ) .box :before ( เนื้อหา : "" ; ลอย : ซ้าย ; ความกว้าง : 5px ; ความสูง : 200px ; ) .box > * :first -child ( float : right ; width : 100% ; margin-left : -5px ; ) .box :after ( content : "\02026" ; box-sizing : content-box ; float : right ; ตำแหน่ง : สัมพันธ์ ; top : -25px ; width : 3em ; padding-right : 5px ; ขนาดพื้นหลัง : 100% 100% ; (255, 255, 255, 0), สีขาว 50%

อีกวิธีหนึ่งคือการใช้คุณสมบัติความกว้างของคอลัมน์ ซึ่งเราตั้งค่าความกว้างของคอลัมน์สำหรับข้อความหลายบรรทัด อย่างไรก็ตาม เมื่อใช้วิธีการนี้ จะไม่สามารถตั้งจุดไข่ปลาที่ส่วนท้ายได้ HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. มีค่าใช้จ่ายน้อยกว่า veniam, ต้องใช้ความพยายามอย่างมากในการ ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor ใน Hendrerit ใน vulputate velit esse molestie ผลที่ตามมา, vel illum dolore eu feugiat nulla facilisis ที่ Vero Eros และ accumsan et iusto odio dignisisim qui blandit luptatum

บล็อก ( ล้น : ซ่อน ; ความสูง : 200px ; ความกว้าง : 300px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; ความกว้างของคอลัมน์ : 150px ; ความสูง : 100% ; )

วิธีที่สามในการแก้ไขข้อความหลายบรรทัดโดยใช้ CSS สำหรับเบราว์เซอร์ Webkit ในนั้นเราจะต้องใช้คุณสมบัติเฉพาะหลายประการกับคำนำหน้า -เว็บคิท- หลักคือ -webkit-line-clamp ซึ่งช่วยให้คุณระบุจำนวนบรรทัดที่จะส่งออกในบล็อก โซลูชันนี้สวยงามแต่ค่อนข้างจำกัดเนื่องจากทำงานในกลุ่มเบราว์เซอร์ที่จำกัด

บล็อก ( ล้น : ซ่อน ; ข้อความล้น : จุดไข่ปลา ; แสดง : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : แนวตั้ง ; )

ตัวเลือกสำหรับข้อความหลายบรรทัดใน JavaScript

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

var บล็อก = เอกสาร querySelector(".block"), text = block innerHTML, โคลน = เอกสาร createElement("div");

โคลน สไตล์. ตำแหน่ง = "สัมบูรณ์" ;

(ฟังก์ชั่น ($ ) ( var truncate = function (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( ตำแหน่ง : "สัมบูรณ์" , การมองเห็น : "hidden" , height : "auto" )); ( clone . text ( text . substring ( 0 , l ) + "..." ); el . text ( clone .remove ( ) ); ( return this . แต่ละ (ฟังก์ชั่น () ( ตัดทอน ($ ( นี้ )); )); )( jQuery ));