อาร์เรย์ใน JavaScript การใช้ความยาวเพื่อตัดแต่งอาร์เรย์
อาร์เรย์
อาร์เรย์เป็นการสะสมค่าตามลำดับ ค่าในอาร์เรย์เรียกว่าองค์ประกอบ และแต่ละองค์ประกอบจะมีลักษณะเฉพาะด้วยตำแหน่งตัวเลขในอาร์เรย์ เรียกว่าดัชนี อาร์เรย์ใน JavaScript ไม่ได้พิมพ์: องค์ประกอบของอาร์เรย์สามารถเป็นประเภทใดก็ได้ และองค์ประกอบที่แตกต่างกันของอาร์เรย์เดียวกันสามารถมีประเภทต่างกันได้ องค์ประกอบอาร์เรย์อาจเป็นวัตถุหรืออาร์เรย์อื่นๆ ได้ ช่วยให้คุณสร้างโครงสร้างข้อมูลที่ซับซ้อน เช่น อาร์เรย์ของวัตถุและอาร์เรย์ของอาร์เรย์ได้
ดัชนีอาร์เรย์ JavaScript เริ่มต้นที่ศูนย์และใช้จำนวนเต็ม 32 บิต - องค์ประกอบแรกของอาร์เรย์มีดัชนี 0 อาร์เรย์ JavaScript เป็นแบบไดนามิก: สามารถเพิ่มและลดขนาดได้ตามต้องการ ไม่จำเป็นต้องประกาศขนาดอาเรย์คงที่เมื่อสร้าง หรือจัดสรรหน่วยความจำใหม่เมื่อขนาดเปลี่ยนไป
อาร์เรย์ใน JavaScript เป็นรูปแบบพิเศษของออบเจ็กต์ และดัชนีอาร์เรย์มีความหมายมากกว่าแค่ชื่อคุณสมบัติ ซึ่งบังเอิญเป็นจำนวนเต็ม
การสร้างอาร์เรย์
วิธีที่ง่ายที่สุดในการสร้างอาร์เรย์คือการใช้ตัวอักษร ซึ่งเป็นรายการองค์ประกอบอาร์เรย์ในวงเล็บเหลี่ยมที่คั่นด้วยเครื่องหมายจุลภาค ค่าในอาร์เรย์ตัวอักษรไม่จำเป็นต้องเป็นค่าคงที่ - อาจเป็นนิพจน์ใด ๆ รวมถึงตัวอักษรของวัตถุ:
ว่าง = ; // อาร์เรย์ว่าง var number = ; // อาร์เรย์ที่มีองค์ประกอบตัวเลข 5 ตัว var misc = [ 1.1, true, "a", ]; // 3 องค์ประกอบประเภทต่าง ๆ + ฐานลูกน้ำต่อท้าย var = 1024; ตาราง var = ; // อาร์เรย์ที่มีตัวแปร var arrObj = [, ]; // 2 อาร์เรย์ภายในประกอบด้วยวัตถุ
ไวยากรณ์ตามตัวอักษรของอาร์เรย์ช่วยให้คุณสามารถแทรกเครื่องหมายจุลภาคต่อท้ายซึ่งเป็นทางเลือกได้ เช่น ตัวอักษร [,] จะจับคู่อาร์เรย์ที่มีสององค์ประกอบ ไม่ใช่สามองค์ประกอบ
อีกวิธีหนึ่งในการสร้างอาร์เรย์คือการเรียกตัวสร้าง อาร์เรย์()- คุณสามารถเรียก Constructor ได้สามวิธี:
เรียก Constructor โดยไม่มีข้อโต้แย้ง:
Var arr = อาร์เรย์ใหม่ ();
ในกรณีนี้ จะมีการสร้างอาร์เรย์ว่างซึ่งเทียบเท่ากับค่าตัวอักษร
เรียกตัวสร้างด้วยอาร์กิวเมนต์ตัวเลขตัวเดียวที่ระบุความยาวของอาร์เรย์:
Var arr = อาร์เรย์ใหม่ (10);
ในกรณีนี้ จะมีการสร้างอาร์เรย์ว่างตามความยาวที่ระบุ รูปแบบการเรียกตัวสร้าง Array() นี้สามารถใช้เพื่อจัดสรรหน่วยความจำล่วงหน้าสำหรับอาร์เรย์ได้หากทราบจำนวนองค์ประกอบล่วงหน้า โปรดทราบว่าสิ่งนี้จะไม่เก็บค่าใด ๆ ไว้ในอาร์เรย์
ระบุค่าขององค์ประกอบอาร์เรย์ตั้งแต่สองตัวแรกขึ้นไปอย่างชัดเจนหรือองค์ประกอบที่ไม่ใช่ตัวเลขหนึ่งองค์ประกอบในการเรียก Constructor:
Var arr = อาร์เรย์ใหม่ (5, 4, 3, 2, 1, "ทดสอบ");
ในกรณีนี้อาร์กิวเมนต์ของตัวสร้างจะกลายเป็นค่าขององค์ประกอบของอาร์เรย์ใหม่ การใช้ตัวอักษรอาร์เรย์นั้นง่ายกว่าการใช้ตัวสร้าง Array() เกือบทุกครั้ง
การอ่านและการเขียนองค์ประกอบอาร์เรย์
เข้าถึงองค์ประกอบอาร์เรย์ได้โดยใช้ตัวดำเนินการ ทางด้านซ้ายของวงเล็บจะต้องมีการอ้างอิงอาร์เรย์ ภายในวงเล็บจะต้องมีนิพจน์ที่กำหนดเองซึ่งส่งคืนค่าจำนวนเต็มที่ไม่เป็นลบ ไวยากรณ์นี้มีประโยชน์สำหรับทั้งการอ่านและการเขียนค่าขององค์ประกอบอาร์เรย์ ดังนั้นคำสั่ง JavaScript ต่อไปนี้ทั้งหมดจึงถูกต้อง:
// สร้างอาร์เรย์ด้วยองค์ประกอบเดียว var arr = ["world"]; // อ่านองค์ประกอบ 0 var value = arr; // เขียนค่าให้กับองค์ประกอบที่ 1 arr = 3.14; // เขียนค่าให้กับองค์ประกอบ 2 i = 2; ถึง[i] = 3; // เขียนค่าให้กับองค์ประกอบที่ 3 arr = "hello"; // อ่านองค์ประกอบ 0 และ 2 เขียนค่าไปที่องค์ประกอบ 3 arr] = arr;
ฉันขอเตือนคุณว่าอาร์เรย์เป็นวัตถุชนิดพิเศษ วงเล็บเหลี่ยมที่ใช้ในการเข้าถึงองค์ประกอบอาร์เรย์ทำหน้าที่เหมือนกับวงเล็บเหลี่ยมที่ใช้ในการเข้าถึงคุณสมบัติของวัตถุทุกประการ ตัวแปล JavaScript จะแปลงดัชนีตัวเลขในวงเล็บเป็นสตริง ดัชนี 1 จะกลายเป็นสตริง "1" จากนั้นใช้สตริงเป็นชื่อคุณสมบัติ
ไม่มีอะไรพิเศษในการแปลงดัชนีตัวเลขเป็นสตริง คุณสามารถทำเช่นเดียวกันกับออบเจ็กต์ทั่วไปได้:
วาร์ obj = (); // สร้างวัตถุธรรมดา obj = "หนึ่ง"; // จัดทำดัชนีด้วยจำนวนเต็ม
สิ่งที่เกี่ยวกับอาร์เรย์คือเมื่อคุณใช้ชื่อคุณสมบัติที่เป็นจำนวนเต็มที่ไม่ใช่ลบ อาร์เรย์จะกำหนดค่าของคุณสมบัติโดยอัตโนมัติ ความยาว- ตัวอย่างเช่น ด้านบนเราได้สร้างอาร์เรย์ arr ด้วยองค์ประกอบเดียว จากนั้นกำหนดค่าให้กับองค์ประกอบที่ดัชนี 1, 2 และ 3 จากการดำเนินการเหล่านี้ ค่าของคุณสมบัติความยาวของอาร์เรย์จึงเปลี่ยนเป็น 4
คุณควรแยกความแตกต่างดัชนีในอาร์เรย์จากชื่อคุณสมบัติของวัตถุอย่างชัดเจน ดัชนีทั้งหมดเป็นชื่อคุณสมบัติ แต่เฉพาะคุณสมบัติที่มีชื่อแทนด้วยจำนวนเต็มเท่านั้นที่จะเป็นดัชนี อาร์เรย์ทั้งหมดเป็นออบเจ็กต์ และคุณสามารถเพิ่มคุณสมบัติลงในอาร์เรย์ด้วยชื่อใดก็ได้ อย่างไรก็ตาม หากคุณสัมผัสคุณสมบัติที่เป็นดัชนีอาร์เรย์ อาร์เรย์จะตอบสนองด้วยการอัพเดตค่าของคุณสมบัติความยาวตามความจำเป็น
โปรดทราบว่าตัวเลขลบและไม่ใช่จำนวนเต็มสามารถใช้เป็นดัชนีอาร์เรย์ได้ ในกรณีนี้ ตัวเลขจะถูกแปลงเป็นสตริง ซึ่งใช้เป็นชื่อคุณสมบัติ
การเพิ่มและการลบองค์ประกอบอาร์เรย์
เราได้เห็นแล้วว่าวิธีที่ง่ายที่สุดในการเพิ่มองค์ประกอบให้กับอาร์เรย์คือการกำหนดค่าให้กับดัชนีใหม่ คุณยังสามารถใช้วิธีการเพิ่มองค์ประกอบตั้งแต่หนึ่งรายการขึ้นไปที่ส่วนท้ายของอาร์เรย์ได้ ดัน():
วาร์อาร์ = ; // สร้างอาร์เรย์ว่าง arr.push("zero"); // เพิ่มค่าที่ส่วนท้าย arr.push("one",2); // เพิ่มค่าอีกสองค่า
คุณยังสามารถเพิ่มองค์ประกอบที่ส่วนท้ายของอาร์เรย์ได้ด้วยการกำหนดค่าให้กับองค์ประกอบ arr หากต้องการแทรกองค์ประกอบที่จุดเริ่มต้นของอาร์เรย์ คุณสามารถใช้วิธีการได้ ยกเลิกการเลื่อน()ซึ่งย้ายองค์ประกอบที่มีอยู่ในอาร์เรย์ไปยังตำแหน่งที่มีดัชนีสูงกว่า
คุณสามารถลบองค์ประกอบอาร์เรย์ได้โดยใช้ตัวดำเนินการลบ เช่นเดียวกับคุณสมบัติของวัตถุทั่วไป:
วาร์อาร์ = ; ลบ arr; 2 ถึง; // false, ดัชนี 2 ในอาร์เรย์ไม่ได้ถูกกำหนดไว้ arr.length; // 3: ตัวดำเนินการลบไม่เปลี่ยนคุณสมบัติความยาวของอาร์เรย์
การลบองค์ประกอบจะคล้ายกัน (แต่แตกต่างกันเล็กน้อย) ในการกำหนดค่าที่ไม่ได้กำหนดให้กับองค์ประกอบนั้น โปรดทราบว่าการใช้ตัวดำเนินการลบกับองค์ประกอบอาร์เรย์จะไม่เปลี่ยนค่าของคุณสมบัติความยาวหรือเลื่อนองค์ประกอบลงด้วยดัชนีที่สูงกว่าเพื่อเติมช่องว่างที่เหลือโดยการลบองค์ประกอบ
นอกจากนี้ยังสามารถลบองค์ประกอบที่ส่วนท้ายของอาร์เรย์ได้โดยการกำหนดค่าใหม่ให้กับคุณสมบัติความยาว อาร์เรย์มีวิธีการ โผล่()(ตรงข้ามกับเมธอด push()) ซึ่งจะลดความยาวของอาร์เรย์ลง 1 และส่งกลับค่าขององค์ประกอบที่ถูกลบออก นอกจากนี้ยังมีวิธีการ กะ()(ตรงข้ามกับเมธอด unshift()) ซึ่งจะลบองค์ประกอบที่จุดเริ่มต้นของอาร์เรย์ ไม่เหมือนกับตัวดำเนินการลบ เมธอด shift() จะเลื่อนองค์ประกอบทั้งหมดลงไปยังตำแหน่งที่ต่ำกว่าดัชนีปัจจุบัน
ในที่สุดก็มีวิธีการอเนกประสงค์ ประกบกัน()ซึ่งช่วยให้คุณสามารถแทรก ลบ และแทนที่องค์ประกอบอาร์เรย์ได้ โดยจะเปลี่ยนค่าของคุณสมบัติความยาวและเลื่อนองค์ประกอบอาร์เรย์เป็นดัชนีที่ต่ำกว่าหรือสูงกว่าตามความจำเป็น เราจะดูวิธีการเหล่านี้ทั้งหมดในภายหลัง
อาร์เรย์หลายมิติ
JavaScript ไม่รองรับอาร์เรย์หลายมิติ "จริง" แต่ให้วิธีที่ดีในการจำลองโดยใช้อาร์เรย์ของอาร์เรย์ หากต้องการเข้าถึงองค์ประกอบข้อมูลในอาร์เรย์ของอาร์เรย์ เพียงใช้ตัวดำเนินการสองครั้ง
ตัวอย่างเช่น สมมติว่าเมทริกซ์ตัวแปรเป็นอาร์เรย์ของอาร์เรย์ตัวเลข แต่ละองค์ประกอบของเมทริกซ์[x] คืออาร์เรย์ของตัวเลข หากต้องการเข้าถึงหมายเลขเฉพาะในอาร์เรย์ คุณสามารถใช้นิพจน์เมทริกซ์[x][y] ด้านล่างนี้เป็นตัวอย่างเฉพาะที่ใช้อาร์เรย์สองมิติเป็นตารางสูตรคูณ:
// สร้างอาร์เรย์หลายมิติ var table = new Array(10); // ตารางมี 10 แถวสำหรับ(var i = 0; i
เมธอดของคลาส Array
มาตรฐาน ECMAScript 3 กำหนดให้ Array.prototype เป็นชุดฟังก์ชันที่สะดวกสำหรับการทำงานกับอาร์เรย์ ซึ่งใช้เป็นวิธีการในอาร์เรย์ใดก็ได้ วิธีการเหล่านี้จะนำเสนอในส่วนย่อยต่อไปนี้
เข้าร่วม () วิธีการ
วิธีการ Array.join() จะแปลงองค์ประกอบอาร์เรย์ทั้งหมดให้เป็นสตริง รวมเข้าด้วยกัน และส่งกลับสตริงผลลัพธ์ เนื่องจากเป็นอาร์กิวเมนต์ทางเลือก คุณสามารถส่งสตริงไปยังเมธอดที่จะใช้เพื่อแยกองค์ประกอบในสตริงผลลัพธ์ได้ หากไม่ได้ระบุสตริงตัวคั่น จะใช้เครื่องหมายจุลภาค ตัวอย่างเช่น ส่วนต่อไปนี้ให้ผลลัพธ์เป็นสตริง "1,2,3":
วาร์อาร์ = ; arr.เข้าร่วม(); // "1,2,3" arr.join("-"); // "1-2-3"
วิธีการย้อนกลับ ()
Array.reverse() วิธีการกลับลำดับขององค์ประกอบในอาร์เรย์และส่งกลับอาร์เรย์ที่เรียงลำดับใหม่ การเรียงสับเปลี่ยนจะดำเนินการโดยตรงในอาร์เรย์ดั้งเดิม เช่น วิธีการนี้ไม่ได้สร้างอาร์เรย์ใหม่ด้วยองค์ประกอบที่เรียงลำดับใหม่ แต่จะเรียงลำดับใหม่ในอาร์เรย์ที่มีอยู่แล้ว ตัวอย่างเช่น ตัวอย่างต่อไปนี้โดยใช้เมธอด Reverse() และ join() ผลลัพธ์ที่ได้คือสตริง "3,2,1":
วาร์อาร์ = ; arr.ย้อนกลับ().เข้าร่วม(); // "3,2,1"
วิธีการเรียงลำดับ ()
Array.sort() วิธีการเรียงลำดับองค์ประกอบในอาร์เรย์ต้นทางและส่งกลับอาร์เรย์ที่เรียงลำดับ หากเรียกใช้เมธอด sort() โดยไม่มีอาร์กิวเมนต์ การเรียงลำดับจะดำเนินการตามลำดับตัวอักษร (องค์ประกอบจะถูกแปลงเป็นสตริงชั่วคราวเพื่อการเปรียบเทียบหากจำเป็น) องค์ประกอบที่ไม่ได้กำหนดจะถูกย้ายไปยังจุดสิ้นสุดของอาร์เรย์
หากต้องการเรียงลำดับนอกเหนือจากตัวอักษร คุณสามารถส่งฟังก์ชันการเปรียบเทียบเป็นอาร์กิวเมนต์ไปยังเมธอด sort() ได้ ฟังก์ชันนี้จะกำหนดว่าอาร์กิวเมนต์ใดในสองข้อควรมาก่อนในรายการที่เรียงลำดับ ถ้าอาร์กิวเมนต์แรกต้องมาก่อนอาร์กิวเมนต์ที่สอง ฟังก์ชันการเปรียบเทียบจะต้องส่งกลับจำนวนลบ หากอาร์กิวเมนต์แรกตามหลังอาร์กิวเมนต์ที่สองในอาร์เรย์ที่เรียงลำดับ ฟังก์ชันจะต้องส่งคืนตัวเลขที่มากกว่าศูนย์ และหากค่าสองค่าเท่ากัน (นั่นคือลำดับไม่สำคัญ) ฟังก์ชันการเปรียบเทียบควรส่งคืน 0:
วาร์อาร์ = ; arr.เรียงลำดับ(); // ลำดับตามตัวอักษร: 1111, 222, 33, 4 arr.sort(function(a,b) ( // ลำดับตัวเลข: 4, 33, 222, 1111 ส่งคืน a-b; // ส่งคืน 0 // ขึ้นอยู่กับการเรียงลำดับ a และข)); // เรียงลำดับในทิศทางตรงกันข้าม จากใหญ่ไปเล็กที่สุด arr.sort(function(a,b) (return b-a));
สังเกตว่าการใช้ฟังก์ชันที่ไม่มีชื่อในตัวอย่างข้อมูลนี้สะดวกเพียงใด ฟังก์ชันการเปรียบเทียบจะใช้ที่นี่เท่านั้น ดังนั้นจึงไม่จำเป็นต้องตั้งชื่อ
วิธีการ concat()
เมธอด Array.concat() สร้างและส่งกลับอาร์เรย์ใหม่ที่มีองค์ประกอบของอาร์เรย์ดั้งเดิมที่เรียกใช้ concat() และค่าของอาร์กิวเมนต์ใด ๆ ที่ส่งผ่านไปยัง concat() ถ้าอาร์กิวเมนต์ใด ๆ เหล่านี้เป็นอาร์เรย์ องค์ประกอบจะถูกเพิ่มลงในอาร์เรย์ที่ส่งคืน อย่างไรก็ตาม ควรสังเกตว่าไม่มีการเปลี่ยนแปลงแบบเรียกซ้ำของอาร์เรย์ของอาร์เรย์ไปเป็นอาร์เรย์หนึ่งมิติ concat() วิธีการไม่เปลี่ยนอาร์เรย์เดิม ด้านล่างนี้เป็นตัวอย่างบางส่วน:
วาร์อาร์ = ; arr.concat(4, 5); // กลับ arr.concat(); // กลับ arr.concat(,) // กลับ arr.concat(4, ]) // กลับ ]
วิธีการแบ่งส่วน ()
Array.slice() วิธีการส่งกลับชิ้นหรืออาร์เรย์ย่อยของอาร์เรย์ที่ระบุ อาร์กิวเมนต์สองวิธีระบุจุดเริ่มต้นและจุดสิ้นสุดของส่วนที่ส่งคืน อาร์เรย์ที่ส่งคืนประกอบด้วยองค์ประกอบที่ระบุหมายเลขไว้ในอาร์กิวเมนต์แรก บวกกับองค์ประกอบที่ตามมาทั้งหมด จนถึง (แต่ไม่รวม) องค์ประกอบที่ระบุหมายเลขในอาร์กิวเมนต์ที่สอง
หากมีการกำหนดอาร์กิวเมนต์เพียงตัวเดียว อาร์เรย์ที่ส่งคืนจะมีองค์ประกอบทั้งหมดตั้งแต่ตำแหน่งเริ่มต้นจนถึงจุดสิ้นสุดของอาร์เรย์ หากอาร์กิวเมนต์ใดๆ ที่เป็นค่าลบ จะกำหนดหมายเลของค์ประกอบที่สัมพันธ์กับจุดสิ้นสุดของอาร์เรย์ ดังนั้น อาร์กิวเมนต์ -1 สอดคล้องกับองค์ประกอบสุดท้ายของอาร์เรย์ และอาร์กิวเมนต์ -3 สอดคล้องกับองค์ประกอบที่สามของอาร์เรย์จากจุดสิ้นสุด นี่คือตัวอย่างบางส่วน:
วาร์อาร์ = ; arr.ชิ้น(0,3); // กลับ arr.slice(3); // กลับ arr.slice(1,-1); // กลับ arr.slice(-3,-2); // กลับ
วิธีการประกบกัน ()
วิธีการ Array.splice() เป็นวิธีการทั่วไปที่ดำเนินการแทรกหรือลบองค์ประกอบอาร์เรย์ ซึ่งแตกต่างจากเมธอด Slice() และ concat() เมธอด splice() จะปรับเปลี่ยนอาร์เรย์ดั้งเดิมที่ถูกเรียก โปรดทราบว่าเมธอด splice() และ Slice() มีชื่อคล้ายกันมาก แต่มีการดำเนินการที่แตกต่างกันโดยสิ้นเชิง
วิธีการ splice() สามารถลบองค์ประกอบออกจากอาร์เรย์ แทรกองค์ประกอบใหม่ หรือทำทั้งสองอย่างพร้อมกันได้ องค์ประกอบอาร์เรย์จะถูกเลื่อนตามความจำเป็นเพื่อสร้างลำดับต่อเนื่องหลังจากการแทรกหรือการลบ
อาร์กิวเมนต์แรกของเมธอด splice() ระบุตำแหน่งในอาร์เรย์ที่จะทำการแทรกและ/หรือการลบ อาร์กิวเมนต์ที่สองระบุจำนวนองค์ประกอบที่ควรลบ (ตัด) ออกจากอาร์เรย์ หากละเว้นอาร์กิวเมนต์ที่สอง องค์ประกอบอาร์เรย์ทั้งหมดตั้งแต่ที่ระบุจนถึงจุดสิ้นสุดของอาร์เรย์จะถูกลบออก splice() วิธีการส่งกลับอาร์เรย์ขององค์ประกอบที่ถูกลบออกหรือ (หากไม่มีองค์ประกอบที่ถูกลบออก) อาร์เรย์ว่าง
อาร์กิวเมนต์สองตัวแรกของ splice() วิธีการระบุองค์ประกอบอาร์เรย์ที่จะลบออก อาร์กิวเมนต์เหล่านี้สามารถตามด้วยอาร์กิวเมนต์เพิ่มเติมจำนวนเท่าใดก็ได้ที่ระบุองค์ประกอบที่จะแทรกลงในอาร์เรย์ โดยเริ่มต้นที่ตำแหน่งที่ระบุในอาร์กิวเมนต์แรก
วาร์อาร์ = ; arr.ประกบ(4); // กลับ , arr = arr.splice(1,2); // กลับ , arr = arr.splice(1,1); // กลับ ; อร = อร = ; arr.splice(2,0,"a", "b"); // กลับ ; อาร์ =
วิธีการ push() และ pop()
เมธอด push() และ pop() ช่วยให้คุณทำงานกับอาร์เรย์ได้เหมือนกับว่าเป็นสแต็ก push() วิธีการเพิ่มองค์ประกอบใหม่ตั้งแต่หนึ่งรายการขึ้นไปที่ส่วนท้ายของอาร์เรย์และส่งกลับความยาวใหม่ เมธอด pop() ดำเนินการย้อนกลับ โดยจะลบองค์ประกอบสุดท้ายของอาร์เรย์ ลดความยาวของอาร์เรย์ และส่งกลับค่าที่ลบออกไป โปรดทราบว่าทั้งสองวิธีนี้จะปรับเปลี่ยนอาร์เรย์ดั้งเดิมแทนที่จะสร้างสำเนาที่แก้ไขแล้ว
วิธีการ unshift() และ shift()
เมธอด unshift() และ shift() มีพฤติกรรมเกือบจะเหมือนกับ push() และ pop() ยกเว้นว่ามันจะแทรกและลบองค์ประกอบที่จุดเริ่มต้นของอาร์เรย์ แทนที่จะเป็นตอนท้าย เมธอด unshift() จะเลื่อนองค์ประกอบที่มีอยู่ไปเป็นดัชนีที่ใหญ่ขึ้นเพื่อเพิ่มพื้นที่ว่าง เพิ่มองค์ประกอบหรือองค์ประกอบที่จุดเริ่มต้นของอาร์เรย์ และส่งกลับความยาวใหม่ของอาร์เรย์ วิธีการ shift() จะลบและส่งกลับองค์ประกอบแรกของอาร์เรย์ โดยเลื่อนองค์ประกอบที่ตามมาทั้งหมดลงมาหนึ่งตำแหน่งเพื่อใช้พื้นที่ว่างที่จุดเริ่มต้นของอาร์เรย์
วันที่ดีสำหรับทุกคนที่ตัดสินใจเรียนรู้ทุกอย่างเกี่ยวกับอาร์เรย์ใน JavaScript ในสิ่งพิมพ์หลายฉบับก่อนหน้านี้ ฉันได้กล่าวถึงบางประเด็นแล้ว บทความวันนี้เป็นคำแนะนำฉบับสมบูรณ์
ฉันจะพูดถึงตัวเลือกบางอย่างสำหรับการสร้างอาร์เรย์และวิธีที่ความยาวของอาร์เรย์ถูก "ดึงออก" ใน JavaScript พูดคุยเกี่ยวกับคุณสมบัติของมัน แสดงรายการคุณสมบัติหลักและวิธีการทำงานกับพวกมัน และแน่นอนให้ตัวอย่างการทดสอบ มาเริ่มกันเลย!
เรามาพูดถึงงานหลักของอาร์เรย์กันดีกว่า
สิ่งแรกที่คุณต้องเข้าใจคืออาร์เรย์เป็นประเภทที่เก็บข้อมูลที่มีโครงสร้างไว้ในเซลล์หน่วยความจำเฉพาะ ซึ่งแต่ละเซลล์จะมีตัวระบุ (ตัวเลข) ของตัวเอง
สร้างขึ้นโดยใช้วงเล็บเหลี่ยม มีความสามารถและวิธีการที่หลากหลาย และสามารถเป็นแบบหลายมิติได้ ข้อได้เปรียบหลักคือองค์ประกอบทั้งหมดจะมีหมายเลขกำกับไว้ ดังนั้นจึงสามารถเข้าถึงได้ผ่านตัวระบุ
อย่างไรก็ตาม มีอาร์เรย์ประเภทอื่นอยู่ ที่จริงแล้ว ในบทความเกี่ยวกับวัตถุ ฉันบอกว่าอันหลังนั้นเป็นอาร์เรย์ด้วย แท้จริงแล้วพวกมันคืออาเรย์แบบเชื่อมโยงซึ่งเป็นโครงสร้างข้อมูลที่มีระบบจัดเก็บข้อมูลในรูปแบบของ "คีย์ => ค่า" โครงสร้างนี้มักเรียกว่าแฮช หรือเรียกน้อยกว่าพจนานุกรม
มาดูรายละเอียดแต่ละประเภทกันดีกว่า
เมื่อทำงานกับอาร์เรย์ที่เชื่อมโยง เป็นเรื่องง่ายมากที่จะทั้งเพิ่มและลบองค์ประกอบ เนื่องจากภาษาสคริปต์นี้ไม่ได้พิมพ์และไม่มีกฎที่เข้มงวดมากนัก คุณจึงสามารถสร้างองค์ประกอบออบเจ็กต์ได้หลายวิธี: แสดงรายการทันที เริ่มต้นองค์ประกอบหลังจากสร้างออบเจ็กต์ และสร้างองค์ประกอบเมื่อโค้ดดำเนินไป
ตอนนี้ฉันต้องการแสดงตัวอย่างการนำกลไกดังกล่าวไปใช้ ในโปรแกรมแรกฉันสร้างวัตถุ อดทนแล้วจึงระบุองค์ประกอบต่างๆ อย่างที่คุณเห็นสำหรับ อดทนพารามิเตอร์ฉันสร้างวัตถุที่ซ้อนกันซึ่งมีค่าของตัวเอง
| 1 2 3 4 5 6 7 8 9 10 | var ผู้ป่วย = วัตถุใหม่ (); Patient.firstName ="Inna" Patient.age =34, Patient.param =( height:169 , Weight: 55, โรค: "no" ) alert( Patient.firstName) // จะแสดงการแจ้งเตือน "Inna" ( Patient.param . โรค) // จะพิมพ์หมายเลข |
var ผู้ป่วย = วัตถุใหม่ (); Patient.firstName ="Inna" Patient.age =34, Patient.param =( height:169 , Weight: 55, โรค: "no" ) alert( Patient.firstName) // จะแสดงการแจ้งเตือน "Inna" ( Patient.param . โรค) // จะพิมพ์หมายเลข
หากจำเป็นต้องเพิ่มพารามิเตอร์อีกหนึ่งตัวให้กับพารามิเตอร์ที่มีอยู่ เช่น นามสกุล ให้ทำดังนี้ เพิ่มบรรทัดต่อไปนี้ลงในโค้ดที่แสดงด้านบน:
Patient.surname = "ลุตเซนโก"
แจ้งเตือน (คนไข้.นามสกุล)
นี่คือวิธีการเติมเต็มคอลเลกชันด้วยคุณสมบัติใหม่อย่างง่ายดาย หากคุณต้องการเปลี่ยนค่าใดๆ คุณเพียงแค่ต้องกำหนดให้กับคีย์ที่เลือก:
Patient.firstName = "คัทย่า"
สำหรับออบเจ็กต์ ยังมีการดำเนินการสำหรับการลบคุณสมบัติที่ไม่จำเป็นโดยใช้คำสั่งลบ:
ลบชื่อผู้ป่วย.นามสกุล
อาร์เรย์ "ของจริง"
บางครั้งเรียกว่า "อาร์เรย์ที่มีดัชนีตัวเลข" หากเราเปรียบเทียบกับเวอร์ชันก่อนหน้าคีย์จะแสดงเป็นตัวเลขที่นี่ แต่ค่าสามารถเป็นอะไรก็ได้ การรวบรวมอาจถูกป้อนเข้าไปในวัตถุดังกล่าวโดยไม่เป็นระเบียบ
ดังนั้นองค์ประกอบหนึ่งสามารถป้อนลงในเซลล์ที่มีดัชนี "0" และองค์ประกอบถัดไป - ด้วยดัชนี "4" เซลล์หน่วยความจำระดับกลางจะว่างเปล่าและแสดง "ไม่ได้กำหนด" เมื่อเข้าถึง
ตามตัวอย่าง ฉันเขียนแอปพลิเคชันขนาดเล็กที่สร้างอาร์เรย์ของผลิตภัณฑ์
| 1 2 3 4 5 | สินค้า var = ["เนื้อวัว", "พาสต้า", "ชีสแข็ง", "เครื่องเทศ"]; การแจ้งเตือน(สินค้า); การแจ้งเตือน(สินค้า); สินค้า = การแจ้งเตือน "มะเขือเทศ" (สินค้า); |
สินค้า var = ["เนื้อวัว", "พาสต้า", "ชีสแข็ง", "เครื่องเทศ"]; การแจ้งเตือน(สินค้า); การแจ้งเตือน(สินค้า); สินค้า = การแจ้งเตือน "มะเขือเทศ" (สินค้า);
ฉันแสดงให้คุณเห็นโดยเฉพาะถึงวิธีการแสดงรายการช้อปปิ้งทั้งหมดและวิธีการเลือกสินค้าหนึ่งรายการ นอกจากนี้ฉันยังได้สัมผัสกับทรัพย์สิน ความยาวซึ่งฉันจะพูดถึงโดยเฉพาะในภายหลัง ในระหว่างนี้ฉันจะให้คำอธิบายเล็กน้อย
เพิ่มองค์ประกอบใหม่ที่ส่วนท้ายของอาร์เรย์สินค้า = "มะเขือเทศ"
เมธอดที่อนุญาตให้คุณทำงานกับจุดเริ่มต้นและจุดสิ้นสุดของอาร์เรย์
มี 4 คำสั่งที่ช่วยให้คุณสามารถเพิ่มและลบองค์ประกอบออกจากจุดเริ่มต้นและจุดสิ้นสุดของวัตถุที่มีโครงสร้างได้
ก่อนอื่น ฉันจะบอกคุณเกี่ยวกับวิธีการที่ทำงานกับจุดเริ่มต้นของอาร์เรย์ เหล่านี้ได้แก่ กะและ ยกเลิกการกะ- คำสั่งแรกจะลบค่าหนึ่งค่าออก และคำสั่งที่สองจะเพิ่ม
ตามตัวอย่าง ผมเอาโค้ดจากโปรแกรมก่อนหน้ามาแก้ไข
| 1 2 3 4 5 6 7 8 | สินค้า var = ["เนื้อวัว", "พาสต้า", "ชีสแข็ง", "เครื่องเทศ"]; document.writeln(สินค้า); //เนื้อวัว,พาสต้า,ฮาร์ดชีส,เครื่องเทศ document.writeln(สินค้า); //สินค้าฮาร์ดชีส.unshift("มะเขือเทศ"); Goods.unshift("หมูปรุงสุก"); document.writeln(สินค้า); // หมู, มะเขือเทศ, เนื้อวัว, พาสต้า, ฮาร์ดชีส, เครื่องเทศ Goods.shift() document.writeln(goods); //มะเขือเทศ เนื้อ พาสต้า ฮาร์ดชีส เครื่องเทศ |
สินค้า var = ["เนื้อวัว", "พาสต้า", "ชีสแข็ง", "เครื่องเทศ"]; document.writeln(สินค้า); //เนื้อวัว,พาสต้า,ฮาร์ดชีส,เครื่องเทศ document.writeln(สินค้า); //สินค้าฮาร์ดชีส.unshift("มะเขือเทศ"); Goods.unshift("หมูปรุงสุก"); document.writeln(สินค้า); // หมู, มะเขือเทศ, เนื้อวัว, พาสต้า, ชีสแข็ง, เครื่องเทศ Goods.shift() document.writeln(goods); //มะเขือเทศ เนื้อ พาสต้า ฮาร์ดชีส เครื่องเทศ
ฉันจดบันทึกผลลัพธ์ที่ได้รับในความคิดเห็นเกี่ยวกับการดำเนินการที่ทำ
ตอนนี้เรามาดูวิธีการที่เพิ่มและลบองค์ประกอบที่ส่วนท้ายของรายการ ดังนั้น, โผล่มีหน้าที่ลบค่าต่างๆ และ ดัน- สำหรับการเพิ่มเติม
มาเพิ่มคำสั่งข้างต้นในการใช้งานซอฟต์แวร์ก่อนหน้านี้
Goods.push("สมุนไพรอิตาลี");
document.writeln(สินค้า);
ดังนั้นบรรทัดสุดท้ายจะปรากฏบนหน้าจอ:
"มะเขือเทศ เนื้อ พาสต้า ชีสแข็ง สมุนไพรอิตาลี"
ตอนนี้เรามานับองค์ประกอบกัน
เพื่อที่จะค้นหาจำนวนองค์ประกอบที่เขียนลงในอาเรย์ คุณต้องใช้คุณสมบัติของอ็อบเจ็กต์ - ความยาว- ฉันได้ใช้คำสั่งนี้ข้างต้นแล้ว
ตอนนั้นคอลเลกชันมีความยาว 4 และฉันต้องเพิ่มผลิตภัณฑ์อีกหนึ่งรายการ เนื่องจากการกำหนดหมายเลขขององค์ประกอบอาร์เรย์เริ่มต้นจากศูนย์ เซลล์ว่างเซลล์แรกในตัวอย่างนี้จึงอยู่ภายใต้ดัชนี "4" โปรดทราบว่าความยาวไม่ได้กำหนดจำนวนผลิตภัณฑ์ที่รวมอยู่ในคอลเลกชัน แต่เป็นความยาวของอาเรย์เอง ดังนั้น ถ้าในรายการนั้น 2 องค์ประกอบตรงกลางว่างเปล่า
(สินค้า var = ["เนื้อวัว", "พาสต้า", "ชีสแข็ง", "เครื่องเทศ"];)
ทรัพย์สินนั้นจะส่งผลให้มีเลข 6
เมื่อรู้คำสั่งนี้แล้ว คุณสามารถเริ่มแยกวิเคราะห์ลูปได้ สิ่งเหล่านี้จำเป็นในการวนซ้ำองค์ประกอบของคอลเลกชัน นี่เป็นกลไกที่สะดวกมากซึ่งทำได้ยากหากไม่มี ในลูป คุณสามารถระบุทิศทาง จากองค์ประกอบใด และตามองค์ประกอบใด รวมถึงขั้นตอนที่คุณควรวนซ้ำผ่านค่าต่างๆ
ลูปที่ได้รับความนิยมและทำงานเร็วที่สุดคือลูปที่สร้างขึ้นโดยใช้คีย์เวิร์ด
สินค้า var = ["เนื้อวัว", "พาสต้า", "ชีสแข็ง", "เครื่องเทศ"]; สำหรับ (var i = Goods.length-1; i >=0; i=i-2) ( document.writeln((i+1)+"."+ สินค้า[i]); )
ผู้ที่ตัดสินใจว่าคำตอบจะมีบรรทัด: “4. เครื่องเทศ 2. พาสต้า” ถูก ทำได้ดี!
หมายเหตุที่เป็นประโยชน์บางประการ
ผู้สร้างภาษา js ได้จัดเตรียมวิธีการและฟังก์ชันมากมายที่ทำให้การทำงานกับอาร์เรย์ง่ายขึ้นอย่างมาก มีเครื่องมือสำหรับการคัดลอกคอลเลกชัน เปลี่ยนลำดับขององค์ประกอบ เรียงลำดับ การแปลงอาร์เรย์เป็นสตริงและด้านหลัง และอื่นๆ อีกมากมาย
ในบทนี้ เราจะทำความคุ้นเคยกับอาร์เรย์ เรียนรู้วิธีสร้างอาร์เรย์ ดำเนินการกับองค์ประกอบต่างๆ และดูวิธีการพื้นฐานและคุณสมบัติที่ใช้งานได้เมื่อทำงานกับอาร์เรย์เหล่านั้น
อาร์เรย์ใน JavaScript คืออะไร?
อาร์เรย์คือ สั่งให้รวบรวมคุณค่า- ค่าในคอลเลกชันนี้เรียกว่าองค์ประกอบ แต่ละองค์ประกอบในอาร์เรย์มีหมายเลขซีเรียล (หมายเลข) ของตัวเองซึ่งเรียกว่าดัชนี ดัชนีจะมีหมายเลขเริ่มต้นจาก 0
รูปต่อไปนี้แสดงอาร์เรย์ตัวเลขที่ประกอบด้วย 5 องค์ประกอบ องค์ประกอบของอาร์เรย์นี้มีข้อมูลต่อไปนี้: 123 (ดัชนี 0), 7 (ดัชนี 1), 50 (ดัชนี 2), -9 (ดัชนี 3), 24 (ดัชนี 4)
การสร้าง (ประกาศ) อาร์เรย์
การสร้างอาร์เรย์ใน JavaScript มักจะทำได้โดยใช้ ตัวอักษรอาร์เรย์.
ตัวอักษรอาร์เรย์คือวงเล็บเหลี่ยมที่มีรายการองค์ประกอบคั่นด้วยเครื่องหมายจุลภาค
ตัวอย่างเช่น:
ว่าง = ; // อาร์เรย์ว่าง var number = ; // อาร์เรย์ตัวเลข var arr = ; // อาร์เรย์ที่มีข้อมูลประเภทต่างๆ
ค่าในอาร์เรย์ JavaScript ไม่จำเป็นต้องเป็นประเภทเดียวกัน เหล่านั้น. หนึ่งอาร์เรย์สามารถมีค่าของประเภทข้อมูลที่แตกต่างกันได้
องค์ประกอบอาร์เรย์เฉพาะถูกเข้าถึงโดยดัชนีของมัน การดำเนินการนี้เรียกอีกอย่างว่าการดำเนินการจัดทำดัชนี
ตัวอย่างเช่น:
// สร้างอาร์เรย์ที่ประกอบด้วย 3 องค์ประกอบ var smartphoneColors = ["Black", "White", "Grey"]; // แสดงในคอนโซลเบราว์เซอร์ค่าขององค์ประกอบอาร์เรย์ของสมาร์ทโฟนสีที่มีดัชนี 0 และ 2 console.log("ค่าขององค์ประกอบอาร์เรย์ของสมาร์ทโฟนสีที่มีดัชนี 0: " + สมาร์ทโฟนสี); // "ค่าขององค์ประกอบอาร์เรย์ของสมาร์ทโฟนสีที่มีดัชนี 0: สีดำ" console.log ("ค่าขององค์ประกอบอาร์เรย์ของสมาร์ทโฟนสีที่มีดัชนี 2: " + ของสมาร์ทโฟนสี); // "ค่าขององค์ประกอบอาร์เรย์ของสมาร์ทโฟนสีที่มีดัชนี 0: สีเทา" // เปลี่ยนค่าขององค์ประกอบอาร์เรย์ของสมาร์ทโฟนสีที่มีดัชนี 1 เป็น "สีแดง" ของสมาร์ทโฟนสี = "สีแดง"; // ["สีดำ", "สีแดง", "สีเทา"] // ตั้งค่าองค์ประกอบอาร์เรย์ของสมาร์ทโฟนสีด้วยดัชนี 3 เป็นค่า "สีน้ำเงิน" ของสมาร์ทโฟนสี = "สีน้ำเงิน"; // ["ดำ", "แดง", "เทา", "น้ำเงิน"]
คุณสามารถใช้ไม่เพียงแต่ค่าคงที่เท่านั้น แต่ยังสามารถใช้นิพจน์เป็นค่าองค์ประกอบอาร์เรย์ได้ด้วย:
ความยาว A = 7, ความกว้าง A = 5; จุดวาร์ = ;
วัตถุสามารถใช้เป็นค่าองค์ประกอบอาร์เรย์ได้
จุดวาร์ = [ (x1: 5, y1: 3), (x1: 7, y1: 10), (x1: 12; y1: 0) ]; // อาร์เรย์ประกอบด้วย 3 อ็อบเจ็กต์
อีกวิธีหนึ่งในการสร้างอาร์เรย์ประกอบด้วยการเรียกฟังก์ชัน Array Constructor
การเรียกใช้ฟังก์ชัน Constructor ที่ไม่มีอาร์กิวเมนต์ถูกใช้เพื่อสร้างอาร์เรย์ว่าง
Var ว่าง = อาร์เรย์ใหม่ (); //อาร์เรย์ว่าง
วิธีการสร้างอาร์เรย์นี้เทียบเท่ากับตัวอักษร
หากคุณระบุตัวเลขเป็นอาร์กิวเมนต์ให้กับฟังก์ชัน Constructor มันจะสร้างอาร์เรย์ที่จะประกอบด้วยจำนวนองค์ประกอบที่ระบุ นอกจากนี้องค์ประกอบทั้งหมดเหล่านี้จะไม่ได้กำหนดมูลค่าไว้
Var arr = อาร์เรย์ใหม่ (5); // อาร์เรย์ประกอบด้วย 5 องค์ประกอบ (ค่าองค์ประกอบไม่ได้กำหนดไว้)
หากคุณส่งค่าหลายค่าหรือค่าที่ไม่ใช่ตัวเลขหนึ่งค่าไปยังฟังก์ชันคอนสตรัคเตอร์ในวงเล็บ มันจะสร้างอาร์เรย์จากอาร์กิวเมนต์ที่ส่งผ่านไป
ไม่เหมือนกับภาษาการเขียนโปรแกรมอื่นๆ อาร์เรย์ใน JavaScript จะเปลี่ยนขนาดโดยอัตโนมัติ เช่น พวกมันมีความไดนามิกโดยเนื้อแท้ อาร์เรย์ดังกล่าวไม่จำเป็นต้องกำหนดมิติใดๆ คุณสมบัติที่โดดเด่นอีกประการหนึ่งของอาร์เรย์ JavaScript ก็คือองค์ประกอบที่แตกต่างกันของอาร์เรย์เดียวกันสามารถมีข้อมูลประเภทต่างๆ ได้
คุณสมบัติความยาว (ความยาวอาร์เรย์)
การกำหนดความยาวของอาร์เรย์ (จำนวนองค์ประกอบ) ทำได้โดยใช้คุณสมบัติความยาว
//สร้างอาร์เรย์โดยการแสดงรายการค่าขององค์ประกอบในฟังก์ชัน Array var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //กำหนดตัวแปร lengthArray ให้กับความยาวของอาร์เรย์ VolumeHDDs var lengthArray = VolumeHDDs.length;
วิธีรับองค์ประกอบแรกของอาร์เรย์
การรับค่าขององค์ประกอบแรกของอาร์เรย์ทำได้โดยการระบุหมายเลข 0 ในวงเล็บเหลี่ยมของอาร์เรย์นี้:
//สร้างอาร์เรย์ที่ประกอบด้วย 3 องค์ประกอบ var VolumeHDDs = new Array("500Gb","1Tb","2Tb"); // รับค่าขององค์ประกอบแรกของอาร์เรย์ var firstValue = VolumeHDDs;
วิธีรับองค์ประกอบสุดท้ายของอาร์เรย์
ค่าขององค์ประกอบสุดท้ายของอาร์เรย์ได้มาจากการระบุนิพจน์ array_name.length-1 ในวงเล็บเหลี่ยมของอาร์เรย์นี้:
//สร้างอาร์เรย์ที่ประกอบด้วย 3 องค์ประกอบ var VolumeHDDs = new Array("500Gb","1Tb","2Tb"); //รับค่าขององค์ประกอบสุดท้ายของอาร์เรย์ var LastValue = VolumeHDDs;
วนซ้ำอาร์เรย์
การวนซ้ำองค์ประกอบอาร์เรย์ทำได้โดยใช้ for loop
ตัวอย่างเช่น เรามาวนซ้ำองค์ประกอบทั้งหมดของอาร์เรย์และแสดงค่าในคอนโซลของเบราว์เซอร์ (F12):
//สร้างอาร์เรย์ nameStudents ประกอบด้วย 4 องค์ประกอบ var nameStudents = new Array("Petya","Vasya","Kolya","Maxim"); // วนซ้ำองค์ประกอบอาร์เรย์จาก 0 ถึงความยาวอาร์เรย์ -1 สำหรับ (var i=0; i<= nameStudents.length-1; i++) { console.log(i+1 + " элемент массива = " + nameStudents[i]); }
จุดประสงค์ของตัวดำเนินการลบคืออะไร?
ตัวดำเนินการลบไม่ได้ใช้เพื่อลบองค์ประกอบออกจากอาร์เรย์ แต่เพื่อกำหนดค่าที่ไม่ได้กำหนดให้กับองค์ประกอบอาร์เรย์ที่กำหนด
ชื่อ VarPlanets = อาร์เรย์ใหม่ ("วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร"); ลบ namePlanets; สำหรับ (var i=0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }
ฟังก์ชั่นสำหรับการทำงานกับอาร์เรย์ (วิธีวัตถุ Array)
วัตถุ Array มีวิธีการ (ฟังก์ชัน) ต่อไปนี้สำหรับการทำงานกับอาร์เรย์:
- กะ
- ยกเลิกการกะ
- ชิ้น
- ประกบกัน
- แยก
- ย้อนกลับ
วิธีการพุช (เพิ่มองค์ประกอบที่ส่วนท้ายของอาร์เรย์)
วิธีการพุชได้รับการออกแบบเพื่อเพิ่มองค์ประกอบที่ส่วนท้ายของอาร์เรย์ ค่าขององค์ประกอบนี้ถูกระบุเป็นพารามิเตอร์ของเมธอดนี้ ด้วยเหตุนี้ วิธีการ push จึงส่งคืนจำนวนองค์ประกอบในอาร์เรย์ โดยคำนึงถึงสิ่งที่ถูกเพิ่มเข้าไป
ชื่อวาร์ดาวเคราะห์ = ["วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร"]; namePlanets.push("ดาวพฤหัสบดี"); // 5 console.log(namePlanets); // ["วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร", "ดาวพฤหัสบดี"]
วิธีการป๊อป (ลบองค์ประกอบสุดท้ายออกจากอาร์เรย์)
วิธีการป๊อปถูกออกแบบมาเพื่อลบองค์ประกอบสุดท้ายออกจากอาร์เรย์ วิธีนี้ไม่มีพารามิเตอร์ เป็นผลให้ส่งกลับค่าขององค์ประกอบสุดท้าย (ลบออก) ของอาร์เรย์
ชื่อวาร์ดาวเคราะห์ = ["วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร"]; namePlanets.pop(); // "ดาวอังคาร" console.log(namePlanets); // ["วีนัส", "ดาวพุธ", "โลก"]
วิธีการ Shift (การลบองค์ประกอบแรกออกจากอาร์เรย์)
วิธีการ shift ได้รับการออกแบบมาเพื่อลบองค์ประกอบแรกออกจากอาเรย์ เช่น องค์ประกอบที่มีดัชนี 0 องค์ประกอบอื่นๆ ทั้งหมดของอาร์เรย์จะถูกเลื่อนไปที่จุดเริ่มต้น เช่น สำหรับแต่ละดัชนีดัชนีจะลดลง 1 วิธีนี้จะส่งคืนค่าขององค์ประกอบที่ถูกลบออกตามผลลัพธ์
ชื่อวาร์ดาวเคราะห์ = ["วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร"]; namePlanets.shift(); // "Venus" console.log(namePlanets); // ["ดาวพุธ", "โลก", "ดาวอังคาร"]
วิธีการ unshift (เพิ่มองค์ประกอบที่จุดเริ่มต้นของอาร์เรย์)
วิธีการ unshift ได้รับการออกแบบมาเพื่อเพิ่มองค์ประกอบที่จุดเริ่มต้นของอาร์เรย์ (ก่อนองค์ประกอบอื่น ๆ ) ค่าขององค์ประกอบนี้ถูกระบุเป็นพารามิเตอร์ของเมธอดนี้ เป็นผลให้วิธีนี้ส่งคืนจำนวนองค์ประกอบในอาร์เรย์โดยคำนึงถึงสิ่งที่เพิ่มเข้าไป
ชื่อวาร์ดาวเคราะห์ = ["ดาวพุธ", "โลก", "ดาวอังคาร", "ดาวพฤหัสบดี"]; namePlanets.unshift("วีนัส"); // 5 console.log(namePlanets); // ["วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร", "ดาวพฤหัสบดี"]
วิธีการแบ่งส่วน (การคัดลอกส่วนของอาร์เรย์)
วิธีการสไลซ์ได้รับการออกแบบมาเพื่อคัดลอกส่วนของอาร์เรย์ อย่างไรก็ตาม มันไม่ได้เปลี่ยนอาร์เรย์เดิม แต่จะส่งคืนผลลัพธ์เป็นอาร์เรย์ใหม่ซึ่งประกอบด้วยองค์ประกอบที่เลือก
วิธีการสไลซ์มี 2 พารามิเตอร์:
- พารามิเตอร์ 1 ตัว (จำเป็น) - มีวัตถุประสงค์เพื่อระบุดัชนีขององค์ประกอบที่จะเริ่มการคัดลอกองค์ประกอบ
- พารามิเตอร์ 2 (ทางเลือก) - มีวัตถุประสงค์เพื่อระบุดัชนีขององค์ประกอบที่จำเป็นในการคัดลอก (ในกรณีนี้ จะไม่รวมอยู่ในอาร์เรย์ใหม่) หากคุณไม่ได้ระบุ องค์ประกอบจนถึงจุดสิ้นสุดของอาร์เรย์ที่ระบุจะถูกคัดลอก
วิธีการประกบกัน (การเปลี่ยนเนื้อหาของอาร์เรย์)
วิธีการประกบกันถูกออกแบบมาเพื่อเปลี่ยนเนื้อหาของอาร์เรย์ สามารถใช้ทั้งเพื่อเพิ่มองค์ประกอบให้กับอาร์เรย์และลบออก
ไวยากรณ์ของวิธีประกบกันคือ:
Array.splice(startIndex, DeleteCount [, element1[, element2[, ...]]]); /* startIndex (จำเป็น) - ดัชนีเริ่มต้นขององค์ประกอบที่จะเริ่มเปลี่ยนอาร์เรย์ หากคุณระบุตัวเลขที่มากกว่าความยาวของอาร์เรย์เป็น startIndex ดัชนีเริ่มต้นจะถูกตั้งค่าไว้ที่ส่วนท้ายของอาร์เรย์ หากคุณระบุจำนวนลบเป็น startIndex องค์ประกอบเริ่มต้นจะถูกนับจากจุดสิ้นสุด DeleteCount (จำเป็น) - ตัวเลขที่ระบุจำนวนองค์ประกอบที่ต้องลบออกจากอาร์เรย์ หากไม่จำเป็นต้องลบองค์ประกอบออกจากอาร์เรย์ จะต้องตั้งค่า DeleteCount เป็น 0 หลังจากนี้ คุณต้องระบุองค์ประกอบใหม่อย่างน้อยหนึ่งองค์ประกอบที่จะเพิ่มลงในอาร์เรย์ หากคุณระบุตัวเลขเป็น DeleteCount ซึ่งจะเกินจำนวนองค์ประกอบที่เหลืออยู่ในอาร์เรย์ โดยเริ่มจาก startIndex ในกรณีนี้ องค์ประกอบเหล่านั้นจะยังคงถูกลบอยู่ (นั่นคือ องค์ประกอบทั้งหมดจนถึงจุดสิ้นสุดของอาร์เรย์ โดยเริ่มจากดัชนีเริ่มต้น) element1, element2, . .. (เป็นทางเลือก) - องค์ประกอบที่ต้องเพิ่มในอาร์เรย์ -
ตัวอย่างการใช้วิธีประกบกัน
การใช้วิธีประกบเพื่อลบองค์ประกอบบางอย่างออกจากอาร์เรย์
ชื่อวาร์ดาวเคราะห์ = ["วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร"]; namePlanets.splice (2, 2); //["Earth", "Mars"] console.log(namePlanets); // ["วีนัส", "ดาวพุธ"]
การใช้วิธีประกบกันเพื่อลบองค์ประกอบออกจากอาร์เรย์และเพิ่มองค์ประกอบใหม่ลงไป
ชื่อวาร์ดาวเคราะห์ = ["วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร"]; namePlanets.splice (1, 1, "ดาวยูเรนัส", "ดาวเนปจูน", "ดาวเสาร์"); // ["ปรอท"] console.log(namePlanets); // ["วีนัส", "ดาวยูเรนัส", "ดาวเนปจูน", "ดาวเสาร์", "โลก", "ดาวอังคาร"]
ใช้วิธีประกบกันเพื่อเพิ่มองค์ประกอบใหม่ให้กับอาร์เรย์เท่านั้น
ชื่อวาร์ดาวเคราะห์ = ["ดาวพฤหัสบดี", "ดาวเสาร์", "ดาวยูเรนัส"]; namePlanets.splice (0, 0, "วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร"); // console.log(namePlanets); // ["วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร", "ดาวพฤหัสบดี", "ดาวเสาร์", "ดาวยูเรนัส"]
วิธีการเข้าร่วม (การแปลงอาร์เรย์เป็นสตริง)
วิธีการรวมถูกออกแบบมาเพื่อรวมองค์ประกอบทั้งหมดของอาร์เรย์เข้ากับสตริง
เข้าร่วมไวยากรณ์วิธีการ:
Array.join(); /* separator (เป็นทางเลือก) - ตัวคั่นที่ใช้เป็นสตริงเชื่อมต่อระหว่างแต่ละองค์ประกอบอาร์เรย์ หากไม่ได้ระบุพารามิเตอร์นี้ `` จะถูกใช้เป็นสตริงการเชื่อมต่อ หากคุณระบุสตริงว่างเป็นพารามิเตอร์ องค์ประกอบอาร์เรย์ในสตริงที่ส่งคืนจะไม่ถูกคั่นด้วยสิ่งใดๆ */
Var berries = ["องุ่น", "องุ่น", "ลูกเกด", "โรสฮิป"]; var berriesStr1 = berries.join(); // "องุ่น, องุ่น, ลูกเกด, โรสฮิป" var berriesStr2 = berries.join(""); // "GrapesGrapesCurrantRosehip" var berriesStr3 = berries.join(", "); // "องุ่น, องุ่น, ลูกเกด, โรสฮิป" var berriesStr4 = berries.join(" + "); // "องุ่น + องุ่น + ลูกเกด + โรสฮิป"
หากคุณใช้สิ่งที่ไม่ใช่สตริงเป็นตัวคั่น ข้อมูลนั้นจะถูกแปลงเป็นสตริง
Var berries = ["องุ่น", "องุ่น", "ลูกเกด", "โรสฮิป"]; var berriesStr1 = berries.join (เท็จ); // "GrapesfalseGrapesfalseCurrantfalseRosehip" var berriesStr2 = berries.join(4/2); // องค์ประกอบอาร์เรย์ "Grapes2Grapes2Currant2Rose Hip" ที่มีค่าว่างหรือไม่ได้กำหนดไว้จะถูกแปลงไปยังสตริงว่าง วาร์ arr = ; var arrStr = arr.join(", "); // "0, 5, -4"
การแปลงสตริงเป็นอาร์เรย์ - แยก
วิธีการแยกได้รับการออกแบบมาเพื่อแปลงสตริงให้เป็นอาร์เรย์ วิธีนี้มีพารามิเตอร์ตัวเดียว ซึ่งคุณสามารถระบุสตริงได้ โดยขึ้นอยู่กับว่าสตริงนี้จะถูกแบ่งออกเป็นอาร์เรย์ของสตริง
Var strElementComputers = "ยูนิตระบบ จอภาพ คีย์บอร์ด เมาส์ ลำโพง เครื่องพิมพ์"; var elementComputers = strElementComputers.split(", "); console.log("จำนวนองค์ประกอบในอาร์เรย์: " + elementComputers.length); สำหรับ (var i=0; i<= elementComputers.length-1; i++) { console.log(i + " элемент массива = " + elementComputers[i]); }
การเรียงลำดับองค์ประกอบอาร์เรย์ใหม่ในลำดับย้อนกลับ - ย้อนกลับ
วิธีการย้อนกลับได้รับการออกแบบมาเพื่อจัดลำดับองค์ประกอบอาร์เรย์ใหม่ในลำดับย้อนกลับ
ชื่อ VarPlanets = อาร์เรย์ใหม่ ("วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร"); namePlanets.reverse (); console.log("จำนวนองค์ประกอบในอาร์เรย์: " + namePlanets.length); สำหรับ (var i=0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }
การเรียงลำดับองค์ประกอบอาร์เรย์ - การเรียงลำดับ
วิธีการเรียงลำดับใช้ในการเรียงลำดับองค์ประกอบอาร์เรย์ ตามค่าเริ่มต้น วิธีการนี้จะเรียงลำดับอาร์เรย์เป็นสตริง
ชื่อ VarPlanets = อาร์เรย์ใหม่ ("วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร"); namePlanets.sort(); console.log("จำนวนองค์ประกอบในอาร์เรย์: " + namePlanets.length); สำหรับ (var i=0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }
21/06/2017 เวลา 12:17 น
ในการคำนวณขนาดของอาร์เรย์ของวัตถุใน JavaScript ให้ใช้คุณสมบัติความยาวของอาร์เรย์
Var arr = ["ครั้งแรก", "วินาที"]; console.log(arr.ความยาว); // 2
อาร์เรย์ในจาวาสคริปต์อาจมีดัชนีหายไป ตัวอย่างเช่น
วาร์อาร์ = ; arr = "ครั้งแรก"; arr = "วินาที";
คุณสมบัติความยาวส่งกลับดัชนีสูงสุดของอาร์เรย์ + 1 นั่นคือ ในตัวอย่างที่กำหนด ความยาว = 5
การคำนวณจำนวนองค์ประกอบในอาร์เรย์ในจาวาสคริปต์
Array.prototype.count = function())( ผลลัพธ์ var = 0; for(var i = 0; i< this.length; i++) if (this[i] != undefined) result++; return result; }
ตัวอย่างการใช้งาน
วาร์อาร์ = ; arr = "ครั้งแรก"; arr = "วินาที"; console.log(arr.count()); //2
คุณยังสามารถกำหนดค่าให้กับคุณสมบัติความยาวได้ ซึ่งจะช่วยให้คุณสามารถลดความยาวของอาร์เรย์ที่มีอยู่ได้
Var arr = ["ครั้งแรก", "วินาที", "ที่สาม"]; arr.ความยาว = 2; console.log(arr); // ["ครั้งแรก", "วินาที"]
การคำนวณขนาดของอาร์เรย์เป็นไบต์ในจาวาสคริปต์
อาร์เรย์เป็นวัตถุปกติ ดังนั้นการคำนวณขนาดของอาร์เรย์เป็นไบต์จึงไม่แตกต่างจากการคำนวณขนาดของวัตถุอื่นๆ ขออภัย javascript ไม่มี API สำหรับการคำนวณขนาด ดังนั้นคุณจะต้องคำนวณด้วยตนเอง ทำได้ดังนี้: เราพิจารณาคุณสมบัติทั้งหมดของวัตถุ หากคุณสมบัติเป็นประเภทดั้งเดิม เราจะเพิ่มขนาดของอินสแตนซ์ประเภทนี้ให้กับผลลัพธ์โดยรวม หากคุณสมบัตินั้นมีวัตถุอยู่ เราจะคำนวณแบบวนซ้ำ ขนาดของมัน.
ฟังก์ชั่น sizeOf(obj) ( var bytes = 0; if(obj !== null && obj !== undefinition) ( switch(typeof obj) ( case "number": bytes += 8; break; case "string": bytes += obj.length * 2; break; case "boolean": ไบต์ += 4;
วิธีการนี้ไม่ถูกต้องและมีปัญหามากมาย เช่น มีความเป็นไปได้ที่จะเข้าสู่วงวนไม่รู้จบ
ในบทความนี้เราจะดูอาร์เรย์ JavaScript มาตรฐานพร้อมดัชนีตัวเลข อาร์เรย์ถูกประกาศโดยใช้วงเล็บเหลี่ยม:
ผลไม้ var = ["แอปเปิ้ล", "ส้ม", "ลา"]
หากต้องการแยกองค์ประกอบ ให้วางดัชนีในวงเล็บเหลี่ยม ดัชนีแรก 0 :
var Fruits = ["Apple", "Orange", "Donkey"] การแจ้งเตือน(ผลไม้) การแจ้งเตือน(ผลไม้) การแจ้งเตือน(ผลไม้)
เรายังสามารถรับความยาวของอาร์เรย์ JavaScript ได้:
var Fruit = ["Apple", "Orange", "Donkey"] alert(fruits.length)
อ๊ะ! เราได้สร้างอาร์เรย์ด้วยผลไม้สองชนิดและลาหนึ่งตัว ตอนนี้เราต้องเอาลาออก
วิธีการป๊อปและพุช
วิธีการป๊อปใน JavaScript จะลบองค์ประกอบออกจากอาร์เรย์และส่งกลับ
ตัวอย่างต่อไปนี้แสดงวิธีการดึงข้อมูล "Donkey" จากอาร์เรย์:
var Fruits = ["Apple", "Orange", "Donkey"] alert("ฉันกำลังลบ "+fruits.pop()) // ตอนนี้เรามีการแจ้งเตือน ["Apple", "Orange"] เท่านั้น ("ตอนนี้ ขนาดของอาร์เรย์ : "+fruits.length) // ลบลาแล้ว
โปรดทราบว่าป๊อปจะแก้ไขอาร์เรย์เอง
คู่ของ Pop คือวิธี push ซึ่งเพิ่มองค์ประกอบให้กับอาร์เรย์ เช่น เราลืมใส่ลูกพีช:
var Fruit = ["แอปเปิ้ล", "ส้ม"] Fruits.push("พีช"); // ตอนนี้เรามีการแจ้งเตือน ["Apple", "Orange", "Peach"] ("องค์ประกอบสุดท้าย:"+ผลไม้)
- สร้างอาเรย์สไตล์ด้วยองค์ประกอบ” แจ๊ส”, “บลูส์”;
- เพิ่มมูลค่า" ร็อคแอนด์โรล«;
- แทนที่ค่าที่สองจากท้ายด้วยค่า " คลาสสิค- คุณควรจะจบลงด้วยอาร์เรย์: “ แจ๊ส”, ”คลาสสิค”, ”ร็อคแอนด์โรล- รหัสควรใช้งานได้กับความยาวอาเรย์เท่าใดก็ได้
- ดึงค่าสุดท้ายจากอาร์เรย์และแสดงผ่าน alert
สารละลาย
// 1 var styles = ["Jazz", "Bluez"] // 2 styles.push("Rock"n"Roll") // หรือ: styles = "Rock"n"Roll" // 3 สไตล์ = "Classic " // 4 การแจ้งเตือน(styles.pop())
วิธีการเปลี่ยน/ไม่เปลี่ยน
วิธีการ shift/unshift ทำงานที่ส่วนท้ายของอาร์เรย์ แต่คุณสามารถใช้ shift เพื่อเลื่อนองค์ประกอบขึ้น ( ค่าแรกของอาร์เรย์จะถูกลบออกโดยการเลื่อนองค์ประกอบ- วิธีการ unshift อนุญาตให้ JavaScript เพิ่มองค์ประกอบให้กับอาร์เรย์จากจุดสิ้นสุด:
var Fruit = ["Apple", "Orange"] var apple = Fruits.shift() // ตอนนี้เรามีเพียง ["Orange"] Fruits.unshift("Lemon") // ตอนนี้เรามี ["Lemon", " Orange"] alert(fruits.length) // 2
ทั้ง shift และ unshift สามารถทำงานได้หลายองค์ประกอบพร้อมกัน:
var Fruit = ["Apple"] Fruits.push("Orange", "Peach") Fruits.unshift("Pineapple","Lemon") // ตอนนี้อาร์เรย์จะมีลักษณะดังนี้: ["Pineapple", "Lemon", "แอปเปิล" ", "ส้ม", "พีช"]
งานที่จัดการด้วยตนเอง
เขียนโค้ดเพื่อแสดงค่าสุ่มจากอาร์เรย์ arr ผ่านการแจ้งเตือน:
var arr = ["พลัม", "ส้ม", "ลา", "แครอท", "จาวาสคริปต์"]
หมายเหตุ: รหัสในการรับตัวเลขสุ่มจากค่าต่ำสุดถึงค่าสูงสุด (รวม) มีดังนี้:
var rand = min + Math.floor(Math.random()*(สูงสุด+1-นาที))
สารละลาย
เราจำเป็นต้องแยกตัวเลขสุ่มจาก 0 ถึง arr.length-1 (รวม):
var arr = ["พลัม", "ส้ม", "ลา", "แครอท", "JavaScript"] var rand = Math.floor(Math.random()*arr.length) alert(arr)
วนซ้ำอาร์เรย์
ใน JavaScript การวนซ้ำผ่านอาร์เรย์ทำได้โดยใช้ for loop:
var Fruit = ["สับปะรด", "มะนาว", "แอปเปิ้ล", "ส้ม", "พีช"] สำหรับ(var i=0; i สร้างฟังก์ชัน find(arr,value) ที่จะค้นหาค่าในอาร์เรย์ที่กำหนดและส่งกลับดัชนีหรือ -1 หากไม่พบค่า ตัวอย่างเช่น: arr = [ "ทดสอบ", 2, 1.5, false ] ค้นหา(arr, "ทดสอบ") // 0 ค้นหา(arr, 2) // 1 ค้นหา(arr, 1.5) // 2 ค้นหา(arr, 0) // -1 วิธีแก้ไขที่เป็นไปได้อาจมีลักษณะดังนี้: ฟังก์ชั่น find(array, value) ( for(var i=0; i แต่สิ่งนี้ไม่ถูกต้องเพราะ == ไม่ได้กำหนดความแตกต่างระหว่าง 0 และ false การใช้ === ถูกต้องมากกว่าเมื่อทำงานกับอาร์เรย์ใน JavaScript นอกจากนี้ มาตรฐาน ES5 ล่าสุดยังมีฟังก์ชัน Array#indexOf อีกด้วย ด้วยสิ่งนี้ เราสามารถกำหนดฟังก์ชันได้ดังนี้: ฟังก์ชั่น find(array, value) ( if (array.indexOf) return array.indexOf(value) for(var i=0; i ฉลาดกว่านั้นคือการกำหนด find ด้วยเงื่อนไขเพื่อตรวจสอบว่ามีเมธอด indexOf อยู่หรือไม่ สร้างฟังก์ชัน filterNumeric(arr) ที่รับอาร์เรย์และส่งกลับอาร์เรย์ใหม่ที่มีเฉพาะค่าตัวเลขจาก arr ตัวอย่างวิธีการทำงาน: arr = ["a", 1, "b", 2]; arr = ตัวกรองตัวเลข (arr); // ตอนนี้ arr = วิธีแก้ไขคือการวนซ้ำผ่านอาร์เรย์และเพิ่มค่าลงในอาร์เรย์ใหม่หากเป็นตัวเลข บางครั้งคุณต้องการวิธีที่รวดเร็วในการแปลงอาร์เรย์ JavaScript เป็นสตริง นี่คือสิ่งที่วิธีการเข้าร่วมมีไว้เพื่อ มันเชื่อมอาร์เรย์เข้ากับสตริงโดยใช้ตัวคั่นที่กำหนด: ผลไม้ var = ["มะนาว", "แอปเปิ้ล", "ส้ม", "พีช"]; var str = Fruits.join(", "); การแจ้งเตือน (str); การแปลงแบบย้อนกลับทำได้ง่าย ๆ โดยใช้วิธีแยก: var Fruits = "แอปเปิล,ส้ม,พีช"; var arr = Fruits.split("); // arr ตอนนี้มี ["Apple", "Orange", "Peach"] alert(arr); วัตถุมีคุณสมบัติ className ซึ่งมีชื่อคลาสคั่นด้วยช่องว่าง: เขียนฟังก์ชัน addClass(obj, cls) ที่เพิ่มคลาส cls แต่เฉพาะในกรณีที่ไม่มีอยู่: ddClass(obj, "new") // obj.className="open menu new" addClass(obj, "open") // ไม่มีการเปลี่ยนแปลง (มีคลาสอยู่แล้ว) addClass(obj, "me") // obj.className= "เปิดเมนู ฉันใหม่" แจ้งเตือน (obj.className) // เราจำเป็นต้องแบ่ง className และ loop ออกเป็นส่วนๆ หากไม่พบคลาส ก็จะถูกเพิ่มเข้าไป ลูปได้รับการปรับให้เหมาะสมเล็กน้อยเพื่อเพิ่มประสิทธิภาพ: ฟังก์ชั่น addClass(elem, cls) ( for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) ( if (c[i] == cls ) กลับ ) elem.className += " "+cls ) var obj = ( className: "open menu" ) addClass(obj, "new") addClass(obj, "open") alert(obj.className) // open menu ใหม่ ในตัวอย่างข้างต้น ตัวแปร c ถูกกำหนดไว้ที่จุดเริ่มต้นของลูป และดัชนีสุดท้ายถูกกำหนดเป็น i ตัวลูปเองก็ถูกประมวลผลในทิศทางตรงกันข้าม โดยลงท้ายด้วยเงื่อนไข i>=0 เพราะ i>=0 ตรวจสอบได้เร็วกว่า i อะไรใน JavaScript ช่วยให้การค้นหาเร็วขึ้นในอาร์เรย์ การใช้คุณสมบัติ length คุณสามารถตัดทอนอาร์เรย์ได้ดังนี้: คุณระบุความยาวและเบราว์เซอร์จะตัดทอนอาร์เรย์ อันที่จริง ใน JavaScript อาร์เรย์คือออบเจ็กต์ พร้อมด้วยการตั้งค่าความยาวอัตโนมัติและวิธีการพิเศษ สิ่งนี้แตกต่างจากแนวคิดในภาษาอื่นๆ โดยที่อาร์เรย์แสดงถึงส่วนที่ต่อเนื่องกันของหน่วยความจำ นอกจากนี้ยังแตกต่างจากคิวหรือสแต็กตามรายการที่เชื่อมโยง กุญแจคือตัวเลข แต่สามารถมีชื่ออะไรก็ได้: arr = arr = 5 arr.prop = 10 // อย่าทำแบบนี้ ใน JavaScript อาร์เรย์คือตารางแฮช ซึ่งมีข้อดีด้านประสิทธิภาพ แต่ก็มีข้อเสียบางประการเช่นกัน ตัวอย่างเช่น การกด/ป๊อปใช้งานได้เฉพาะกับองค์ประกอบด้านนอกสุดของอาร์เรย์เท่านั้น ดังนั้นจึงรวดเร็วอย่างเหลือเชื่อ push ใช้งานได้กับจุดสิ้นสุดเท่านั้น: var arr = ["ของฉัน", "array"] arr.push("something") alert(arr) // string "array" วิธีการ shift/unshift ทำงานช้าเนื่องจากจำเป็นต้องกำหนดหมายเลขอาร์เรย์ใหม่ทั้งหมด วิธีการประกบกันอาจทำให้การกำหนดหมายเลขเปลี่ยนแปลงได้: ผลลัพธ์จะเป็นอย่างไร? ทำไม arr = ["a", "b"] arr.push(function() ( alert(this) )) arr() // ? เนื่องจากอาร์เรย์เป็นวัตถุ arr ..จริงๆ แล้วเป็นการเรียกเมธอดบนวัตถุเช่น obj วิธี: arr() // เหมือนกับ arr() // ไวยากรณ์ไม่ถูกต้อง แต่แนวคิดเหมือนกัน: arr.2() // เขียนใหม่ในรูปแบบเดียวกับ obj.method() this = arr ในกรณีนี้จะถูกส่งผ่านไปยังฟังก์ชัน ดังนั้นเนื้อหาของ arr จึงถูกพิมพ์ arr = ["a", "b"] arr.push(function() ( alert(this) )) arr() // "a", "b",ฟังก์ชั่น คุณสมบัติ length ช่วยให้คุณไม่ได้ขนาดของอาร์เรย์ใน JavaScript แต่เป็นดัชนีสุดท้าย + 1 นี่เป็นสิ่งสำคัญเมื่อเราพูดถึงอาร์เรย์แบบกระจาย โดยมี “ช่องว่าง” ในดัชนี ในตัวอย่างต่อไปนี้ เราจะเพิ่มสององค์ประกอบลงในผลไม้เปล่า แต่ค่าความยาวจะยังคงอยู่ 100 : var Fruits = // Empty array Fruit = "Peach" Fruit = "Apple" alert(fruits.length) // 100 (แต่ใน Array มีเพียง 2 องค์ประกอบเท่านั้น) หากคุณพยายามส่งออกอาร์เรย์แบบกระจายเบราว์เซอร์จะส่งคืนค่าดัชนีที่หายไปเป็นองค์ประกอบว่าง: var Fruits = // อาร์เรย์ว่าง Fruit = "Peach" Fruit = "Apple" alert(fruits) // ,Peach,Apple (หรืออะไรประมาณนั้น) แต่อาร์เรย์เป็นวัตถุที่มีสองคีย์ ค่าที่หายไปจะไม่กินพื้นที่ อาร์เรย์แบบกระจัดกระจายทำงานแปลก ๆ เมื่อใช้วิธีการแบบอาร์เรย์กับอาร์เรย์เหล่านั้น พวกเขาไม่รู้ว่าดัชนีหายไป: var Fruits = Fruit = "Peach" Fruit = "Apple" alert(fruits.pop()) // pop "Apple" (เพื่อจัดทำดัชนี 9) alert(fruits.pop()) // ป๊อปองค์ประกอบที่ไม่ระบุ (เพื่อจัดทำดัชนี 8 ) พยายามหลีกเลี่ยงอาร์เรย์กระจัดกระจาย ไม่ว่าในกรณีใดวิธีการของพวกเขาจะไม่ทำงานตามปกติ ใช้วัตถุแทน ดังที่เราทราบ อาร์เรย์คือวัตถุ ดังนั้นเราจึงสามารถใช้ Delete เพื่อลบค่าได้: var arr = ["ไป", "ถึง", "บ้าน"] ลบ arr // ตอนนี้ arr = ["ไป", ไม่ได้กำหนด, "บ้าน"] การแจ้งเตือน (arr) // ไม่ได้กำหนดไว้ คุณจะเห็นว่าค่านั้นถูกลบออก แต่ไม่ใช่ในลักษณะที่เราต้องการ เนื่องจากอาร์เรย์มีองค์ประกอบที่ไม่ระบุ ตัวดำเนินการลบจะลบคู่คีย์-ค่า เท่านี้ก็เรียบร้อย โดยปกติแล้ว เนื่องจากอาร์เรย์เป็นเพียงแฮช ตำแหน่งขององค์ประกอบที่ถูกลบออกจึงไม่ได้ถูกกำหนดไว้ บ่อยครั้งที่เราจำเป็นต้องลบองค์ประกอบโดยไม่ทิ้ง "ช่องว่าง" ไว้ระหว่างดัชนี มีวิธีการอื่นที่จะช่วยเราในเรื่องนี้ วิธีการประกบสามารถลบองค์ประกอบและแทนที่ในอาร์เรย์หลายมิติ JavaScript ไวยากรณ์ของมันคือ: arr.splice(ดัชนี, DeleteCount[, elem1, ..., elemN]) ลบองค์ประกอบ DeleteCount โดยเริ่มต้นที่ดัชนี จากนั้นแทรก elem1, ..., elemN แทนที่ ลองดูตัวอย่างบางส่วน: var arr = ["Go", "to", "home"] arr.splice(1, 1) // ลบ 1 องค์ประกอบเริ่มต้นที่ดัชนี 1 alert(arr.join(",")) // ["Go " , "บ้าน"] (ลบองค์ประกอบ 1 รายการ) ดังนั้นคุณสามารถใช้ splice เพื่อลบองค์ประกอบหนึ่งออกจากอาร์เรย์ได้ หมายเลของค์ประกอบอาร์เรย์จะถูกเลื่อนเพื่อเติมช่องว่าง: var arr = ["Go", "to", "home"] arr.splice(0, 1) // ลบ 1 องค์ประกอบ โดยเริ่มจากดัชนี 0 alert(arr) // "to" กลายเป็นองค์ประกอบแรก ตัวอย่างต่อไปนี้แสดงวิธีการแทนที่องค์ประกอบ: วิธีการประกบกันส่งกลับอาร์เรย์ขององค์ประกอบที่ถูกลบออก: var arr = ["ไป", "ไป", "บ้าน", "ตอนนี้"]; // ลบ 2 องค์ประกอบแรก var Remove = arr.splice(0, 2) alert(removed) // "Go", "to"<-- массив удаленных элементов
splice может вставлять элементы, задайте 0 для deleteCount.
var arr = ["Go", "to", "home"];
// со второй позиции
// удаляем 0
// и вставляем "my", "sweet"
arr.splice(2, 0, "my", "sweet")
alert(arr) // "Go", "to", "my", "sweet", "home" วิธีนี้ยังสามารถใช้ดัชนีเชิงลบ ซึ่งนับจากจุดสิ้นสุดของอาร์เรย์: var arr = // สำหรับองค์ประกอบ -1 (สุดท้าย) // ลบ 0 องค์ประกอบ // และใส่ 3 และ 4 arr.splice(-1, 0, 3, 4) alert(arr) // 1,2,3, 4.5 วัตถุมีคุณสมบัติ className ซึ่งมีชื่อคลาสคั่นด้วยช่องว่าง: var obj = (ชื่อคลาส: "เปิดเมนู") เขียนฟังก์ชัน RemoveClass(obj, cls) ที่จะลบคลาส cls หากได้รับ: RemoveClass(obj, "open") // obj.className="menu" RemoveClass(obj, "blabla") // ไม่มีการเปลี่ยนแปลง (ไม่มีคลาสให้ลบ) คุณต้องแบ่ง className ออกเป็นส่วนๆ และวนซ้ำส่วนต่างๆ เหล่านี้ หากพบรายการที่ตรงกัน รายการนั้นจะถูกลบออกจากอาร์เรย์ JavaScript ของออบเจ็กต์ จากนั้นจึงเพิ่มกลับเข้าไปที่ส่วนท้าย มาเพิ่มประสิทธิภาพกันหน่อย: ฟังก์ชั่น RemoveClass(elem, cls) ( for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) ( if (c[i] == cls ) c.splice(i,1) ) elem.className = c.join(" ") ) var obj = ( className: "open menu" ) การแจ้งเตือน RemoveClass(obj, "open") RemoveClass(obj, "blabla") (obj.className) // เมนู ในตัวอย่างข้างต้น ตัวแปร c ถูกตั้งค่าไว้ที่จุดเริ่มต้นของลูป และ i ถูกตั้งค่าเป็นดัชนีสุดท้าย ตัวลูปเองจะวิ่งไปในทิศทางตรงกันข้าม โดยลงท้ายด้วยเงื่อนไข i>=0 สิ่งนี้เสร็จสิ้นเพราะ i>=0 ถูกตรวจสอบเร็วกว่า i ซึ่งทำให้การค้นหาคุณสมบัติใน c เร็วขึ้น คุณสามารถแยกส่วนของอาร์เรย์โดยใช้เมธอด Slice(begin[, end]): var arr = ["ทำไม", "เรียนรู้", "JavaScript"]; var arr2 = arr.slice(0,2) // รับ 2 องค์ประกอบ เริ่มต้นที่ 0 alert(arr2.join(", ")) // "ทำไม เรียนรู้" โปรดทราบว่าวิธีนี้ไม่ได้เปลี่ยนจำนวนองค์ประกอบในอาร์เรย์ใน JavaScript แต่คัดลอกบางส่วน คุณสามารถละเว้นอาร์กิวเมนต์ที่สองเพื่อรับองค์ประกอบทั้งหมดเริ่มต้นที่ดัชนีเฉพาะ: var arr = ["ทำไม", "เรียนรู้", "JavaScript"]; var arr2 = arr.slice(1) // รับองค์ประกอบทั้งหมดโดยเริ่มจาก 1 alert(arr2.join(", ")) // "learn, JavaScript" วิธีการนี้รองรับดัชนีเชิงลบ เช่นเดียวกับ String#slice อีกวิธีที่มีประโยชน์คือย้อนกลับ สมมติว่าฉันต้องการได้ส่วนสุดท้ายของโดเมนเช่น " ดอทคอม" จาก " my.site.com- ต่อไปนี้เป็นวิธีดำเนินการ: var domain = "my.site.com" var สุดท้าย = domain.split(".").reverse() การแจ้งเตือน (สุดท้าย) โปรดทราบว่าอาร์เรย์ JavaScript รองรับไวยากรณ์ที่ซับซ้อน (ย้อนกลับ()) สำหรับการเรียกเมธอดแล้วดึงองค์ประกอบจากอาร์เรย์ผลลัพธ์ คุณสามารถสร้างการโทรที่ยาวขึ้นเช่น Reverse() 0] arr.sort() การแจ้งเตือน (arr) // 1, 15, 2 เรียกใช้โค้ดข้างต้น คุณจะได้รับคำสั่งซื้อ 1, 15, 2. เนื่องจากวิธีการแปลงทุกอย่างเป็นสตริงและใช้ลำดับพจนานุกรมตามค่าเริ่มต้นงานที่จัดการด้วยตนเอง
สารละลาย
งานที่จัดการด้วยตนเอง
สารละลาย
เข้าร่วมและแยก
งานที่จัดการด้วยตนเอง
สารละลาย
การใช้ความยาวเพื่อตัดแต่งอาร์เรย์
อาร์เรย์ก็คือวัตถุ แล้วมันหมายความว่าอะไร?
คีย์อาร์เรย์ที่ไม่ใช่ตัวเลข
ดังนั้น shift/unshift จึงช้ากว่า push/pop ยิ่งอาร์เรย์มีขนาดใหญ่เท่าใด JavaScript ก็จะยิ่งใช้เวลานานในการจัดเรียงอาร์เรย์มากขึ้นเท่านั้น งานที่จัดการด้วยตนเอง
สารละลาย
อาร์เรย์แบบกระจาย คำอธิบายความยาว
การลบออกจากอาร์เรย์
วิธีการประกบกัน
งานที่จัดการด้วยตนเอง
สารละลาย
วิธีชิ้น
วิธีย้อนกลับ
