10 ฟังก์ชันสำหรับ Array ที่ควรรู้ในภาษา JavaScript

สำหรับการจัดการ Array นั้น JavaScript ก็มี built-in utilities มาให้ใช้เยอะแยะมากมาย แต่ในบทความนี้ จะหยิบมา 10 ฟังก์ชันที่ควรรู้ ซึ่งมีอะไรบ้าง ไปดูกันเล๊ยยยย

1. forEach()

ฟังก์ชันที่วนลูปแต่ละ element ใน array โดยไม่มี return

const arr = [1, 2, 3, 4, 5, 6];

arr.forEach(item => {
   console.log(item); // output: 1 2 3 4 5 6
});

2. includes()

ฟังก์ชันนี้จะตรวจสอบค่า element ที่ให้มาว่ามีใน list หรือไม่? ถ้ามี return true ถ้าไม่มี return false

const arr = [1, 2, 3, 4, 5, 6];
arr.includes(2); // output: true
arr.includes(7); // output: false

3. filter()

ฟังก์ชัน return new array สำหรับ element ที่ตรงตามเงื่อนไข

const arr = [1, 2, 3, 4, 5, 6];
// ค้าหา element ที่มีค่ามากกว่า 3
const filtered = arr.filter(num => num > 3);
console.log(filtered); // output: [4, 5, 6]

4. map()

ฟังก์ชันนี้จะคล้ายๆกับ forEach() แต่จะต่างที่มี return เป็น new array

const arr = [1, 2, 3, 4, 5, 6];
//เพิ่มค่าบวก 1 ทุก element 
const oneAdded = arr.map(num => num + 1);
console.log(oneAdded); // output [2, 3, 4, 5, 6, 7]

5. reduce()

ฟังก์ชันที่เข้าถึงทุก element ของ array แล้ว return ค่าเพียงค่าเดียว หลังจากได้ result หรือ ผ่านเงื่อนไข (condition)

const arr = [1, 2, 3, 4, 5, 6];
const sum = arr.reduce((total, value) => total + value, 0);
console.log(sum); // 21

6. some()

ฟังก์ชันตรวจสอบเงื่อนไข (condition) โดยถ้ามีแค่ element ใด element หนึ่ง ใน list ตรงตามเงื่อนไข จะ return ture ถ้าไม่ return false

const arr = [1, 2, 3, 4, 5, 6];
// มี element อย่างน้อง 1 element ที่มีค่ามากกว่า 4 หรือไม่?
const largeNum = arr.some(num => num > 4);
console.log(largeNum); // output: true
// มี element อย่างน้อง 1 element ที่มีค่าน้อยกว่าหรือเท่ากับ 0 หรือไม่?
const smallNum = arr.some(num => num <= 0);
console.log(smallNum); // output: false

7. every()

ฟังก์ชันตรวจสอบเงื่อนไข (condition) โดยถ้าทุก element ใน list ตรงตามเงื่อนไข จะ return ture ถ้าไม่ return false

const arr = [1, 2, 3, 4, 5, 6];

// ทุก element มีค่ามากกว่า 4 หรือไม่?
const greaterFour = arr.every(num => num > 4);
console.log(greaterFour); // output: false

// ทุก element มีค่าน้อยกว่า 10หรือไม่?
const lessTen = arr.every(num => num < 10);
console.log(lessTen); // output: true

8. sort()

ฟังก์ชันจัดเรียงลำดับ element ใน array

const arr = [1, 2, 3, 4, 5, 6];
const arr = [1, 2, 3, 4, 5, 6];
const alpha = ['e', 'a', 'c', 'u', 'y'];

//เรียงลำดับจากมากไปน้อย
descOrder = arr.sort((a, b) => a > b ? -1 : 1);
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]

//เรียงลำดับจากน้อยไปมาก
ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);
console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']

9. Array.from()

ฟังก์ชันสำหรับสร้าง new array จาก array เดิม

const arr = [1, 2, 3, 4, 5, 6];
const clonedArr = Array.from(arr);  // output: [1, 2, 3, 4, 5, 6]
const name = 'nott';
const nameArray = Array.from(name); // output: ['n', 'o', 't', 't']

และยังสามารถใช้ได้กับ DOM อีกด้วย

const lis = document.querySelectorAll('li');
const lisArray = Array.from(document.querySelectorAll('li'));

// is true array?
console.log(Array.isArray(lis)); // output: false
console.log(Array.isArray(lisArray));  // output: true

10. Array.of()

ฟังก์ชันสำหรับสร้าง new array จาก element ที่กำหนด

const nums = Array.of(1, 2, 3, 4, 5, 6);
console.log(nums); // output: [1, 2, 3, 4, 5, 6]

Reference:

• 10 JavaScript array methods you should know

(ข้อมูลอาจมีข้อผิดพลาด ถ้าจะเอาบทความนี้ไปอ้างอิงที่อื่นให้ตรวจสอบให้ดีก่อนนะครับ ขอบคุณครับ)

สำหรับวันนี้ ต้องขอลาไปก่อน สวัสดีครับ NottDev :)