จาวาสคริปต์อาร์เรย์ใช้คิวและสแต็คในโครงสร้างข้อมูล

1. การแนะนำสั้น ๆ เกี่ยวกับคิวและสแต็ค

1.1. แนวคิดพื้นฐานของคิว

คิว: มันเป็นคอลเลกชันที่รองรับครั้งแรกในครั้งแรก (FIFO) นั่นคือข้อมูลที่แทรกก่อนจะถูกดึงมาก่อน!

ดังที่แสดงในรูปด้านล่าง:

1.2. แนวคิดพื้นฐานของสแต็ก

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

ดังที่แสดงในรูปด้านล่าง:

2. ใช้คิวและสแต็คใน JavaScript

ใน JavaScript คิวและอาร์เรย์ส่วนใหญ่จะถูกนำไปใช้ผ่านอาร์เรย์ วิธีการต่อไปนี้มีให้ในอาร์เรย์ JS เพื่อให้เราใช้คิวและสแต็คได้ง่าย:

• Shift: ลบองค์ประกอบแรกออกจากอาร์เรย์และส่งคืนค่าขององค์ประกอบนี้

• Unshift: เพิ่มองค์ประกอบอย่างน้อยหนึ่งอย่างที่จุดเริ่มต้นของอาร์เรย์และส่งคืนความยาวใหม่

•กด: เพิ่มองค์ประกอบที่ส่วนท้ายของกลางและส่งคืนความยาวใหม่

•ป๊อป: ลบองค์ประกอบสุดท้ายจากอาร์เรย์และส่งคืนค่าขององค์ประกอบนี้

2.1. ใช้คิว

 <script type = "text/javascript"> // สร้างอาร์เรย์เพื่อจำลองคิว var a = new Array (); console.log (a); // Unshift: เพิ่มองค์ประกอบหนึ่งหรือมากกว่าที่จุดเริ่มต้นของอาร์เรย์และส่งคืนความยาวใหม่ console.log ("Enter"); a.unshift () console.log (a); // ------> a.unshift (); console.log (a); // ----->, a.unshift (); console.log (a); //- ---->, A.Unshift (); console.log (a); // ------>, a.unshift (); console.log (a); // ---->, a.unshift (); console.log (a); // ----> ,,,, .log ("ออกก่อนเข้ามาก่อน"); console.log (a); // pop: ลบองค์ประกอบสุดท้ายออกจากอาร์เรย์และส่งคืนค่าขององค์ประกอบนี้ A.pop (); // ------> console.log (a); a.pop (); // -----> console.log (a); a.pop (); // -----> console.log (a); a.pop (); // ------> console.log (a);

เอฟเฟกต์ผลลัพธ์ของคอนโซลเบราว์เซอร์ Google จะแสดงในรูปด้านล่าง:

2.2. การใช้สแต็ก

 <script type = "text/javascript"> // สร้างอาร์เรย์เพื่อจำลองสแต็ก var a = new Array (); console.log (a); // push: เพิ่มองค์ประกอบหนึ่งหรือมากกว่าในตอนท้ายของอาร์เรย์และส่งคืนความยาวใหม่ console.log ("stack"); a.push () console.log (a); // ------> a.push (); console.log (a); // ----->, a.push (); console.log (a); // ------- ->, a.push (); console.log (a); // ------>, a.push (); console.log (a); // ----> ,, a.push (); console.log (a); // ----> ,,, console.log ("" ออกสแต็กก่อนออก "); console.log (a); // pop: ลบองค์ประกอบสุดท้ายจากอาร์เรย์และส่งคืนค่าขององค์ประกอบนี้ A.pop (); // ------> console.log (a); a.pop (); // -----> console.log (a); a.pop (); // -----> console.log (a); a.pop (); // ------> console.log (a);

เอฟเฟกต์ผลลัพธ์ของคอนโซลเบราว์เซอร์ Google จะแสดงในรูปด้านล่าง:

2.3. การทดสอบประสิทธิภาพของวิธีการผลักดันและวิธีการไม่เปลี่ยน

