φυβλαςのβλογ
บล็อกของ phyblas



javascript เบื้องต้น บทที่ ๑๑: การสร้างข้อมูลชนิดแถวลำดับ (อาเรย์)
เขียนเมื่อ 2019/07/31 23:20
แก้ไขล่าสุด 2021/09/28 16:42


การสร้างแถวลำดับ

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




-----------------------------------------

囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧

ดูสถิติของหน้านี้

หมวดหมู่

-- คอมพิวเตอร์ >> เขียนโปรแกรม >> javascript

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

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
มอดูลต่างๆ
-- numpy
-- matplotlib

-- pandas
-- manim
-- opencv
-- pyqt
-- pytorch
การเรียนรู้ของเครื่อง
-- โครงข่าย
     ประสาทเทียม
ภาษา javascript
ภาษา mongol
ภาษาศาสตร์
maya
ความน่าจะเป็น
บันทึกในญี่ปุ่น
บันทึกในจีน
-- บันทึกในปักกิ่ง
-- บันทึกในฮ่องกง
-- บันทึกในมาเก๊า
บันทึกในไต้หวัน
บันทึกในยุโรปเหนือ
บันทึกในประเทศอื่นๆ
qiita
บทความอื่นๆ

บทความแบ่งตามหมวด



ติดตามอัปเดตของบล็อกได้ที่แฟนเพจ

  ค้นหาบทความ

  บทความแนะนำ

ตัวอักษรกรีกและเปรียบเทียบการใช้งานในภาษากรีกโบราณและกรีกสมัยใหม่
ที่มาของอักษรไทยและความเกี่ยวพันกับอักษรอื่นๆในตระกูลอักษรพราหมี
การสร้างแบบจำลองสามมิติเป็นไฟล์ .obj วิธีการอย่างง่ายที่ไม่ว่าใครก็ลองทำได้ทันที
รวมรายชื่อนักร้องเพลงกวางตุ้ง
ภาษาจีนแบ่งเป็นสำเนียงอะไรบ้าง มีความแตกต่างกันมากแค่ไหน
ทำความเข้าใจระบอบประชาธิปไตยจากประวัติศาสตร์ความเป็นมา
เรียนรู้วิธีการใช้ regular expression (regex)
การใช้ unix shell เบื้องต้น ใน linux และ mac
g ในภาษาญี่ปุ่นออกเสียง "ก" หรือ "ง" กันแน่
ทำความรู้จักกับปัญญาประดิษฐ์และการเรียนรู้ของเครื่อง
ค้นพบระบบดาวเคราะห์ ๘ ดวง เบื้องหลังความสำเร็จคือปัญญาประดิษฐ์ (AI)
หอดูดาวโบราณปักกิ่ง ตอนที่ ๑: แท่นสังเกตการณ์และสวนดอกไม้
พิพิธภัณฑ์สถาปัตยกรรมโบราณปักกิ่ง
เที่ยวเมืองตานตง ล่องเรือในน่านน้ำเกาหลีเหนือ
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ

ไทย

日本語

中文