Các phương thức xử lý mảng (Array) phổ biến trong JavaScript (Phần 3)

Tram Ho

Hi, xin chào các bạn, ở phần 1phần 2 chúng ta đã tìm hiểu được 15 method của array.

Trong phần 3 này, mình tiếp tục giới thiệu tới các bạn những method cũng khá quan trọng của array mà các devjs hay nhầm lẫn khi sử dụng điển hình như slice() với splice()  Ta bắt đầu thôi

16. slice()

slice() dịch ra tiếng Việt nôm na là cắt, lát, thái, bla bla,… và chức năng của nó cũng dùng để cắt bỏ một số phần tử của array

slice() trả về một bản sao tham chiếu (shallow copy) một phần của mảng dưới dạng một mảng nhận các giá trị có chỉ số từ begin đến end (không bao gồm end)

  • slice() KHÔNG làm thay đổi mảng ban đầu
  • slice() trả về một mảng mới sau khi cắt

Với chỉ số dương

Với chỉ số âm

Khá xoắn não với quả âm dương này nhỉ

Cú pháp

17. splice()

splice() dùng để thay đổi phần tử của mảng bằng cách xóa phần tử đang tồn tại hoặc thêm vào phần tử mới

  • splice() CÓ làm thay đổi mảng ban đầu
  • splice() trả về mảng chứa các phần tử đã bị xoá

Đây là con hàng khá rắc rối khi nó vừa thêm được phần tử, vừa xoá được phần tử và thay đổi trực tiếp lên array ban đầu nên nếu bạn không kiểm soát được các đối số truyền vào sẽ bị toang ngay. Cùng xem ví dụ sau

Xoá phần tử với đối số start

Xoá phần tử có thêm đối số deleteCount (deleteCount : chỉ định số lượng các phần tử sẽ bị xóa)

Thêm phần tử với đối số thứ 3

Thêm vào nhiều item

Cũng không khó đúng không, tập trung chút là ngấm, thỉnh thoảng deadline dí tới là lại quên nhẹ thôi

Cú pháp

18. Array.from()

Array.from() dùng để tạo mới một mảng từ

  • object giống mảng (object có length và các element được index)
  • iterable objects (object có thể get được elements của nó, như MapSet)

Array.from() trả về 1 array mới

Cú pháp

19. Array.isArray()

Array.isArray() dùng để kiểm tra giá trị truyền vào có phải là một mảng kiểu Array hay không

  • Array.isArray() trả về kiểu Boolean: true nếu là mảng và false nếu không phải mảng

Cú pháp

Tổng kết

Túm cái váy lại ta có bảng tổng kết tóm tắt sau

MethodChức năngGiá trị trả vềThay đổi mảng ban đầu
concat ()Nối 2 hay nhiều mảngMảng mới sau khi nốiKhông
filter ()Lọc ra các phần tử thoả mãn điều kiệnMảng mới sau khi lọcKhông
find()Lọc ra phần tử đầu tiên thoả mãn điều kiệnGiá trị ĐẦU TIÊN tìm thấy/undefinedKhông
forEach ()Duyệt qua từng phần tử của mảngundefined
includes ()Kiểm tra xem phần tử có tồn tại trong mảng hay khôngtrue/falseKhông
indexOf ()Tìm kiếm vị trí của phần tử trong mảngIndex ĐẦU TIÊN tìm thấy/-1Không
join()Tạo ra một chuỗi mớiChuỗi mới/Chính phần tử đó/""Không
map()Tạo ra mảng mới nhờ biến đổi mảng ban đầuMảng mới sau khi biến đổiKhông
pop()Xoá phần tử cuối cùng ra khỏi mảngPhần tử đã bị xoá/undefined
shift ()Xoá phần tử đầu tiên ra khỏi mảngPhần tử đã bị xoá/undefined
push()Thêm 1 hoặc nhiều phần tử vào cuối mảngĐỘ DÀI MỚI của mảng
unshift ()Thêm 1 hoặc nhiều phần tử vào đầu mảngĐỘ DÀI MỚI của mảng
reduce ()Thực thi hàm lên từng phần tử để thu về 1 giá trịGiá trị sau khi rút gọnKhông
reverse ()Đảo ngược mảngMảng sau khi đảo ngược
some()Kiểm tra có ít nhất 1 phần tử thoả mãn điều kiệntrue/falseKhông
sort()Sắp xếp các phần tử trong mảngMảng sau khi được sắp xếp
slice ()Cắt bỏ một số phần tử của mảngMảng mới sau khi cắtKhông
splice ()Thêm/xoá phần tử trong mảngMảng chứa các phần tử đã bị xoá
Array.from ()Tạo mới một mảngMảng mới
Array.isArray ()Kiểm tra giá trị truyền vào có phải là một mảngtrue/false

Kết luận

Ok có vẻ đủ rồi, còn một số method nữa nhưng mình thấy ít dùng nên cũng không list vào, nếu bạn muốn có thể tìm các tài liệu trên mạng nhé. Hi vọng sau khi đọc xong chuỗi bài này bạn đã có thể làm chủ được array, một con hàng sẽ được dùng rất nhiều với các devjs

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công !

Hẹn gặp lại ở các bài viết sau !

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo