พื้นฐานการใช้งานอาร์เรย์ของ Javascript

[Thanapoom1514]

Array หรืออาร์เรย์ เป็นโครงสร้างพื้นฐานของทุกๆ ภาษาที่ใช้พัฒนาโปรแกรมซึ่งเป็นสิ่งสำคัญลำดับแรกในการเขียนโปรแกรม ซึ่ง Array ใน Javascript คือการสร้างตัวแปรขึ้นมาหลายค่าเพื่อจัดเก็บข้อมูล อย่างเช่น เก็บข้อมูลผู้ใช้ 3 User ในการใช้งานเราจะใช้ตัวแปรหรือตัวแปรที่เป็นค่าคงที่เก็บข้อมูลตามปกติ ก็จะต้องสร้างขึ้นมา 3 ค่าตามจำนวนข้อมูล ดังตัวอย่างต่อไปนี้

โค้ด: เลือกทั้งหมด

const data_user1 = "นายแดง";
const data_user2 = "คุณดำ";
const data_user3 = "เมฆ";

การเขียนตัวแปรเก็บข้อมูลทีละตัว ทำให้เราต้องสร้างตัวแปรเยอะๆ ซึ่งเราจะเปลี่ยนมาเป็นการเขียนแบบ Array เพียงแค่เราสร้างตัวแปรตัวเดียว ให้ทำหน้าที่ค่าข้อมูล 3 ตัว ซึ่งทำให้เราไม่ต้องมาเพิ่มตัวแปรเก็บค่าเยอะๆ แล้ว

โค้ด: เลือกทั้งหมด

const data_user = ["นายแดง", "คุณดำ", "เมฆ"];

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

โค้ด: เลือกทั้งหมด

const data_user = ["นายแดง", "คุณดำ", "เมฆ"];
console.log(data_user[0]);

ตัวอย่าง การดึงข้อมูลผู้ใช้ที่ชื่อว่า นายแดง

jQuery & Ajax Knowledge-1.png (44.63 KiB) Viewed 6273 times

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

โค้ด: เลือกทั้งหมด

const data_user = ["นายแดง", "คุณดำ", "เมฆ"];

for (var i=0;i < data_user.length;i++) {
    console.log("ลำดับที่ " + i + " " + data_user[i]);

}

ใช้วนลูปในการแสดงข้อมูลในอาร์เรย์

jQuery & Ajax Knowledge-1.png (47.55 KiB) Viewed 6273 times

พื้นฐานสำคัญที่ต่อรู้ในการใช้งานอาร์เรย์ของ Javascript

