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



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


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

ข้อมูลชนิดแถวลำดับ หรือ อาเรย์ (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

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

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
python
-- numpy
-- matplotlib

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

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



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

  ค้นหาบทความ

  บทความแนะนำ

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

บทความแต่ละเดือน

2020年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2019年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2018年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2017年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2016年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

ค้นบทความเก่ากว่านั้น

ไทย

日本語

中文