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

อาร์เรย์ใน 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 (ทางเลือก) - มีวัตถุประสงค์เพื่อระบุดัชนีขององค์ประกอบที่จำเป็นในการคัดลอก (ในกรณีนี้ จะไม่รวมอยู่ในอาร์เรย์ใหม่) หากคุณไม่ได้ระบุ องค์ประกอบจนถึงจุดสิ้นสุดของอาร์เรย์ที่ระบุจะถูกคัดลอก

var namePlanets = ["วีนัส", "ดาวพุธ", "โลก", "ดาวอังคาร", "ดาวพฤหัสบดี"]; var newNamePlanets = namePlanets.slice (2, 4); // ["โลก", "ดาวอังคาร"]

วิธีการประกบกัน (การเปลี่ยนเนื้อหาของอาร์เรย์)

วิธีการประกบกันถูกออกแบบมาเพื่อเปลี่ยนเนื้อหาของอาร์เรย์ สามารถใช้ทั้งเพื่อเพิ่มองค์ประกอบให้กับอาร์เรย์และลบออก

ไวยากรณ์ของวิธีประกบกันคือ:

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": bytes += 4; break; case "object": for(var key in obj) ( bytes += sizeOf(obj); ) break; ) ) return bytes ; );

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

อัปเดตครั้งล่าสุด: 03/26/2018

วัตถุ Array แสดงถึงอาร์เรย์และมีคุณสมบัติและวิธีการหลายอย่างที่เราสามารถจัดการอาร์เรย์ได้

การเริ่มต้นอาร์เรย์

คุณสามารถสร้างอาร์เรย์ว่างได้โดยใช้วงเล็บเหลี่ยมหรือตัวสร้างอาร์เรย์:

ผู้ใช้ Var = อาร์เรย์ใหม่ (); var คน = ; console.log(ผู้ใช้); // Array console.log(คน); //อาร์เรย์

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

ผู้ใช้ Var = new Array("Tom", "Bill", "Alice"); var people = ["แซม", "จอห์น", "เคท"]; console.log(ผู้ใช้); // ["ทอม", "บิล", "อลิซ"] console.log(people); // ["แซม", "จอห์น", "เคท"]

คุณสามารถกำหนดอาร์เรย์และเพิ่มองค์ประกอบใหม่ลงไปได้เรื่อยๆ:

ผู้ใช้ Var = อาร์เรย์ใหม่ (); users = "ทอม"; ผู้ใช้ = "เคท"; console.log(ผู้ใช้); // "Tom" console.log (ผู้ใช้); //ไม่ได้กำหนด

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

ความยาว

หากต้องการทราบความยาวของอาร์เรย์ ให้ใช้คุณสมบัติ length ดังนี้