1. การกรองข้อมูลด้วย filter()
   ถ้าเราต้องการข้อมูลแค่บางส่วน แต่ไม่ได้ต้อกงการข้อมูลทั้งหมด ก็สามารถใช้ฟังก์ชันที่มีชื่อว่า filter() ทำหนเาที่กรองขอ้มูลในอาร์เรย์ได้
   ซึ่งมาดูตัวอย่างในโค้ดนี้ ให้ทำการสร้างตัวแปรอาร์เรย์เก็บข้อมูลพนักงานและเงินเดือน ใน filter() ก็ให้กรองเงินเดือนที่มากกว่าหรือเท่ากับ 15,000 บาท

   โค้ด: เลือกทั้งหมด

   const data_user = [{user:"นายแดง", salary: 10000}, 
                       {user:"คุณดำ", salary: 26000},
                       {user:"เมฆ", salary: 7000},
                       {user:"พืช", salary: 5000},
                       {user:"ลม", salary: 100000}
                   ];
   
   const result = data_user.filter((item)=> {
       return item.salary >= 15000;
   });
   
   console.log(result);

   ผลลัพธ์ที่ได้

   

   แสดงข้อมูลพนักงานและเงินเดือนที่มีมากกว่าหรือเท่ากับ 15,000 บาท

   jQuery & Ajax Knowledge-1.png (51.6 KiB) Viewed 6273 times

   โค้ดด้านบนเป็นการใช้ฟังก์ชัน filter() ใน JavaScript เพื่อกรองข้อมูลจากอาร์เรย์ data_user โดยคัดเลือกเฉพาะข้อมูลที่มีค่า salary มากกว่าหรือเท่ากับ 15000 บาท ซึ่งเป็นเงื่อนไขการกรองที่กำหนดไว้ในฟังก์ชัน filter()โดยการใช้ filter() นั้น จะรับ parameter เป็นฟังก์ชัน callback ซึ่งจะถูกเรียกใช้สำหรับแต่ละอิลิเมนต์ของอาร์เรย์ โดยฟังก์ชัน callback นี้จะต้องส่งคืนค่าเป็น boolean ซึ่งถ้าคืนค่า true จะถือว่าตัวแปรนั้นผ่านการกรองและถูกเก็บไว้ในอาร์เรย์ผลลัพธ์ ส่วนถ้าคืนค่า false จะไม่ถูกเก็บไว้ในอาร์เรย์ผลลัพธ์ ในตัวอย่างโค้ดด้านบนนั้น ฟังก์ชัน callback ส่งเข้าไปใน filter() จะเป็น arrow function ที่มีพารามิเตอร์ชื่อ item ซึ่งจะถูกใช้ในการเปรียบเทียบค่า salary ของแต่ละออบเจกต์ในอาร์เรย์ data_user ถ้า salary มากกว่าหรือเท่ากับ 15000 จะถือว่าเป็นออบเจกต์ที่ผ่านการกรองและถูกเก็บไว้ในอาร์เรย์ผลลัพธ์ result
2. การอ่านข้อมูลด้วย map()
   ฟังก์ชัน map() ใน JavaScript เป็นฟังก์ชันที่ใช้ในการเข้าถึงแต่ละอิลิเมนต์ในอาร์เรย์ แล้วนำค่าที่ได้มาประมวลผลต่อไป โดยฟังก์ชัน map() จะสร้างอาร์เรย์ใหม่ที่มีจำนวนอิลิเมนต์เท่ากับอาร์เรย์ต้นฉบับ แต่ค่าแต่ละอิลิเมนต์ของอาร์เรย์ใหม่จะถูกกำหนดค่าจากผลลัพธ์ของการประมวลผลค่าของอิลิเมนต์ที่เป็นต้นฉบับ ผ่านการส่งฟังก์ชัน callback ใน parameter ตัวแรกของฟังก์ชัน map()

   โค้ด: เลือกทั้งหมด

   const result = data_user.map((item)=> {
       return item.user;
   });
   
   console.log(result);

   

   อ่านข้อมูลในอาร์เรย์ด้วย map()

   jQuery & Ajax Knowledge-1.png (54.29 KiB) Viewed 6273 times

3. การวนลูปอาร์เรย์โดยใช้ forEach
   ฟังก์ชัน forEach() เป็นฟังก์ชันที่ใช้ในการอ่านข้อมูลในอาร์เรย์หรือ objects อื่น ๆ ใน JavaScript โดยจะเป็นการวนลูปผ่านแต่ละอิลิเมนต์ในอาร์เรย์แล้วส่งเข้าไปในฟังก์ชัน callback ที่ถูกส่งไปใน parameter ของ forEach()

   โค้ด: เลือกทั้งหมด

   data_user.forEach((item)=> {
       console.log(item.user);
   });

   

   อ่านข้อมูลโดยใช้ forEach()

   jQuery & Ajax Knowledge-1.png (48.6 KiB) Viewed 6273 times

