[Javascript] Một Số Cách Duyệt Array Ngoài For - Viblo

• Báo cáo

Bài đăng này đã không được cập nhật trong 4 năm

Mở bài

Có lẽ bạn đang thắc mắc Tại sao lại không dùng loop để duyệt array? Có 3 nguyên nhân chính:

• Đầu tiên là để code đỡ rối, đỡ phức tạp hơn
• Thứ hai, quan trọng hơn, là để code đẹp hơn,
• Thứ ba, quan trọng nhất, trông nó chuyên nghiệp

Đúng vậy, "nhìn chuyên nghiệp" rất quan trọng, một anh đa cấp đã nói với tôi: để trở thành một người chuyên nghiệp, thì đầu tiên em phải trong chuyên nghiệp đã. Chính vì vậy, để trở thành một coder chuyên nghiệp, thì hãy like, share và subscribe đọc bài viết ngày này ngay nhé

Thân bài

Map

"Trông tất các cả cách duyệt array, em thích nhất là dùng map."

Câu văn kinh điển nhưng rất thật lòng các bạn ạ.

Map đơn giản, ngắn gọn mà dùng thì tiện vô cùng

Ví dụ nhé: ta có mảng const evens = [2, 4, 6, 8, 10];

Nếu dùng for loop thì phải vậy

for (let i = 0; i < evens.length; i++) { console.log(evens[i]); }

còn nếu dùng map thì sẽ vậy

events.map(item => { console.log(item) })

Nhìn đây thì không vẫn 3 dòng, không khác mấy, nhưng thực tế là bạn không phải khai báo thêm biến i, hay check điều kiện loop, trong trường hợp mảng đa chiều thì đã giản lược đáng kể việc phải làm rồi đấy. Hơn nữa, việc giảm bớt các biến trung gian cũng làm cho code sạch và dễ đọc hơn, maintain cũng đỡ khổ hơn =))

Ở đây tôi chỉ giới thiệu map tiện thế nào thôi, còn nó có thể làm gì và nó có gì thì các bạn cứ tự tìm hiểu đi nhé, vậy mới chuyên nghiệp =))

Tiện nói luôn, function callback của map có 3 tham số là currentElement, Index, originalArray nhé

forEach

Về cơ bản thì forEach giống ý hệt map

events.forEach(item => { console.log(item) })

Và function callback của nó cũng có 3 tham số là currentElement, Index, originalArray

Có lẽ các bạn đang thắc mắc, map và forEach có gì khác nhau? À thì,

• map có trả về giá trị và nó tạo ra một mảng mới dài bằng mảng đẩy vào
• forEach thì không trả về giá trị, function callback thay đổi trực tiếp vào mảng đưa vào

filter

filter tương tự như map, nó sẽ trả lại một mảng mới, thoả mãn điều kiện mà bạn xác định

const randoms = [4,6,78,2,34,8,90,34,23,23,5,6,234,435]; let odds = randoms.filter(number => number % 2 === 1); console.log(odds); // => [23, 23, 5, 435]

Nhìn là thấy sướng hơn viết loop for rồi if nhiều rồi =))

every

cách dùng tương tự trên, nhưng some sẽ duyệt cả mảng và trả về giá trị true nếu toàn bộ giá trị trong mảng thoả mãn điều kiện đưa vào, giống như toán tử && ấy

const numbers = [2, 4, 6, 8, 12]; let isEveryEvens = numbers.every(e => e %2 === 0) console.log(isEveryEvens); // => true

some

Giống every, nhưng là toán tử ||, chỉ cần 1 phần tử mảng thoả mãn thì sẽ trả ra True

const numbers = [2, 4, 6, 8, 11]; let isSomeOdd = numbers.some(e => e %2 === 1) console.log(isSomeOdd); // => true

Kết luận

Các thứ liên quan tới array có rất nhiều, trong bài này, tôi chỉ nói về vấn đề duyệt array, các thứ như soft, filter,... xin được hẹn vào một dịp khác. Đây tuyệt đối không phải là do tôi lười, thật sự là nó rất nhiều luôn ấy, viết hết vào đây thì khéo bạn cuộn hỏng chuột luôn ấy chứ =))

Chào thân ái và quyết thắng!

Nguồn tham khảo

• https://jrsinclair.com/articles/2017/javascript-without-loops/
• https://medium.com/edge-coders/coding-tip-try-to-code-without-loops-18694cf06428
• https://12bit.vn/articles/4-cach-duyet-array-khong-can-dung-loop/
• https://viblo.asia/p/tips-xu-ly-array-javascript-hay-khong-phai-ai-cung-biet-bJzKmJADZ9N

p/s:

trick loop JavaScript tip array

All rights reserved

• Báo cáo