ในบทความนี้เราจะมารู้จัก function ใน JavaScript ที่ใช้กันบ่อยๆ ใน React.js ใครที่กำลังศึกษา React.js อยู่ ควรที่จะรู้ function เหล่านี้
map()
map
ใช้ในการสร้าง array ใหม่ จะเห็นใช้บ่อยๆ สำหรับใช้สำหรับ loop เพื่อแสดงข้อมูล
const items = ["apple", "banana", "orange"];
const itemList = items.map((item, index) => <li key={index}>{item}</li>);
return <ul>{itemList}</ul>;
filter()
filter
ใช้สำหรับการกรองข้อมูลตามเงื่อนไขที่เราต้องการ
const users = [
{ id: 1, name: "John", age: 25 },
{ id: 2, name: "Jane", age: 17 },
{ id: 3, name: "Doe", age: 20 },
{ id: 4, name: "Alice", age: 16 },
];
const filteredUsers = users.filter((user) => user.age > 18);
return (
<>
<ul>
{filteredUsers.map((user) => (
<li key={user.id}>
{user.name} - {user.age} years old
</li>
))}
</ul>
</>
);
slice()
slice()
method ใช้ในการตัดข้อมูลจาก array แล้วสำหรับ array ใหม่โดยไม่มีการแก้ไขข้อมูลเดิม จะรับ parameters 2 ตัวสำหรับเริ่มต้นและสิ้นสุด
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
const slicedFruits = fruits.slice(1, 3);
return (
<>
<ul>
{slicedFruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
</>
);
// - banana
// - cherry
splice()
splice ใช้สำหรับ ลบค่าเดิมแล้วแทนที่ด้วยค่าใหม่ตาม index ที่เราต้องการ แต่ splice จะไม่มีการสร้าง array ใหม่ ก็คือจะเปลี่ยนแปลง array เดิมเลย และยังสามารถทำการลบ index เริ่มต้นได้ เหมือนกับ slice เลย
มาลองดูรูปแบบกันหน่อย
splice(start, deleteCount);
มาลองดูตัวอย่างกัน
อย่างเช่นผมมี array fruits
แล้วอยากเพิ่มข้อมูลลงไปในค่าลงไปใน index ที่ 1 ด้วยค่า MyValue
และ ไม่ทำการลบข้อมูลถัดจาก index ที่ 1 ก็จะได้เป็นแบบนี้
const fruits = ["apple", "banana", "cherry", "mango"];
fruits.splice(1, 0, "MyValue");
// fruits: ["apple", "MyValue", "banana", "cherry", "mango"]
เราสามารถนำ splice มาลบ element ตามที่ index ที่เราอยากได้ก็ได้เหมือนกันนะ
const months = ["Jan", "March", "April", "June"];
months.splice(2, 1);
ผลลัพธ์ก็จะเป็น
["Jan", "March", "June"];
เพราะ April
ถูกลบ วิธีการอ่านของผมก็คือ
// ลบ 1 element ที่ index 2
months.splice(2, 1);
concat()
concat ใช้สำหรับต่อ array 2 ตัวเข้าด้วยกัน แล้ว return เป็น array ใหม่
const arr1 = ["apple", "banana", "orange"];
const arr2 = ["grape", "kiwi", "melon"];
const concatArr = arr1.concat(arr2);
return (
<>
{concatArr.map((item) => (
<div>{item}</div>
))}
</>
);
// concatArr: ['apple', 'banana', 'orange', 'grape', 'kiwi', 'melon']
find()
find ใช้สำหรับหาค่าตามเงื่อนไขที่เราต้องการ เช่นในตัวอย่างนี้ ผมอยากจะหา banana
ใน array fruits
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
const foundFruit = fruits.find((fruit) => fruit === "banana");
return <div>{foundFruit}</div>;
// foundFruit: "banana"
findIndex()
findIndex จะเหมือนกับ find แต่จะ return เป็น index ของค่านั้นๆ
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
const foundFruitIndex = fruits.findIndex((fruit) => fruit === "banana");
return <div>{foundFruitIndex}</div>;
// foundFruitIndex: 1
destructuring
เอาแบบเข้าใจง่ายๆ คือการแกะค่าออกมาจาก array หรือ object มาเป็นตัวแปรนั้นๆ อย่างเช่นถ้าเราอยากได้ ค่า title
ที่อยู่ใน array post
แทนที่เราจะใช้วิธีการแบบ post.title
เราก็ใช้วิธีการ destructuring แทนนั่นเอง
วิธีการก็ตามด้านล่างเลย
const { title, description } = post;
return (
<div>
<h1>{title}</h1>
<p>{description}</p>
</div>
);
rest operator
เวลา function มี parameters เยอะๆ เราสามารถนำ rest operator มาใช้เพื่อรับ parameters ทั้งหมดได้ โดยใช้เครื่องหมาย ...
function sum(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}
console.log(sum(1, 2, 3, 4, 5)); // Output: 15
spread operator
ใช้เพื่อแยกข้อมูลใน array หรือ object เพื่อนำไปใช้ต่อที่อื่น โดยใช้เครื่องหมาย ...
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, ...arr2];
// combinedArray: [1, 2, 3, 4, 5, 6]
// Spread Operator ใน Object
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
ทั้ง rest operator และ spread operator ต่างก็มีการใช้เครื่องหมายเหมือนกัน อาจจะสับสันได้ ขอให้เข้าใจว่า
- rest operator ใช้ใน function เพื่อรับ parameters ทั้งหมดเข้าไปทำงานใน function
- spread operator เป็นการแยกข้อมูลใน array หรือ object เพื่อนำไปใช้ต่อที่อื่น อย่างเช่นในตัวอย่างข้างบนที่มีการรวม array และ object 2 ตัวเข้าด้วยกัน
promises
อ่านที่นี่แทนนะ เขียนไว้แล้ว 😅 มาลองใช้ Promise และ Async/Await ใน React กัน
async/await
อ่านที่นี่แทนนะ เขียนไว้แล้ว 😅 มาลองใช้ Promise และ Async/Await ใน React กัน