การสร้างแถวลำดับ
ข้อมูลชนิด
แถวลำดับ หรือ
อาเรย์ (array)
คือออบเจ็กต์ชนิดหนึ่งที่เอาข้อมูลหลายๆตัวมาเรียงต่อกันอย่างมีลำดับ
สามารถใช้ตัวเลขอ้างอิงเพื่อเข้าถึงข้อมูลข้างในได้
ในหลายภาษาส่วนใหญ่ถือว่าแถวลำดับเป็นข้อมูลชนิดหนึ่งแยกเป็นคนละประเภทกันกับแถวลำดับแบบจับคู่
แต่ในจาวาสคริปต์ แถวลำดับถือว่าเป็นรูปแบบหนึ่งของข้อมูลชนิดออบเจ็กต์ ถ้าใช้
typeof จะพบว่าได้คำตอบเป็น object
แถวลำดับเหมือนกับออบเจ็กต์ธรรมดาตรงที่เป็นข้อมูลประเภทที่รวมเอากลุ่มข้อมูลต่างๆเข้าไว้ด้วยกัน
แต่ข้อแตกต่างก็คือ แถวลำดับจะเรียงข้อมูลข้างในอย่างมีลำดับ
เวลาจะเข้าถึงข้อมูลข้างในจะใช้ตัวเลขลำดับเพื่ออ้างอิงข้อมูลในนั้น
เวลาสร้างแถวลำดับจะใช้วงเล็บเหลี่ยมล้อม
แล้วใส่ข้อมูลทั้งหมดที่ต้องการรวมอยู่ในกลุ่มโดยคร่อมด้วยจุลภาค ,
var arkao = ["๙.๙", '九点九', 9.9];
alert(typeof arkao); // ได้ object
เวลาใช้ alert จะสามารถเห็นสมาชิกที่อยู่ข้างในทั้งหมด โดยทุกตัวกั้นด้วยจุลภาค ,
แบบไม่มีเว้นวรรค
alert(arkao); // ได้ ๙.๙,九点九,9.9
ข้อมูลที่ใส่จะเป็นชนิดใดก็ได้ เช่นตัวเลข สายอักขระ และอาจใส่ปนๆกัน
ไม่จำเป็นต้องเป็นชนิดเดียวกันทั้งหมด
เวลาจะเข้าถึงข้อมูลข้างในแถวลำดับสามารถทำได้โดยใส่ตัวเลขลำดับข้อมูลในวงเล็บเหลี่ยม
โดยจะเริ่มนับจาก 0 ตัวแรกคือเลข 0 ตัวต่อมาเป็น 1 ไล่ไปเรื่อยๆตามลำดับ
เลขที่ใส่อาจไม่ใช่ข้อมูลชนิดตัวเลขจริงๆ
แต่อยู่ในรูปของสายอักขระของตัวเลขก็ได้เช่นกัน
alert(arkao[0]); // ได้ ๙.๙
alert(arkao[2]); // ได้ 9.9
alert(arkao["1"]); // ได้ 九点九
สามารถป้อนค่าลงไปแทนได้ จะเป็นการทับค่าเดิม
arkao[1] = "เก้าจุดเก้า";
alert(arkao); // ได้ ๙.๙,เก้าจุดเก้า,9.9
หรือเพิ่มลำดับที่ยังไม่มีลงไปก็ได้
กรณีแบบนี้จะเกิดค่าว่างขึ้นตั้งแต่ลำดับสุดท้ายที่มีตอนแรกไปจนถึงลำดับที่เพิ่มเข้ามา
var aroi = ["เทมปุระ", "ทาโกยากิ"];
aroi[7] = "เกี๊ยวซ่า";
alert(aroi); // ได้ เทมปุระ,ทาโกยากิ,,,,,,เกี๊ยวซ่า
alert(aroi[5]); // ได้ undefined
จะสร้างแถวลำดับเปล่าก็ได้ โดยการสร้างวงเล็บเหลี่ยมเปิดไว้เฉยๆ
จากนั้นถ้าจะให้มีอะไรก็ค่อยป้อนค่าเข้าไปทีหลังได้
var aroidi = [];
aroidi[0] = "ชานมไข่มุก";
aroidi[3] = "ทาปิโอกะ";
alert(aroidi); // ได้ ชานมไข่มุก,,,ทาปิโอกะ
และเช่นเดียวกับตอนสร้างออบเจ็กต์
เวลาสร้างแถวลำดับนั้นหากยาวมากมักจะเปิดวงเล็บแล้วป้อนค่าในบรรทัดถัดไปโดยมีการเคาะร่น
แล้วปิดท้ายด้วยวงเล็บปิดในบรรทัดใหม่โดยให้อยู่ระดับเดียวกับตอนเริ่มต้น
เพื่อให้อ่านง่าย
var nueaphleng = [
"เมื่อยามจะนิทรา หลับตายังมิลง จิตใจพะวง หลงคอยเธอเรื่อยมา...",
"ยามต้องจากไกล เราสองนั้นได้ ฝากคำไว้จะไม่ขอเลือน...",
"ก่อนจากกัน คืนนั้นสองเรา แนบซบเนาเคล้าคลอพ้อพรอดภิรมย์..."
];
การเข้าถึงข้อมูลในแถวลำดับทีละหลายตัว
นอกจากเข้าถึงข้อมูลแค่ทีละตัวโดยใส่เลขลำดับใน [] แล้ว
หากต้องหารดูข้อมูลพร้อมกันหลายตัวที่อยู่ติดกันก็อาจทำได้โดยใช้เมธอด .slice
โดยใส่ลำดับของตัวแรกและตัวหลังจากสุดท้าย
var naplek = ["เจ๊ก", "หนอ", "ซา", "สี่", "โหงว", "ลัก", "ฉิก"];
alert(naplek.slice(2, 5)); // ได้ ซา,สี่,โหงว
alert(naplek.slice(0, 3)); // ได้ เจ๊ก,หนอ,ซา
ให้ระวังว่าเลขลำดับของตัวแรกจะถูกรวมอยู่ แต่ตัวสุดท้ายจะไม่รวมด้วย
ถ้าใส่แค่ลำดับจุดเริ่มต้น ไม่ใส่ลำดับปิดท้าย
จะเป็นการไล่เอาตั้งแต่ตัวนั้นไปจนถึงสุดท้าย
alert(naplek.slice(4)); // ได้ โหงว,ลัก,ฉิก
แถวลำดับซ้อน
ข้อมูลที่ใส่ในแถวลำดับจะเป็นอะไรก็ได้ แม้แต่แถวลำดับเอง
ถ้าใส่แถวลำดับในแถวลำดับก็จะกลายเป็นแถวลำดับซ้อนกัน
var ayuki = [
["ความรัก", "愛", "amor"],
["ความกล้าหาญ", "勇気", "coraje"],
["ความหวัง", "希望", "esperanza"]
];
alert(ayuki); // ได้ ความรัก,愛,amor,ความกล้าหาญ,勇気,coraje,ความหวัง,希望,esperanza
alert(ayuki[1]); // ได้ ความกล้าหาญ,勇気,coraje
เวลาเข้าถึงข้อมูลข้างในสุดก็ใส่วงเล็บเหลี่ยมสองอันต่อกัน
alert(ayuki[2][0]); // ได้ ความหวัง
หรืออาจใส่ออบเจ็กต์ธรรมดาในแถวลำดับ หรือแถวลำดับในออบเจ็กต์ก็ได้เช่นกัน
var pokemon = [
{ chue: "ฟุชิงิดาเนะ", sung: 0.7, namnak: 6.9, chanit: ["พืช", "พิษ"] },
{ chue: "ฮิโตคาเงะ", sung: 0.6, namnak: 8.5, chanit: "ไฟ" },
{ chue: "เซนิงาเมะ", sung: 0.5, namnak: 9.0, chanit: "น้ำ" }
];
alert(pokemon); // ได้ [object Object],[object Object],[object Object]
alert(pokemon[2].chue); // ได้ เซนิงาเมะ
alert(pokemon[1].namnak); // ได้ 8.5
alert(pokemon[0].chanit[0]); // ได้ พืช
การเพิ่มสมาชิกใส่แถวลำดับ
หากต้องการเพิ่มสมาชิกใหม่ใส่ในแถวลำดับต่อท้ายให้ใช้เมธอด push
var ahan = ["อุดง", "โซบะ"];
ahan.push("ราเมง", "จัมปง");
alert(ahan); // ได้ อุดง,โซบะ,ราเมง,จัมปง
หากต้องการแทรกไว้ตำแหน่งแรกให้ใช้ unshift
ahan.unshift("โกฮัง");
alert(ahan); // ได้ โกฮัง,อุดง,โซบะ,ราเมง,จัมปง
การลบข้อมูลออกจากแถวลำดับ
หากต้องการลบตัวสุดท้ายออกให้ใช้เมธอด .pop และค่าที่ลบไปจะถูกคืนกลับมาด้วย
ถ้าใช้ alert ขณะนั้น หรือว่าเอาตัวแปรมารับก็จะได้ค่านั้นออกมา
var kk = ["เต้าฮวย", "เต้าหู้", "เต้าส่วน", "เต้าเจี้ยว", "เต้าหมิงซื่อ"];
var dao = kk.pop(kk); // เอาตัวสุดท้ายออกจากแถวลำดับ kk แล้วเอาตัวนั้นใส่ลงในตัวแปร dao
alert(dao); // ได้ เต้าหมิงซื่อ
alert(kk); // ได้ เต้าฮวย,เต้าหู้,เต้าส่วน,เต้าเจี้ยว
หากต้องการลบตัวแรกออกให้ใช้เมธอด .shift และขณะที่ลบค่านั้นจะถูกคืนออกมาด้วย
alert(kk.shift()); // ได้ เต้าฮวย
alert(kk); // ได้ เต้าหู้,เต้าส่วน,เต้าเจี้ยว
หากต้องการลบบางตัวที่อยู่ในลำดับที่กำหนดออกให้ใช้เมธอด .splice แต่ .splice
นี้นอกจากจะใช้ลบข้อมูลออกแล้วยังสามารถแทรกข้อมูลใหม่ลงไปแทนได้หากต้องการ
วิธีการใช้
แถวลำดับ.splice(ลำดับของตัวแรกที่ต้องการลบ, จำนวนที่ต้องการลบ, ข้อมูลที่ต้องการใส่ลงไปแทน)
ถ้าใส่แค่ตำแหน่งที่ต้องการลบกับจำนวนที่ต้องการลบจะเป็น การลบไปเฉยๆ
ไม่ได้ใส่อะไรเข้ามาแทน
แต่ถ้าต่อจากนั้นมีการใส่ค่าอะไรต่อไปก็จะเป็นการเอาตัวนั้นแทรกเข้ามาแทนในตำแหน่งที่ถูกลบไป
ตัวอย่าง
var khanom = ["ขนมชั้น", "ขนมจีน", "ขนมปัง", "ขนมเค้ก"];
alert(khanom.splice(2, 1, "ขนมจีบ", "ขนมครก")); // ได้ ขนมปัง
alert(khanom); // ได้ ขนมชั้น,ขนมจีน,ขนมจีบ,ขนมครก,ขนมเค้ก
alert(khanom.splice(1, 3)); // ได้ ขนมจีน,ขนมจีบ,ขนมครก
alert(khanom); // ได้ ขนมชั้น,ขนมเค้ก
การรวมแถวลำดับสองอันเข้าด้วยกัน
หากต้องการเอาแถวลำดับสองตัวขึ้นไปมาต่อกัน สามารถทำได้โดยใช้เมธอด .concat
ตัวอย่าง
var aroi1 = ["หมู", "เห็ด", "เป็ด", "ไก่"];
var aroi2 = ["กุ้ง", "หอย", "ปู", "ปลา"];
var aroi3 = ["หมึก"];
var aroi123 = aroi1.concat(aroi2, aroi3);
var aroi213 = aroi2.concat(aroi1, aroi3);
var aroi32 = aroi3.concat(aroi2);
alert(aroi123); // ได้ หมู,เห็ด,เป็ด,ไก่,กุ้ง,หอย,ปู,ปลา,หมึก
alert(aroi213); // ได้ กุ้ง,หอย,ปู,ปลา,หมู,เห็ด,เป็ด,ไก่,หมึก
alert(aroi32); // ได้ หมึก,กุ้ง,หอย,ปู,ปลา
แถวลำดับตัวเดิมที่ถูกนำมารวมกันจะไม่เกิดการเปลี่ยนแปลงใดๆ
แค่ลอกเอาข้อมูลที่มีอยู่ข้างในมาต่อกันสร้างเป็นแถวลำดับใหม่
การหาความยาวของแถวลำดับ
แถวลำดับจะมีพรอเพอร์ตีติดตัวที่ทำหน้าที่บอกความยาว นั่นคือ .length
ถ้าอยากรู้ความยาวก็ให้ดูค่านี้
var ar = [1,2,3];
alert(ar.length); // ได้ 3
length เป็นพรอเพอร์ตี ไม่ใช่เมธอด ดังนั้นไม่ต้องเติม () ต่อท้ายเวลาใช้
ต่างจากพวกเมธอดต่างๆที่กล่าวถึงมา
สร้างแถวลำดับด้วยคอนสตรักเตอร์ Array
อีกวิธีที่ใช้สร้างแถวลำดับได้คือใช้คอนสตรักเตอร์ new Array
วิธีสร้างคล้ายกับที่ใช้ [ ] แค่เปลี่ยนเป็น new Array( )
var ar = new Array(1,2,3);
alert(ar); // ได้ 1,2,3
alert(new Array("a")); // ได้ a
แต่จะมีช้อแตกต่างเกิดขึ้นเมื่อใส่ค่าในวงเล็บไปแค่ตัวเดียวและตัวนั้นเป็นข้อมูลชนิดตัวเลข
จะกลายเป็นการสร้างแถวลำดับเปล่าๆที่มีจำนวนสมาชิกตามเลขที่ใส่ไป
alert(Array(12)); // ได้ ,,,,,,,,,,,
การวนซ้ำไล่สมาชิกในแถวลำดับ
บ่อยครั้งที่แถวลำดับถูกใช้คู่กับโครงสร้าง while หรือ for
เพื่อวนซ้ำไล่จัดการอะไรบางอย่างกับสมาชิกในแถวลำดับทีละตัว
สามารถใช้ .length เพื่อหาความยาวของแถวลำดับนั้น
เพื่อเป็นตัวกำหนดจำนวนในการวนซ้ำ
ตัวอย่าง
var bang = ["บางพลัด", "บางรัก", "บางจาก", "บางโคล่", "บางครั้ง"];
var s = "";
var i = 0;
while (i < bang.length) {
s += "ไป" + bang[i] + " ";
i++;
}
alert(s); // ได้ ไปบางพลัด ไปบางรัก ไปบางจาก ไปบางโคล่ ไปบางครั้ง
เพียงแต่ว่า โดยมากแล้วแนะนำให้เก็บค่าความยาวไว้ในตัวแปรก่อนดีกว่า
คือเขียนใหม่เป็นแบบนี้
var s = "";
var i = 0;
var len = bang.length;
while (i < len) {
s += "ไป" + bang[i] + " ";
i++;
}
นั่นเพราะถ้าเขียนแบบเดิม ทุกรอบจะต้องมีการหาค่าความยาวของแถวลำดับใหม่ทุกครั้ง
ประสิทธิภาพจะต่ำกว่าหาความยาวมาเก็บไว้ในตัวแปรตั้งแต่แรก
อีกทั้งความยาวของแถวลำดับก็เป็นสิ่งที่เปลี่ยนแปลงได้
ถ้าในระหว่างนั้นมีการเพิ่มความยาวของแถวลำดับไปด้วยอาจทำให้เกิดการวนซ้ำอย่างไม่สิ้นสุดได้
ตัวอย่างเช่น
var khao = ["ข้าวหมูแดง", "ข้าวมันไก่", "ข้าวหน้าเป็ด", "ข้าวผัดปู"];
var i = 0;
var len = khao.length;
while (i < len) {
khao.push(khao[i] + "พิเศษ");
i++;
}
alert(khao); // ได้ ข้าวหมูแดง,ข้าวมันไก่,ข้าวหน้าเป็ด,ข้าวผัดปู,ข้าวหมูแดงพิเศษ,ข้าวมันไก่พิเศษ,ข้าวหน้าเป็ดพิเศษ,ข้าวผัดปูพิเศษ
กรณีนี้หากไม่เก็บความยาวของแถวลำดับไว้ก่อนก็จะเกิดการทำซ้ำไม่สิ้นสุด
เพราะแต่ละรอบมีการเพิ่มสมาชิกใหม่เข้ามาเรื่อยๆ
หากเขียนใหม่ด้วย for อาจเขียนได้แบบนี้
for (var i = 0, len = khao.length; i < len; i++) {
khao.push(khao[i] + "พิเศษ");
}
ในส่วนแรกก่อนถึง ; ภายในวงเล็บหลัง for นั้นสามารถใส่ตัวแปรลงไปพร้อมกัน ๒
ตัวได้ ซึ่งตรงนี้เราสามารถสร้างตัวแปรสำหรับมาเก็บความยาวได้พร้อมกันในนั้นเลย
เพื่อมาใช้เป็นเงื่อนไขที่เขียนในส่วนถัดมา