4. การค้นหาข้อมูลในอาร์เรย์โดยใช้ find()
   ฟังก์ชัน find() ทำหน้าที่ค้นหาข้อมูลในอาร์เรย์ ซึ่งเงื่อนไขที่ระบุต้องตรงกับข้อมูล จึงจะได้ผลการค้นหาที่ตรงตามที่เราต้องการ
   ตัวอย่าง

   โค้ด: เลือกทั้งหมด

   const result = data_user.find((item)=> {
       return item.user === "คุณดำ"
   });
   
   console.log(result);

   

   ค้นหาข้อมูลด้วย find()

   jQuery & Ajax Knowledge-1.png (50.18 KiB) Viewed 6273 times

5. การเพิ่มข้อมูลต่อท้ายในอาร์เรย์โดยใช้ push()
   ฟังก์ชัน push() ใน JavaScript ใช้สำหรับเพิ่มข้อมูลต่อท้ายในอาร์เรย์ โดยจะรับค่าที่ต้องการเพิ่มเข้าไปเป็นพารามิเตอร์ของฟังก์ชัน และจะเพิ่มค่านั้นเข้าไปในตำแหน่งสุดท้ายของอาร์เรย์

   โค้ด: เลือกทั้งหมด

   const data_user = [{user:"นายแดง", salary: 10000}, 
                       {user:"คุณดำ", salary: 26000},
                       {user:"เมฆ", salary: 7000},
                       {user:"พืช", salary: 5000},
                       {user:"ลม", salary: 100000}
                   ];
   
   data_user.push({user:"ไก่", salary: 5800});
   
   data_user.forEach((item)=> {
       console.log(item.user);
   });

   

   ตัวอย่างเพิ่มข้อมูลในอาร์เรย์

   jQuery & Ajax Knowledge-2.png (48.9 KiB) Viewed 6273 times

6. การเพิ่มข้อมูลลำดับแรกในอาร์เรย์โดยใช้ unshift()
   ฟังก์ชัน unshift() ใน JavaScript ใช้สำหรับเพิ่มข้อมูลไปยังตำแหน่งแรกของอาร์เรย์ โดยจะรับค่าที่ต้องการเพิ่มเข้าไปเป็นพารามิเตอร์ของฟังก์ชัน และจะเพิ่มค่านั้นเข้าไปในตำแหน่งแรกของอาร์เรย์

   โค้ด: เลือกทั้งหมด

   const fruits = ["banana", "orange"];
   
   fruits.unshift("apple");
   
   console.log(fruits);
   

   

   เพิ่มข้อมูลลำดับแรกเข้าไปในอาร์เรย์

   jQuery & Ajax Knowledge-1.png (50.88 KiB) Viewed 6273 times

7. การถอดข้อมูลล่าสุดออกจากอาร์เรย์โดยใช้ pop()
   pop() เป็นฟังก์ชันใน JavaScript ที่ใช้สำหรับการถอดข้อมูลที่อยู่ในตำแหน่งสุดท้ายของอาร์เรย์ออกมา โดยจะไม่รับค่าอาร์กิวเมนต์ใดๆ และจะส่งค่าของข้อมูลที่ถูกถอดออกมาให้กับผู้ใช้งาน

   โค้ด: เลือกทั้งหมด

   const fruits = ["apple", "banana", "orange"];
   
   const removedFruit = fruits.pop();
   
   console.log(removedFruit);
   console.log(fruits);

   

   ถอดข้อมูลล่าสุดจากอาร์เรย์ใช้ฟังก์ชัน pop()

   jQuery & Ajax Knowledge-1.png (50.39 KiB) Viewed 6273 times

