- vừa được xem lúc

Các hàm duyệt mảng hay trong javascript mà bạn nên biết

0 0 12

Người đăng: Nguyễn Tuấn Linh

Theo Viblo Asia

Mở đầu

Hiện nay, hầu hết khi code chúng ta đều phải xử lý các mảng dữ liệu. Và sử dụng vòng for để duyệt là cách vô cùng dễ dàng và phổ biến. Tuy nhiên, sử dụng vòng for cũng đem lại nhiều nhược điểm, ví dụ như mỗi lần duyệt, vòng for sẽ khai báo lại giá trị đếm mà ta sử dụng. Hôm nay, chúng ta sẽ cùng tìm hiểu các hàm được sử dụng trong javascript để làm việc với mảng một cách ngắn gọn và chuyên nghiệp hơn.

Spread

Spread chia một mảng thành các phần tử, để sử dụng chúng ta chỉ cần thêm ... vào trước mảng được khai báo

Ví dụ: Ta có một mảng và muốn in tất cả các phần tử của mảng đó

let example = ["dog", "cat", "fish", "chicken"] console.log(...example) //output: dog cat fish chicken

Ưu điểm của spread:

  • Cú pháp sử dụng ngắn, dễ dàng
  • Tiện lợi trong việc show toàn bộ phần tử của mảng

Includes()

Includes được sử dụng để kiểm tra xem một phần tử đã biết liệu đã tồn tại trong mảng hay chưa, nếu mảng có chứa phần tử đó, includes sẽ trả về true và ngược lại.

Ví dụ: Ta có một mảng ["dog", "cat", "fish", "chicken"] và muốn kiểm tra xem phần tử "dog" có nằm trong mảng đó hay không

let example = ["dog", "cat", "fish", "chicken"] console.log(example.includes("dog")) //output: true

Ưu điểm của includes:

  • Dễ dàng sử dụng để kiểm tra phần tử có trong trong mảng hay không
  • Dễ dàng đọc hiểu

Every()

Every sẽ duyệt qua từng phần tử trong mảng và trả về true nếu các phần tử đều thỏa mãn điều kiện cho trước và ngược lại

Ví dụ: Ta có một mảng [20, 21, 22, 23] và muốn kiểm tra xem tất cả các phần tử đều lớn hơn 1 hay không

let example = [20, 21, 22, 23] example.every((value) => value > 1) //output: true

Ưu điểm của every:

  • Đảm bảo mọi phần tử đều thỏa mãn điều kiện
  • Dễ dàng viết các câu điều kiện bằng hàm

Some()

Some sẽ duyệt qua từng phần tử trong mảng và trả về true nếu có ít nhất 1 phần tử đều thỏa mãn điều kiện cho trước và ngược lại

Ví dụ: Ta có một mảng [20, 21, 22, 23] và muốn kiểm tra xem có tồn tại ít nhất 1 phần tử lớn hơn 22 hay không

let example = [20, 21, 22, 23] example.some((value) => value > 22) //output: true

Ưu điểm của some:

  • Đảm bảo có ít nhất 1 phần tử thỏa mãn điều kiện
  • Dễ dàng viết các câu điều kiện bằng hàm

Filter()

Filter trả về một mảng mới với các phần tử là các phần tử thỏa mãn điều kiện cho trước

Ví dụ: Ta có một mảng [20, 21, 22, 23] và muốn lấy ra một mảng chứa các phần tử là số chẵn trong mảng trên

let example = [20, 21, 22, 23] example.filter((value) => value % 2 ===0) //output: [20, 22]

Ưu điểm của filter:

  • Dễ dàng lọc phần tử của mảng
  • Cú pháp dễ dàng, ngắn gọn

Map()

Map thao tác với từng phần tử trong mảng và xuất ra mảng mới

Ví dụ: Ta có một mảng [20, 21, 22, 23] và muốn lấy ra một mảng chứa các phần tử là các giá trị trong mảng trên + 100

let example = [20, 21, 22, 23] example.map((value) => { return value + 100;
}) //output: [120, 121, 122, 123]

Ưu điểm của map:

  • Dễ dàng thao tác với từng phần tử mình muốn trong mảng mà không làm thay đổi giá trị của mảng
  • Cú pháp dễ dàng, ngắn gọn

Reduce()

Reduce sẽ biến đổi một mảng thành một giá trị đơn giản bằng cách duyệt qua từng phần tử từ trái sang phải

Ví dụ: Ta có một mảng [20, 21, 22, 23] và muốn tính tổng của tất cả các phần tử trong mảng

let example = [20, 21, 22, 23] example.reduce((prev, next) => prev + next) //output: 86

Ưu điểm của reduce:

  • Thực hiện tính toán dễ dàng
  • Code ngắn gọn, dễ hiểu

Lời kết

Qua bài viết này, mình đã giới thiệu đến các bạn một số hàm hay trong javascript được sử dụng để thao tác với dữ liệu của mảng. Mong bài viêt sẽ giúp các bạn code nhanh và hiệu quả hơn với javascript.

Bình luận

Bài viết tương tự

- vừa được xem lúc

2021, chúng ta cần tối ưu hóa việc tải hình ảnh trên web như nào?

Rất chào các bạn,. Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả.

0 0 56

- vừa được xem lúc

Cách mình "hack" được vào hẹ thống của SMAS để xem điểm.

Cách mà mình "hack" được vào hệ thống của SMAS. Thật ra dùng từ hack cũng không đúng lắm, chỉ là một vài trick để lừa hệ thống mà thôi.

0 0 146

- vừa được xem lúc

Giải thích một số JAVASCRIPT ARRAY METHOD với EMOJIS

Như chúng ta đã biết, Array trong JS có rất nhiều method tiện dụng có thể hỗ trợ chúng ta. Sau đây là một số method thông dụng được giải thích bằng các emoji. Thêm một hoặc nhiều phần tử vào sau mảng. livestock.

0 0 46

- vừa được xem lúc

Testing trong Javascript với Jest (Phần 1)

Hello 500 anh em, lại là mình đây. Chú bé coder yêu màu tím thích màu hồng và ghét sự giả dối đây .

0 0 270

- vừa được xem lúc

Áp dụng kiến trúc 3 Layer Architecture vào project NodeJS

The problem encountered. Các framework nodejs phổ biết như Express cho phép chúng ta dễ dàng tạo ra Resful API xử lí các request từ phía client một cách nhanh chóng và linh hoạt.

0 0 80

- vừa được xem lúc

Một số String methods cần biết trong javascript

String là một trong những phần quan trọng nhất trong javascript, ngoài những methods hay dùng như trim, concat, subString, toUpperCase, toLowerCase; Javascript còn cung cấp cho chúng ta rất nhiều methods hữu ích khác để thao tác và giải quyết các vấn đề dễ dàng hơn khi làm việc với String. Mặc dù nh

0 0 39