คุณสมบัติ array /javascript
คุณสมบัติของ Array ใน JavaScript คือ อ็อบเจกต์ชนิดพิเศษที่ใช้เก็บชุดข้อมูลที่มีลำดับ ซึ่งสามารถเก็บข้อมูลได้หลายประเภทในตัวแปรเดียวกัน และแต่ละข้อมูลจะมีดัชนี (index) ที่เริ่มต้นจาก \(0\) เพื่อใช้ในการเข้าถึง คุณสมบัติสำคัญได้แก่ ความยาว (\(length\)) และ เมธอด ต่างๆ ที่ช่วยในการจัดการข้อมูล .rPeykc.rWIipd{font-size:var(--m3t5);font-weight:500;line-height:var(--m3t6);margin:20px 0 10px 0}.f5cPye ul{font-size:var(--m3t7);line-height:var(--m3t8);margin:10px 0 20px 0;padding-inline-start:24px}.f5cPye .WaaZC:first-of-type ul:first-child{margin-top:0}.f5cPye ul.qh1nvc{font-size:var(--m3t7);line-height:var(--m3t8)}.f5cPye li{padding-left:4px;margin-bottom:8px;list-style:inherit}.f5cPye li.K3KsMc{list-style-type:none}.f5cPye ul>li:last-child,.f5cPye ol>li:last-child,.f5cPye ul>.bsmXxe:last-child>li,.f5cPye ol>.bsmXxe:last-child>li{margin-bottom:0}.zMgcWd{padding-bottom:16px;padding-top:8px;border-bottom:none}.dSKvsb{padding-bottom:0}li.K3KsMc .dSKvsb{margin-inline-start:-28px}.GmFi7{display:flex;width:100%}.f5cPye li:first-child .zMgcWd{padding-top:0}.f5cPye li:last-child .zMgcWd{border-bottom:none;padding-bottom:0}.xFTqob{flex:1;min-width:0}.Gur8Ad{font-size:var(--m3t11);font-weight:500;line-height:var(--m3t12);overflow:hidden;padding-bottom:4px;transition:transform 200ms cubic-bezier(0.20,0.00,0.00,1.00)}.vM0jzc{color:var(--m3c9);font-size:var(--m3t7);line-height:var(--m3t8)}.vM0jzc ul,.vM0jzc ol{font-size:var(--m3t7) !important;line-height:var(--m3t8) !important;margin-top:8px !important}.vM0jzc li ul,.vM0jzc li ol{font-size:var(--m3t9) !important;letter-spacing:0.1px !important;line-height:var(--m3t10) !important;margin-top:0 !important}.vM0jzc ul li{list-style-type:disc}.vM0jzc ui li li{list-style-type:circle}.vM0jzc .rPeykc:first-child{margin-top:0}.LW6JDf{margin-left:auto} คุณสมบัติหลัก เก็บข้อมูลได้หลากหลายประเภท: สามารถเก็บค่าได้ทุกชนิด เช่น ตัวเลข (\(Number\)), ข้อความ (\(String\)), อ็อบเจกต์ (\(Object\)) หรือแม้แต่อาร์เรย์อื่น ๆ (nested array) มีลำดับ: ข้อมูลถูกจัดเก็บตามลำดับและสามารถเข้าถึงได้ผ่านดัชนีตัวเลข ซึ่งเริ่มต้นจาก \(0\) มีคุณสมบัติ length: เป็นคุณสมบัติที่บอกจำนวนข้อมูลในอาร์เรย์ ซึ่งจะถูกปรับอัตโนมัติเมื่อมีการเพิ่มหรือลบข้อมูล มีเมธอด (methods): มีเมธอดที่กำหนดไว้ล่วงหน้ามากมายสำหรับจัดการกับข้อมูลในอาร์เรย์ เช่น การเพิ่ม/ลบ: push(), pop(), unshift(), splice() การค้นหา: find(), filter() การวนรอบ: forEach(), map() การเรียงลำดับ: sort() อาร์เรย์แปลแล้ว — สรุป อาร์เรย์เป็นวัตถุชนิดพิเศษที่เหมาะสำหรับการจัดเก็บและจัดการรายการข้อมูลที่เรียงลำดับ คำประกาศ: // square brackets (usual) let arr = [ item1 ,javascript.infoจัดการชุดข้อมูลด้วย Array Methods ใน JavaScript | by jtk | InsightEra8 มี.ค. 2563 — สรุป array methods เป็นสิ่งที่อำนวยความสะดวกในการใช้งาน สามารถแบ่งออกตามลักษณะการใช้งานได้ดังนี้ การเพิ่ม/ลบค่าในอาเรย์ : push(), unshift...Mediumเรียงข้อมูล Array - Object ด้วย JavaScript sort function - BorntoDev27 พ.ย. 2566 — Array sort() String arr.sort() เป็นคำสั่งจัดเรียงข้อมูลตาม องค์ประกอบ (Element) หรือข้อมูลใน Array โดยจะเรียง Element เป็นสตริงตามลำดับ...BorntoDevบทช่วยสอนเกี่ยวกับอาร์เรย์ JavaScript – วิธีการอาร์เรย์ใน JSแปลแล้ว — อาร์เรย์หลายมิติ อาร์เรย์ JavaScript สามารถเก็บค่าใดๆ ที่อนุญาต รวมถึงอาร์เรย์ด้วย อาร์เรย์ภายในอาร์เรย์อื่นเรียกว่าอาร์เรย์ ซ้อน (nested array) สถาน...freecodecamp.org.a7yfkb{color:#80868b ;font-style:italic}.VQ2nqe{color:#c5221f }.mFP83e,.Bkvjgc,.Uw0eSc{color:#b45908 }.gZdC2c{color:#996900 }.rQeGvc{color:#188038 }.RWHSsb,.z9fBwb,.quIshb{color:#1967d2 }.aPB6vc,.TyFvzb,.VSzkzc{color:#9334e6 }.Vm8mDc,.VURuic{color:#9334e6 }.Vm8mDc{font-weight:bold}.ecCNFc{border:1px solid var(--m3c17);border-radius:8px;font-size:14px;background:var(--m3c2);margin-bottom:20px;color:var(--m3c11)}.zYSUYd{display:flex;flex-direction:row;overflow:hidden;border-radius:8px 8px 0 0}.QQjpRc{display:flex;flex-direction:row;overflow:hidden;border-radius:0 0 8px 8px;background:var(--m3c2)}.FS7GEb{display:flex;flex-direction:column;flex-grow:1;min-width:38%;width:80%}.FS7GEb pre{margin:0;display:inline-grid}.FS7GEb code{font-family:monospace;display:block;padding:16px 16px 22px;line-height:22px;background:transparent;overflow-x:auto;}.dDrxod{height:34px;display:flex;justify-content:space-between;align-items:center;background:var(--m3c6);border-bottom:1px solid var(--m3c17)}.x7ndcb{padding-left:16px;display:flex;align-items:center;color:var(--m3c11)}.WDoJJe{margin-right:4px;display:flex;align-items:center}.B4zsNc{margin:0 2px}.hqI3tf{background:none;height:34px;border:none;color:var(--m3c15);position:relative;top:2px}.hqI3tf:hover{opacity:85%;cursor:pointer}.hqI3tf:disabled{opacity:38%;cursor:auto}.E80BZc{-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:410px;display:-webkit-box;overflow:hidden;white-space:normal}.zJUuqf{margin-bottom:4px}.AB4Wff{margin-left:16px}@keyframes g-snackbar-show{from{pointer-events:none;transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes g-snackbar-hide{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes g-s
คุณสมบัติ .length ของอาร์เรย์ใน JavaScript คือ ตัวเลขจำนวนเต็ม ที่ใช้ในการตรวจสอบ จำนวนองค์ประกอบ ทั้งหมดในอาร์เรย์ คุณสมบัตินี้เป็นคุณสมบัติ ที่ไม่ใช่เมธอด ดังนั้นจึงไม่ต้องใช้วงเล็บ () เพื่อเข้าถึงค่า และสามารถใช้เพื่อตรวจสอบว่าอาร์เรย์ว่างหรือไม่ หรือใช้เป็นส่วนหนึ่งของลูปเพื่อเข้าถึงทุกองค์ประกอบของอาร์เรย์ได้
คุณสมบัติและการใช้งาน
ส่งคืนจำนวนองค์ประกอบ: .length จะส่งคืนค่าที่เป็นจำนวนเต็ม ซึ่งระบุว่ามีข้อมูลกี่รายการอยู่ในอาร์เรย์
การเข้าถึง: คุณสามารถเข้าถึงค่าได้โดยการเขียนชื่ออาร์เรย์ตามด้วย .length เช่น myArray.length
การตรวจสอบการว่างเปล่า: ใช้ array.length === 0 เพื่อตรวจสอบว่าอาร์เรย์นั้นว่างเปล่าหรือไม่
การใช้ในลูป: สามารถใช้ร่วมกับลูป for เพื่อวนซ้ำและเข้าถึงองค์ประกอบแต่ละรายการในอาร์เรย์
ตัวอย่าง
JavaScript
const fruits = ['apple', 'banana', 'orange'];
const numberOfFruits = fruits.length;
console.log(numberOfFruits); // Output: 3
if (fruits.length === 0) {
console.log('The array is empty.');
} else {
console.log('The array is not empty.');
}
// ตัวอย่างการใช้ในลูป
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Output:
// apple
// banana
// orange
นอกจากการใช้ `.length` เพื่อดูจำนวนสมาชิกในอาร์เรย์แล้ว หัวใจสำคัญอย่างหนึ่งในการใช้ JavaScript คือการเข้าใจว่าคุณไม่สามารถเปลี่ยนแปลงเฉพาะบางส่วนของอาร์เรย์ได้โดยตรงเหมือนกับการเปลี่ยนข้อความบางส่วนในสตริง ซึ่งทำให้หลายคนสับสนเวลาอยากแก้ไขข้อมูลในอาร์เรย์เป็นส่วน ๆ ลองนึกภาพว่าคุณมีอาร์เรย์ของชื่อผลไม้ แล้วอยากทำให้ผลไม้บางชื่อเด่นขึ้น (เช่น ใส่แท็ก `<b>` รอบ ๆ ชื่อในสตริง) วิธีนี้ต้องใช้เมธอดอย่าง `map()` หรือการวนลูปเพื่อสร้างอาร์เรย์ใหม่ที่เปลี่ยนแปลงข้อมูลตามแต่ละตำแหน่ง ซึ่งต่างจากการแก้ไขตรงในสมาชิกเดิมของอาร์เรย์ ตัวอย่างเช่นถ้าคุณอยากเพิ่มแท็ก `<b>` รอบ ๆ ข้อความ "banana" ในอาร์เรย์ fruits คุณจะต้องทำอย่างนี้: ```javascript const fruits = ['apple', 'banana', 'orange']; const updatedFruits = fruits.map(item => { if (item === 'banana') { return `<b>${item}</b>`; } return item; }); console.log(updatedFruits); // Output: ['apple', '<b>banana</b>', 'orange'] ``` วิธีนี้จะสร้างอาร์เรย์ใหม่ที่แก้ไขชื่อผลไม้ที่ต้องการอย่างสมบูรณ์ในขณะเดียวกันก็ยังรักษาข้อมูลอื่น ๆ เอาไว้ นอกจากนี้ยังสอดคล้องกับธรรมชาติของอาร์เรย์ใน JavaScript ที่คุณต้องจัดการหรือสร้างอาร์เรย์ใหม่เสมอเมื่ออยากเปลี่ยนแปลงค่าในบางตำแหน่ง การเข้าใจลักษณะนี้จะช่วยให้คุณเขียนโค้ดที่จัดการกับข้อมูลในอาร์เรย์ได้มีประสิทธิภาพและลดความผิดพลาดในการแก้ไขข้อมูลลง
🥰🥰🥰🥰🥰