8. การถอดข้อมูลลำดับแรกออกจากอาร์เรย์โดยใช้ shift()
   ฟังก์ชัน shift() ใน JavaScript ใช้สำหรับถอดข้อมูลออกจากตำแหน่งแรกของอาร์เรย์ โดยจะไม่ต้องระบุค่าใดๆ เพิ่มเติมในการใช้งาน และจะลบและคืนค่าของข้อมูลตัวแรกในอาร์เรย์ออกมา
   const fruits = ["apple", "banana", "ora ... g(fruits);

   

   ถอดข้อมูลลำดับแรกใช้ฟังก์ชัน shift()

   jQuery & Ajax Knowledge-2.png (51.08 KiB) Viewed 6273 times

สรุปก็คืออาร์เรย์เป็นโครงสร้างพื้นฐานที่เราจะต้องใช้งานบ่อย เช่น การข้อมูลในรูปแบบอาร์เรย์ การดึงข้อมูลมาแสดง เป็นต้น หรืออาร์เรย์เป็นโครงสร้างข้อมูลที่มีการจัดเก็บข้อมูลในลักษณะเป็นชุดข้อมูลที่มีความเหมือนกัน โดยข้อมูลในอาร์เรย์จะถูกจัดเก็บเป็นลำดับ (index) โดยเริ่มต้นจาก 0 จนถึง n-1 (n คือขนาดของอาร์เรย์)ซึ่งเป็นสิ่งสำคัญในการพัฒนาโปรแกรมตัวหนึ่ง

อ้างอิง
https://www.mindphp.com/บทเรียนออนไลน์/ ... cript.html
https://www.mindphp.com/developer/20-ja ... -loop.html
https://www.babelcoder.com/blog/articles/introduction-to-functional-programming-in-javascript

[ishaD]

**Fundamentals of JavaScript Arrays: A Comprehensive Guide**

Arrays are fundamental data structures in programming, and JavaScript provides a powerful array implementation that lies at the heart of many applications. JavaScript arrays are versatile and dynamic, allowing developers to store, manipulate, and access collections of data efficiently. In this guide, we'll explore the fundamentals of JavaScript arrays, covering their creation, manipulation, iteration, and common use cases.

**Creating Arrays:**
To create an array in JavaScript, you can use the array literal notation `[]`, followed by the elements enclosed within square brackets and separated by commas. For example:
```javascript

โค้ด: เลือกทั้งหมด

const numbers = [1, 2, 3, 4, 5];
const fruits = ['apple', 'banana', 'orange'];
```

**Accessing Array Elements:**
Array elements are accessed using their index, starting from 0. For example:
```javascript

โค้ด: เลือกทั้งหมด

console.log(numbers[0]); // Output: 1
console.log(fruits[1]);  // Output: banana
```

**Array Methods for Manipulation:**
JavaScript arrays offer a variety of built-in methods to manipulate their contents. Some common methods include:
- `push()`: Adds elements to the end of the array.
- `pop()`: Removes the last element from the array.
- `shift()`: Removes the first element from the array.
- `unshift()`: Adds elements to the beginning of the array.
- `splice()`: Adds or removes elements from a specific index.

**Iterating Through Arrays:**
There are multiple ways to iterate through array elements, such as using `for` loops, `forEach()`, `map()`, `filter()`, and more. Here's an example using `forEach()`:
```javascript

โค้ด: เลือกทั้งหมด

fruits.forEach((fruit) => {
    console.log(fruit);
});
```

**Array Length and Properties:**
You can access the length of an array using the `length` property:
```javascript

โค้ด: เลือกทั้งหมด

console.log(numbers.length); // Output: 5
```

**Common Use Cases:**
Arrays find applications in various programming scenarios, such as:
- Storing lists of items like user information, product details, or scores.
- Implementing data structures like stacks, queues, and linked lists.
- Performing data transformations using array methods like `map()` and `filter()`.
- Creating dynamic interfaces by dynamically adding or removing elements.

**Arrays and ES6:**
With the introduction of ECMAScript 6 (ES6), JavaScript arrays gained even more powerful features, including the spread operator (`...`), array destructuring, and methods like `find()`, `findIndex()`, and `includes()`.

**Conclusion:**
JavaScript arrays are a cornerstone of web development, offering a flexible and efficient way to manage collections of data. Understanding the fundamentals of array creation, manipulation, iteration, and their common use cases is essential for every JavaScript developer. As you delve deeper into JavaScript programming, mastering arrays will empower you to build more dynamic and sophisticated applications.