Var ผลไม้ = อาร์เรย์ใหม่ (); ผลไม้ = "แอปเปิ้ล"; ผลไม้ = "ลูกแพร์"; ผลไม้ = "พลัม"; document.write("ในอาร์เรย์ผลไม้ " + ผลไม้ความยาว + " องค์ประกอบ:
"); สำหรับ (var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

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

ผู้ใช้ Var = อาร์เรย์ใหม่ (); // มี 0 องค์ประกอบในอาร์เรย์ users = "Tom"; ผู้ใช้ = "เคท"; ผู้ใช้ = "แซม"; สำหรับ (var i=0; i

เอาต์พุตเบราว์เซอร์:

ทอม เคท ไม่ได้กำหนด ไม่ได้กำหนด แซม

แม้ว่าเราไม่ได้เพิ่มองค์ประกอบสำหรับดัชนี 2 และ 3 แต่ความยาวของอาร์เรย์ในกรณีนี้จะเป็นหมายเลข 5 เพียงแต่องค์ประกอบที่มีดัชนี 2 และ 3 จะมีค่า undefined

การคัดลอกอาร์เรย์ ชิ้น()

การคัดลอกอาร์เรย์อาจเป็นแบบตื้นหรือตื้น (สำเนาตื้น) และลึก (สำเนาลึก)

สำหรับการคัดลอกแบบตื้น ก็เพียงพอแล้วที่จะกำหนดค่าให้กับตัวแปรอื่นที่เก็บอาร์เรย์:

ผู้ใช้ Var = ["ทอม", "แซม", "บิล"]; console.log(ผู้ใช้); // ["ทอม", "แซม", "บิล"] var people = users; // คนคัดลอกตื้น = "ไมค์"; // เปลี่ยนองค์ประกอบที่สอง console.log(users); // ["ทอม", "ไมค์", "บิล"]

ในกรณีนี้ ตัวแปร people หลังจากการคัดลอก จะชี้ไปที่อาร์เรย์เดียวกันกับตัวแปร users ดังนั้นเมื่อเปลี่ยนองค์ประกอบในบุคคล องค์ประกอบในผู้ใช้ก็จะเปลี่ยนไปด้วย เนื่องจากจริงๆ แล้วมันเป็นอาร์เรย์เดียวกัน

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

ผู้ใช้ Var = ["ทอม", "แซม", "บิล"]; console.log(ผู้ใช้); // ["ทอม", "แซม", "บิล"] var people = users.slice(); // คัดลอกคนลึก = "ไมค์"; // เปลี่ยนองค์ประกอบที่สอง console.log(users); // ["ทอม", "แซม", "บิล"] console.log(people); // ["ทอม", "ไมค์", "บิล"]

ในกรณีนี้ หลังจากการคัดลอก ตัวแปรจะชี้ไปที่อาร์เรย์ที่แตกต่างกัน และเราสามารถเปลี่ยนพวกมันแยกจากกันได้

Slice() วิธีการยังช่วยให้คุณสามารถคัดลอกส่วนหนึ่งของอาร์เรย์:

ผู้ใช้ Var = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var people = users.slice(1, 4); console.log(คน); // ["แซม", "บิล", "อลิซ"]

วิธีการ Slice() ถูกส่งผ่านดัชนีเริ่มต้นและสิ้นสุดซึ่งใช้ในการดึงค่าจากอาร์เรย์ นั่นคือในกรณีนี้ การเลือกในอาร์เรย์ใหม่จะเปลี่ยนจากดัชนี 1 ไปเป็นดัชนี 4 โดยไม่รวม และเนื่องจากการจัดทำดัชนีอาร์เรย์เริ่มต้นจากศูนย์ อาร์เรย์ใหม่จะมีองค์ประกอบที่สอง สาม และสี่

ดัน()

push() วิธีการเพิ่มองค์ประกอบที่ส่วนท้ายของอาร์เรย์:

วาร์ผลไม้ = ; Fruit.push("แอปเปิ้ล"); ผลไม้.push("ลูกแพร์"); ผลไม้.push("พลัม"); Fruit.push("เชอร์รี่", "แอปริคอท
"); document.write(ผลไม้); // แอปเปิ้ล, ลูกแพร์, พลัม, เชอร์รี่, แอปริคอต

โผล่()

pop() วิธีการลบองค์ประกอบสุดท้ายออกจากอาร์เรย์:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม"]; var LastFruit = ผลไม้.ป๊อป(); // แยกองค์ประกอบสุดท้ายออกจากอาร์เรย์ document.write(lastFruit + "
"); document.write("ในอาร์เรย์ผลไม้ " + ผลไม้ ความยาว + " องค์ประกอบ:
"); สำหรับ (var i=0; i ");

เอาต์พุตเบราว์เซอร์:

พลัม ผลไม้มี 2 องค์ประกอบ ได้แก่ แอปเปิ้ล ลูกแพร์

กะ()

shift() วิธีการดึงและลบองค์ประกอบแรกออกจากอาร์เรย์:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม"]; var firstFruit = ผลไม้.shift(); document.write(firstFruit + "
"); document.write("ในอาร์เรย์ผลไม้ " + ผลไม้ ความยาว + " องค์ประกอบ:
"); สำหรับ (var i=0; i ");

เอาต์พุตเบราว์เซอร์:

แอปเปิ้ล ผลไม้มี 2 องค์ประกอบ ได้แก่ ลูกแพร์ พลัม

ยกเลิกการเลื่อน()

unshift() วิธีการเพิ่มองค์ประกอบใหม่ที่จุดเริ่มต้นของอาร์เรย์:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม"]; ผลไม้.unshift("แอปริคอต"); document.write(ผลไม้);

เอาต์พุตเบราว์เซอร์:

แอปริคอต แอปเปิ้ล ลูกแพร์ พลัม

