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

Hi, xin chào các bạn, ở phần 1 và phầ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

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant', 'pig'];
   //=> index    0       1        2       3         4         5

console.log(animals.slice());
console.log(animals.slice(2));     // lấy từ 2 tới arr.length
console.log(animals.slice(2, 4));  // lấy 2,3 => lấy begin, không lấy end
console.log(animals.slice(1, 6));  // lấy 1,2,3,4,5
                                   // nếu end > arr.length, sẽ lấy tới tới arr.length
console.log(animals);

> Array ["ant", "bison", "camel", "duck", "elephant", "pig"]
> Array ["camel", "duck", "elephant", "pig"]
> Array ["camel", "duck"]
> Array ["bison", "camel", "duck", "elephant", "pig"]
> Array ["ant", "bison", "camel", "duck", "elephant", "pig"]

Với chỉ số âm

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant', 'pig'];
   //=> index    0       1        2       3         4         5
   //=> -index  -6      -5       -4      -3        -2        -1

console.log(animals.slice(-4));       // lấy từ -4 tới arr.length
console.log(animals.slice(-5, -2));   // lấy -5,-4,-3
console.log(animals.slice(2, -1));    // lấy từ 2 tới -1 <=> -4,-3,-2
console.log(animals);

> Array ["camel", "duck", "elephant", "pig"]
> Array ["bison", "camel", "duck"]
> Array ["camel", "duck", "elephant"]
> Array ["ant", "bison", "camel", "duck", "elephant", "pig"]

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

Cú pháp

arr.slice()
arr.slice(begin)
arr.slice(begin, end)

/* begin (Không bắt buộc): Chỉ số bắt đầu chọn phần tử
  Nếu chỉ số này là số âm, được xem như tính ngược từ cuối của mảng.
  Nếu begin là undefined, slice() bắt đầu từ chỉ số 0 */
  
/* end (Không bắt buộc): Chỉ số ngừng chọn phần tử
  slice() chọn ra các phần tử có chỉ số trước chỉ số end
  Chỉ số âm tính ngược từ cuối mảng về
  Nếu tham số end không được truyền vào, slice() chọn đến cuối mảng (arr.length)
  Nếu end lớn hơn độ dài mảng, slice() chỉ chọn đến cuối mảng (arr.length) */

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

var months = ['Jan', 'March', 'April', 'June'];
         //=>   0       1        2        3  

months.splice(2); // xoá các phần từ từ index 2 tới arr.length
console.log(months);

> Array ["Jan", "March"]

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)

var months = ['Jan', 'March', 'April', 'June'];
         //=>   0       1        2        3  

months.splice(1, 2); // xoá đi 2 phần tử kể từ index 1
console.log(months);

> Array ["Jan", "June"]

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

var months = ['Jan', 'March', 'April', 'June'];
         //=>   0       1        2        3  

months.splice(1, 0, 'Feb'); // chèn thêm phần tử vào index 1, không xoá phần tử nào
console.log(months);

> Array ["Jan", "Feb", "March", "April", "June"]

Thêm vào nhiều item

var months = ['Jan', 'March', 'April', 'June'];
         //=>   0       1        2        3  

months.splice(2, 1, 'Feb', 'May'); // chèn thêm 2 phần tử vào index 2, xoá 1 phần tử
console.log(months);

> Array ["Jan", "March", "Feb", "May", "June"]

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

var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

/* start: Vị trí để bắt đầu thay đổi mảng (mặc định là 0)
  + Nếu lớn hơn độ dài của mảng, thì start được thiết lập bằng độ dài của mảng
  + Nếu giá trị là âm, thì start bắt đầu từ các phần từ cuối mảng
  + Nếu array.length + start < 0, thì start bắt đầu từ 0 */

/* deleteCount (Không bắt buộc): Con số chỉ định số lượng các phần tử sẽ bị xóa
  + Nếu deleteCount bị bỏ qua hoặc có giá trị >= array.length - start
    thì tất cả các phần tử từ vị trí start đến cuối mảng sẽ bị xóa bỏ
  + Nếu deleteCount bằng 0 hoặc là số âm, không phần tử nào bị xóa
    trong trường hợp này bạn sẽ phải xác định ít nhất 1 phần tử mới */
    
/* item1, item2, ... (Không bắt buộc):
 Các phần tử thêm vào mảng, bắt đầu từ chỉ số start 
 Nếu không có, splice() sẽ chỉ xóa các phần tử trong mảng */

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

var arr1 = Array.from('foo');
var arr2 = Array.from([1, 2, 3], function(x) {
  return x * x;
});

console.log(arr1);
console.log(arr2);

> Array ["f", "o", "o"]
> Array [1, 4, 9]

Cú pháp

Array.from(arrayLike[, mapFn[, thisArg]])

/* arrayLike: Đối tượng có tính chất giống mảng */

/* mapFn (Không bắt buộc): Hàm map() được gọi khi thực thi trên từng phần tử */

/* thisArg (Không bắt buộc): Giá trị được sử dụng như this,
  thường là tham chiếu đến phạm vi của đối tượng gọi */

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
Array.isArray([1, 2, 3]);    // true
Array.isArray({ foo: 123 }); // false
Array.isArray('foobar');     // false
Array.isArray(undefined);    // false

Cú pháp

Array.isArray(value)

// value: Giá trị được kiểm tra

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

Method Chức năng Giá trị trả về Thay đổi mảng ban đầu
concat () Nối 2 hay nhiều mảng Mảng mới sau khi nối Không
filter () Lọc ra các phần tử thoả mãn điều kiện Mảng mới sau khi lọc Không
find() Lọc ra phần tử đầu tiên thoả mãn điều kiện Giá trị ĐẦU TIÊN tìm thấy/undefined Không
forEach () Duyệt qua từng phần tử của mảng undefined -
includes () Kiểm tra xem phần tử có tồn tại trong mảng hay không true/false Không
indexOf () Tìm kiếm vị trí của phần tử trong mảng Index ĐẦU TIÊN tìm thấy/-1 Không
join() Tạo ra một chuỗi mới Chuỗ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 đầu Mảng mới sau khi biến đổi Không
pop() Xoá phần tử cuối cùng ra khỏi mảng Phần tử đã bị xoá/undefined
shift () Xoá phần tử đầu tiên ra khỏi mảng Phầ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ọn Không
reverse () Đảo ngược mảng Mảng sau khi đảo ngược
some() Kiểm tra có ít nhất 1 phần tử thoả mãn điều kiện true/false Không
sort() Sắp xếp các phần tử trong mảng Mảng sau khi được sắp xếp
slice () Cắt bỏ một số phần tử của mảng Mảng mới sau khi cắt Không
splice () Thêm/xoá phần tử trong mảng Mảng chứa các phần tử đã bị xoá
Array.from () Tạo mới một mảng Mảng mới -
Array.isArray () Kiểm tra giá trị truyền vào có phải là một mảng true/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 !

All Rights Reserved