วิธีการผลักดันและการยกของอาร์เรย์สามารถเพิ่มองค์ประกอบในอาร์เรย์ปัจจุบัน ความแตกต่างคือการเพิ่มการกดจะถูกเพิ่มในตอนท้ายในขณะที่ Unshift จะถูกเพิ่มเข้ามา จากหลักการเราสามารถรู้ได้ว่าประสิทธิภาพของ Unshift นั้นค่อนข้างต่ำ เหตุผลก็คือทุกครั้งที่มันเพิ่มองค์ประกอบมันจะย้ายองค์ประกอบที่มีอยู่ลงหนึ่งตำแหน่ง แต่ความแตกต่างของประสิทธิภาพนั้นใหญ่แค่ไหน? มาทดสอบอย่างง่าย ๆ ด้านล่าง

 <script type = "text/javascript">/*คำอธิบายของคำอธิบายเคล็ดลับของ "var s =+newdate ();" ในรหัสมีดังนี้: =+ตัวดำเนินการนี้ไม่มีอยู่;+เทียบเท่ากับ. valueof ();+วันที่ใหม่ () เทียบเท่ากับวันที่ใหม่ () ค่าของ () // ผลลัพธ์จะส่งคืนมิลลิวินาทีของเวลาปัจจุบันการแจ้งเตือน (+วันที่ใหม่ (); = []; var startTime = +วันที่ใหม่ (); //+วันที่ใหม่ () เทียบเท่ากับวันที่ใหม่ (). valueof (), ส่งคืนมิลลิวินาทีของเวลาปัจจุบัน // การทดสอบประสิทธิภาพการผลักดันสำหรับ (var i =; i <; i ++) {arr.push (i); } var endtime =+วันที่ใหม่ (); console.log ("ต้องใช้เวลาในการเรียกวิธีการพุชเพื่อเพิ่มองค์ประกอบลงในอาร์เรย์"+(starttime endtime)+"MS"); เริ่มต้น = +วันที่ใหม่ (); arr = []; // การทดสอบประสิทธิภาพที่ไม่ทรงยกสำหรับ (var i =; i <; i ++) {arr.unshift (i); } endtime =+วันที่ใหม่ (); console.log ("ต้องใช้เวลาในการเรียกใช้วิธี Unshift เพื่อเพิ่มองค์ประกอบลงในอาร์เรย์"+(endtime-starttime)+"MS"); </script>

รหัสนี้ดำเนินการ 100,000 push และ unshift การดำเนินการตามลำดับและทำงานหนึ่งครั้งใน Google Browser ผลลัพธ์จะแสดงในรูปด้านล่าง:

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

 <script type = "text/javascript"> // สร้างอาร์เรย์เพื่อจำลองสแต็ก var a = new Array (); // ใช้วิธีการผลักดันเพื่อเพิ่มองค์ประกอบ a.push () a.push (); a.push (); a.push (); console.log ( วิธีการที่เรียกว่าย้อนกลับที่สามารถกลับอาร์เรย์ได้ ก่อนอื่นเพิ่มองค์ประกอบที่จะใส่ลงในอาร์เรย์ด้วยการกดแล้วดำเนินการย้อนกลับอีกครั้งและผลของการไม่เปลี่ยนจะทำได้ a.reverse (); // ใช้วิธีการย้อนกลับเพื่อย้อนกลับอาร์เรย์คอนโซลล็อก ("ลำดับขององค์ประกอบในอาร์เรย์หลังการผกผัน");

เอฟเฟกต์ผลลัพธ์ของคอนโซลเบราว์เซอร์ Google จะแสดงในรูปด้านล่าง:

การตัดสินจากผลการดำเนินการลำดับขององค์ประกอบอาร์เรย์ได้รับการย้อนกลับ

2.4. การทดสอบประสิทธิภาพของวิธีการย้อนกลับ

ประสิทธิภาพของการย้อนกลับคืออะไร? ลองทดสอบอีกครั้ง:

 <script type = "text/javascript"> var arr = [], s = +วันที่ใหม่; สำหรับ (var i =; i <; i ++) {arr.push (i); } // การโทรกลับวิธีการย้อนกลับลำดับขององค์ประกอบในอาร์เรย์ arr.Reverse (); console.log ("วิธีการย้อนกลับวิธีการย้อนกลับลำดับขององค์ประกอบในอาร์เรย์:"+(+วันที่ใหม่ - s)+"msec"); </script>

เอฟเฟกต์ผลลัพธ์ของคอนโซลเบราว์เซอร์ Google จะแสดงในรูปด้านล่าง:

จากเอฟเฟกต์การทำงานเราจะเห็นได้ว่าวิธีการย้อนกลับมีประสิทธิภาพสูงมากและสามารถใช้งานได้อย่างมั่นใจ

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

ข้างต้นคือคิวและสแต็กในโครงสร้างการใช้งานอาร์เรย์จาวาสคริปต์ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!