การลบองค์ประกอบตามดัชนี ประกบกัน()

splice() วิธีการลบองค์ประกอบที่ดัชนีเฉพาะ ตัวอย่างเช่น การลบองค์ประกอบออกจากดัชนีที่สาม:

ผู้ใช้ Var = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var ถูกลบ = users.splice(3); console.log(ลบแล้ว); // [ "อลิซ", "เคท" ] console.log(ผู้ใช้); // [ "ทอม", "แซม", "บิล" ]

วิธีการชิ้นส่งกลับองค์ประกอบที่ถูกลบออก

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

ผู้ใช้ Var = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var ถูกลบ = users.splice(-1); console.log(ลบแล้ว); // [ "Kate" ] console.log(ผู้ใช้); // [ "ทอม", "แซม", "บิล", "อลิซ" ]

วิธีการเวอร์ชันเพิ่มเติมช่วยให้คุณสามารถระบุดัชนีสิ้นสุดสำหรับการลบได้ ตัวอย่างเช่น ลองลบดัชนีตัวแรกถึงตัวที่สาม:

ผู้ใช้ Var = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var ถูกลบ = users.splice(1,3); console.log(ลบแล้ว); // [ "Sam", "Bill", "Alice" ] console.log(ผู้ใช้); // [ "ทอม", "เคท" ]

วิธีการประกบเวอร์ชันอื่นช่วยให้คุณสามารถแทรกองค์ประกอบใหม่แทนองค์ประกอบที่ถูกลบ:

ผู้ใช้ Var = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var ถูกลบ = users.splice(1,3, "แอน", "บ๊อบ"); console.log(ลบแล้ว); // [ "Sam", "Bill", "Alice" ] console.log(ผู้ใช้); // [ "ทอม", "แอน", "บ๊อบ", "เคท" ]

ในกรณีนี้ เราจะลบสามองค์ประกอบจากดัชนีที่ 1 ถึง 3 และแทรกสององค์ประกอบแทน

เชื่อมต่อ()

concat() วิธีการใช้ในการรวมอาร์เรย์:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม"]; ผัก var = ["มะเขือเทศ", "แตงกวา", "มันฝรั่ง"]; ผลิตภัณฑ์ var = Fruit.concat(ผัก); สำหรับ (var i=0; i< products.length; i++) document.write(products[i] + "
");

ในกรณีนี้ ไม่จำเป็นต้องรวมเฉพาะอาร์เรย์ประเภทเดียวกันเท่านั้น สามารถทำได้หลายประเภท:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม"]; ราคา var = ; ผลิตภัณฑ์ var = Fruit.concat(ราคา);

เข้าร่วม()

join() วิธีการรวมองค์ประกอบทั้งหมดของอาร์เรย์เป็นสตริงเดียว:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม", "แอปริคอต", "ลูกพีช"]; var FruitString = Fruit.join(", "); document.write(fruitString);

join() วิธีการถูกส่งผ่านตัวคั่นระหว่างองค์ประกอบอาร์เรย์ ในกรณีนี้ จะใช้เครื่องหมายจุลภาคและช่องว่าง (", ") เป็นตัวคั่น

เรียงลำดับ()

sort() วิธีการเรียงลำดับอาร์เรย์จากน้อยไปหามาก:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม", "แอปริคอต", "ลูกพีช"]; ผลไม้.sort(); สำหรับ (var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

เอาต์พุตเบราว์เซอร์:

แอปริคอต ลูกแพร์ ลูกพีช พลัม แอปเปิ้ล

ย้อนกลับ()

Reverse() วิธีการกลับอาร์เรย์ไปข้างหลัง:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม", "แอปริคอต", "ลูกพีช"]; ผลไม้.ย้อนกลับ(); สำหรับ (var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

เอาต์พุตเบราว์เซอร์:

ลูกพีช แอปริคอต พลัม ลูกแพร์ แอปเปิ้ล

เมื่อใช้ร่วมกับวิธีการ sort() คุณสามารถเรียงลำดับอาร์เรย์จากมากไปน้อยได้:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม", "แอปริคอต", "ลูกพีช"]; ผลไม้.sort().ย้อนกลับ(); สำหรับ (var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

เอาต์พุตเบราว์เซอร์:

แอปเปิ้ล ลูกพีช ลูกแพร์ แอปริคอต

