Làm quen với đối tượng Array trong JavaScript (phần 1) – PLT SOLUTIONS

Posted on by mtoplistChuyên mục:Top List

Array trong JavaScript là đối tượng toàn cục dùng để xây dựng mảng, mỗi một item (phần tử) dữ liệu có một số index (thứ tự, vị trí của các phần tử, bắt đầu từ 0), thông qua index bạn sẽ truy cập được giá trị (value) trong mảng, và có thể dùng nhiều phương thức khác nhau cho array.

Chúng ta bắt đầu làm quen với mảng qua các phương thức đơn giản nhất như:

Thêm phần tử vào cuối mảng:

Cú pháp: arr.push(item):

Thêm phần tử ‘micro’ vào cuối mảng.

Xóa phần tử ở cuối mảng

Cú pháp: arr.pop():

xóa phần tử ở cuối mảng, ‘headphone’ đã bị xóa khỏi mảng

Xóa phần tử ở đầu mảng

Cú pháp: arr.shift():

xóa phần tử ở đầu mảng, ‘laptop’ đã bị xóa khỏi đầu mảng.

Thêm phần tử vào đầu mảng

Cú pháp: arr.unshift(item):

thêm phần tử ‘micro’ vào đầu mảng

Xóa, chèn phần tử với phương thức Splice

Cú pháp: arr.splice(index[,deleteCount, item1, …, itemN)

Với arr.splice() chúng ta dễ dàng xóa hay chèn phần tử ở bất kì vị trí nào mình muốn.

  • index: vị trí
  • deleteCount: số lượng phần tử muốn xóa, bắt đầu từ index, không xóa item (delectCount = 0)
  • item: phần tử được thêm sẽ nằm sau index

Ví dụ: từ vị trí thứ 2, bạn muốn xóa đi 1 phần tử

từ vị trí thứ 2, xóa đi 1 phần tử, “buy” đã bị xóa khỏi mảng

Còn nếu như bạn muốn vừa xóa phần tử và chèn thêm thì có thể làm như cách sau:

xóa và chèn thêm phần tử, tại vị trí index thêm phần tử mới “wish”, “I”, “had”

Hoặc bạn chỉ muốn chèn phần tử và không xóa phần tử thì hãy để deleteCount là 0.

set deleleCount là 0, không xóa phần tử nào và tại vị trí index = 3 thêm phần tử “a”

Nếu gặp phải trường hợp mảng quá nhiều phần tử, chẳng lẽ bạn phải ngồi đếm từng cái một? Sau đây mình xin hướng dẫn cách chèn, xóa phần tử ở cuối mảng trở lên.

chỉ cần đếm ngược cuối mảng lên và cho vị trí index là giá trị âm ( – )

Từ hình trên ta biết được từ vị trí cuối mảng đếm lên -2, được chèn thêm “honey”, “&”, và với deleteCount là 0, thì ta không xóa đi phần tử nào.

Trích xuất phần tử với phương thức Slice()

Cú pháp: arr.slice([start], [end])

  • Start: vị trí bắt đầu trích xuất phần tử
  • End: vị trí kết thúc trích xuất, không bao gồm phần tử cuối.

arr.slice() đơn giản hơn arr.splice() nhiều, ví dụ:

trích xuất phần tử từ mảng ban đầu

Nó khác với str.slice, hàm arr.slice() trả về một mảng mới từ phần đã trích xuất và không làm mất đi mảng cũ.

Nối mảng lại với nhau qua arr.concat()

Cú pháp: arr.concat(arg 1, arg2,…)

Có thể xem hàm concat() là hàm nối hai hay nhiều mảng lại với nhau, hoặc nối giá trị và đối số, trả về mảng mới bao giờ các mảng đã nối rồi, không làm thay đổi mảng cũ.

Ví dụ:

sao chép mảng cũ và thêm mảng mới, giá trị mới.

Sao chép mảng cũ và thêm mảng mới, hay còn gọi tắt là nối mảng, như hình trên, arr đã nối với mảng [3,4] mới, và giá trị mới. Bạn có thể vừa nối mảng, vừa nối giá trị với mảng cũ và không làm thay đổi mảng cũ.

nối hai hay nhiều mảng lại với nhau bằng phương thức concat

Thay vì viết dài dòng, bạn có thể viết gọn như hình trên phải, đương nhiên mảng phải đơn giản nếu không rất rối mắt.

forEach()

Cú pháp: arr.forEach(function(item,index,array) { }

  • function: chính là hàm dùng để thực thi cho các phần tử trong mảng.
  • item: phần tử hiện tại được xử lý trong mảng.
  • index: chỉ số của phần tử đang được xử lý
  • array: mảng hiện tại đang gọi hàm forEach()

Hàm sẽ truyền lần lượt các phần tử của mảng vào để xử lý, phương thức thực thi (thực hiện, hành động) được dùng cho tất cả phần tử. Trong nhiều trường hợp dùng forEach() sẽ ngắn gọn hơn so với dùng for, while.

Tìm kiếm trong mảng

Cú pháp:

  • arr.indexOf(item, from): tìm từ vị trí bắt đầu đến kết thúc, nếu không tìm thấy trả về giá trị -1
  • arr.lastIndexOf(item, from): giống indexOf(), nhưng tìm từ phải sang trái
  • arr.includes(item, from): tìm từ vị trí bắt đầu, nếu tìm thấy trả về true

Tìm phần tử bằng indexOf() ra kết quả tìm “pasta” = 1, vị trí thứ 1, tương đương lần lượt tìm phần tử không tồn tại sẽ trả về -1.

Còn với includes(), tìm thấy phần tử “beefsteak” trả về true.

Find and findIndex

Cú pháp:

arr.find() : tìm kiếm đối tượng cụ thể

arr.findIndex(function(item, index, array), thisValue): tìm kiếm vị trí cụ thể của đối tượng trong mảng.

  • item: giá trị hiện tại của phần tử
  • index: vị trí hiện tại của phần tử
  • array: mảng chứa phần tử hiện tại
  • thisValue: tham số (không bắt buộc).

Tìm từng vị trí của item, nếu tìm được vị trí id tương ứng, sẽ xuất ra đối tượng cụ thể. Với vị trí id = 1, ta sẽ tìm được đối tượng tương ứng là “Huyen”.

Filter

Cú pháp: arr.filter(function(item, index, array) { });

Filter có công dụng như chính nghĩa của nó, nó có tham số dạng function và function này xử lý lọc các lần lặp lại, nếu trả về true thì được chấp nhận và ngược lại.

Hàm filter() đã lọc mảng, xử lý lấy số chẵn theo như yêu cầu (item%2)

Cảm ơn mọi người đã theo dõi bài viết, hi vọng bài viết này sẽ giúp ích đôi chút cho mọi người.

Huyền Nguyễn

PLT SOLUTIONS

mtoplist