ค้นหาดัชนีขององค์ประกอบ

วิธีการindexOf()และlastIndexOf()ส่งคืนดัชนีของการรวมองค์ประกอบครั้งแรกและครั้งสุดท้ายในอาร์เรย์ ตัวอย่างเช่น:

ผลไม้ Var = ["แอปเปิ้ล", "ลูกแพร์", "ลูกพลัม", "แอปเปิ้ล", "ลูกแพร์"]; var firstIndex = Fruit.indexOf("แอปเปิ้ล"); var LastIndex = Fruit.lastIndexOf("แอปเปิ้ล"); var otherIndex = Fruit.indexOf("เชอร์รี่"); document.write(firstIndex); // 0 document.write(lastIndex); // 3 document.write(otherIndex); // -1

firstIndex มีค่าเป็น 0 เนื่องจากการรวมบรรทัด "apples" ครั้งแรกในอาร์เรย์อยู่ที่ดัชนี 0 และสุดท้ายอยู่ที่ดัชนี 3

หากองค์ประกอบไม่อยู่ในอาร์เรย์ ในกรณีนี้เมธอด indexOf() และ LastIndexOf() จะส่งกลับค่า -1

ทั้งหมด()

every() วิธีการตรวจสอบว่าองค์ประกอบทั้งหมดตรงกับเงื่อนไขบางอย่างหรือไม่:

หมายเลขวาร์ = [ 1, -12, 8, -4, 25, 42 ]; เงื่อนไขของฟังก์ชัน (ค่า, ดัชนี, อาร์เรย์) ( var result = false; if (value > 0) ( result = true; ) ส่งคืนผลลัพธ์; ); var ที่ผ่าน = number.every (เงื่อนไข); document.write(ผ่าน); // เท็จ

เมธอด every() ถูกส่งผ่านฟังก์ชันที่แสดงถึงเงื่อนไขเป็นพารามิเตอร์ ฟังก์ชันนี้รับพารามิเตอร์สามตัว:

เงื่อนไขฟังก์ชัน(ค่า, ดัชนี, อาร์เรย์) ( )

พารามิเตอร์ value แสดงถึงองค์ประกอบอาร์เรย์ปัจจุบันที่กำลังวนซ้ำ พารามิเตอร์ดัชนีแสดงถึงดัชนีขององค์ประกอบนั้น และพารามิเตอร์อาร์เรย์ส่งผ่านการอ้างอิงไปยังอาร์เรย์

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

ด้วยเหตุนี้ เมื่อเรียกใช้เมธอด Numbers.every(condition) มันจะวนซ้ำองค์ประกอบทั้งหมดของอาร์เรย์ Numbers และส่งต่อไปทีละรายการไปยังฟังก์ชัน Condition หากฟังก์ชันนี้คืนค่าเป็นจริงสำหรับองค์ประกอบทั้งหมด ดังนั้นเมธอด every() จะคืนค่าเป็นจริง หากองค์ประกอบอย่างน้อยหนึ่งรายการไม่ตรงกับเงื่อนไข ดังนั้นเมธอด every() จะส่งกลับค่า false

บาง()

เมธอด some() นั้นคล้ายคลึงกับเมธอด every() เพียงแต่จะตรวจสอบว่าองค์ประกอบอย่างน้อยหนึ่งรายการตรงกับเงื่อนไขหรือไม่ และในกรณีนี้ some() วิธีการคืนค่า true หากไม่มีองค์ประกอบที่ตรงกับเงื่อนไขในอาร์เรย์ จะส่งคืนค่า false:

หมายเลขวาร์ = [ 1, -12, 8, -4, 25, 42 ]; เงื่อนไขของฟังก์ชัน (ค่า, ดัชนี, อาร์เรย์) ( var result = false; if (value === 8) ( result = true; ) ส่งคืนผลลัพธ์; ); var ที่ผ่าน = number.some (เงื่อนไข); // จริง

กรอง()

เมธอด filter() เช่น some() และ every() ยอมรับฟังก์ชันเงื่อนไข แต่ในขณะเดียวกัน ก็จะส่งคืนอาร์เรย์ขององค์ประกอบที่ตรงตามเงื่อนไขนี้:

หมายเลขวาร์ = [ 1, -12, 8, -4, 25, 42 ]; เงื่อนไขของฟังก์ชัน (ค่า, ดัชนี, อาร์เรย์) ( var result = false; if (value > 0) ( result = true; ) ส่งคืนผลลัพธ์; ); var filteredNumbers = number.filter(เงื่อนไข); สำหรับ (var i=0; i< filteredNumbers.length; i++) document.write(filteredNumbers[i] + "
");

เอาต์พุตเบราว์เซอร์:

1 8 25 42

forEach() และแผนที่()

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

หมายเลขวาร์ = [1, 2, 3, 4, 5, 6]; สำหรับ (var i = 0; i "); }

แต่การใช้เมธอด forEach() จะทำให้โครงสร้างนี้ง่ายขึ้น:

หมายเลขวาร์ = [1, 2, 3, 4, 5, 6]; ฟังก์ชั่นสแควร์(ค่า, ดัชนี, อาร์เรย์) ( var result = value * value; document.write("กำลังสองของตัวเลข " + ​​value + " คือ " + result + "
"); ); number.forEach(สี่เหลี่ยมจัตุรัส);

เมธอด forEach() จะใช้ฟังก์ชันเดียวกันเป็นพารามิเตอร์ ซึ่งเมื่อวนซ้ำองค์ประกอบ องค์ประกอบปัจจุบันที่กำลังวนซ้ำจะถูกส่งผ่านและดำเนินการกับองค์ประกอบนั้น

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

ตัวอย่างเช่น ลองใช้วิธี map เพื่อคำนวณกำลังสองของตัวเลขในอาร์เรย์:

หมายเลขวาร์ = [1, 2, 3, 4, 5, 6]; ฟังก์ชั่นสแควร์ (ค่า, ดัชนี, อาร์เรย์) ( return result = value * value; ); var squareArray = ตัวเลข.แผนที่ (สี่เหลี่ยมจัตุรัส); document.write(squareArray);

ฟังก์ชันที่ส่งผ่านไปยังเมธอด map() จะได้รับองค์ประกอบปัจจุบันที่ถูกวนซ้ำ ดำเนินการกับมัน และส่งกลับค่าบางส่วน จากนั้นค่านี้จะเข้าไปใน squareArray ที่เป็นผลลัพธ์

ในบทความนี้เราจะดูอาร์เรย์ 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"] ("องค์ประกอบสุดท้าย:"+ผลไม้)

1. สร้างอาเรย์สไตล์ด้วยองค์ประกอบ” แจ๊ส”, “บลูส์”;
2. เพิ่มมูลค่า" ร็อคแอนด์โรล«;
3. แทนที่ค่าที่สองจากท้ายด้วยค่า " คลาสสิค". คุณควรจะจบลงด้วยอาร์เรย์: “ แจ๊ส”, ”คลาสสิค”, ”ร็อคแอนด์โรล" รหัสควรใช้งานได้กับความยาวอาเรย์เท่าใดก็ได้
4. ดึงค่าสุดท้ายจากอาร์เรย์และแสดงผ่าน 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"] Fruit.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 = Fruit.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/pop ใช้งานได้กับองค์ประกอบด้านนอกสุดของอาร์เรย์เท่านั้น ดังนั้นจึงรวดเร็วอย่างเหลือเชื่อ

push ใช้งานได้กับจุดสิ้นสุดเท่านั้น:

var arr = ["ของฉัน", "array"] arr.push("something") alert(arr) // string "array"

วิธีการ shift/unshift ทำงานช้าเนื่องจากจำเป็นต้องกำหนดหมายเลขอาร์เรย์ใหม่ทั้งหมด วิธีการประกบกันอาจทำให้การกำหนดหมายเลขเปลี่ยนแปลงได้:

ดังนั้น shift/unshift จึงช้ากว่า push/pop ยิ่งอาร์เรย์มีขนาดใหญ่เท่าใด JavaScript ก็จะยิ่งใช้เวลานานในการจัดเรียงอาร์เรย์มากขึ้นเท่านั้น

งานที่จัดการด้วยตนเอง

ผลลัพธ์จะเป็นอย่างไร? ทำไม

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 removal = 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. เนื่องจากวิธีการแปลงทุกอย่างเป็นสตริงและใช้ลำดับพจนานุกรมตามค่าเริ่มต้น