Đã đăng vào thg 11 28, 2023 6:46 SA 4 phút đọc

253

Làm Việc Với Mảng (Array) Trong JavaScript

Trong khuôn khổ bài viết này, chúng ta sẽ cùng tìm hiểu về về Array trong Javascript để có những trải nghiệm tốt nhất khi làm việc cũng với nó.

Bạn có thể tìm thấy tài liệu rất nhiều về cách làm việc với mảng. Vì vậy mình chỉ đề cập đến các phương thức mà mình thấy hay dùng thôi nhé anh em☺️

Array là gì ? dùng để làm gì ?

Trước mắt Array thì vẫn là một Object. Nó cho phép lưu trữ một tập hợp nhiều phần tử dưới một tên biến duy nhất và có các phần tử để thực hiện các thao tác mảng phổ biến. Các phần tử được phân tách bởi dấu phẩy, và phần tử có thể là bất cứ thứ gì (function,object,array,string,...)
Thế nên để bạn thực hiện được với một Array thì bất cứ phương thức nào cũng sẽ chạy qua từng phần tử của mảng, và mỗi phương thức sẽ có chức năng riêng của nó. Đảm bảo được mục đích bạn đang muốn sử dụng. Việc của bạn là nhớ và áp dụng phương thức nào phù hợp ít tốn thời gian nhất có thể Điều này hãy luôn nhớ và áp dụng vào phần dưới mình sẽ không nhắc lại ở dưới

Array.map()

map() : Bạn cần phải nắm rõ khi qua map() Tạo ra mảng mới và thực thi một hàm lên từng phần tử(render nếu code bằng React,...)

map() : không thay đổi mảng ban đầu


const array = [1, 4, 9, 16];

const map = array.map(function(item) {
  return item * item;
});

console.log(map);   // > Array [1, 16, 81, 256]
console.log(array); // > Array [1, 4, 9, 16]
//Mảng array vẫn giữ nguyên nhé.

Cú Pháp :


let newArray = array.map(function(currentValue, index, array) {
  // ...code...
  return modifiedValue;
});
  // currentValue: Phần tử đang được xử lý trong mảng
  // index (không bắt buộc): Chỉ mục (index) của phần tử đang được xử lý
  // array (không bắt buộc): Mảng nguồn mà hàm filter() đang xử lý

Array.filter()

filter() : Như tên gọi -> Dùng để lọc các phần tử thỏa mãn điều kiện nào đó của bạn đưa ra.

filter() : Không làm thay đổi mảng ban đầu.

filter() : Trả về mảng mới sau khi lọc - Rỗng khi k có phần tử nào thõa mãn.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(function(word) {
  return word.length > 6;
});

console.log(result); // > Array ["exuberant", "destruction", "present"]
console.log(words);  // > Array ["spray", "limit", "elite", "exuberant", "destruction", "present"]

Cú Pháp :


let newArray = array.filter(function(currentValue, index, array) {
  // ...code...
  return condition;
});
  // currentValue: Phần tử đang được xử lý trong mảng
  // index (không bắt buộc): Chỉ mục (index) của phần tử đang được xử lý
  // array (không bắt buộc): Mảng nguồn mà hàm filter() đang xử lý

Array.reduce() <=> Tích Tụ

reduce(): Áp dụng một hàm tích tụ lên từng phần tử của mảng để giảm mảng thành một giá trị duy nhất. Nói trắng ra là đưa mảng thành một giá trị, như tính tổng tiền trong giỏ hàng của User,...

let numbers = [1, 2, 3, 4, 5];

// Sử dụng reduce để tính tổng các phần tử trong mảng
let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // In ra: 15

Cú Pháp :

let firstMatchingElement = array.find(function(currentValue, index, array) {
 // ...code...
 return condition;
});

 // currentValue: Phần tử đang được xử lý trong mảng
 // index (không bắt buộc): Chỉ mục (index) của phần tử đang được xử lý
 // array (không bắt buộc): Mảng nguồn mà hàm filter() đang xử lý

Array.find()

find() : Lọc phần tử giống filter() tuy nhiên khác ở chỗ find() trả về giá trị đầu tiên được tìm thấy ở trong mảng và undefined nếu không tìm thấy

find() Chỉ trả về một phần tử duy nhất, nếu phía sau vẫn có phần tử thõa mãn thì nó bỏ qua hết. Lưu ý nè.

find(): Không làm thay đổi mảng ban đầu


var array = [5, 12, 8, 130, 44];
var found = array.find(function(element) {
  return element > 10;
});

console.log(found); // > 12
console.log(array); // > Array [5, 12, 8, 130, 44]

Cú Pháp :

let firstMatchingElement = array.find(function(currentValue, index, array) {
 // ...code...
 return condition;
});


 // currentValue: Phần tử đang được xử lý trong mảng
 // index (không bắt buộc): Chỉ mục (index) của phần tử đang được xử lý
 // array (không bắt buộc): Mảng nguồn mà hàm filter() đang xử lý

**Array.includes() **

includes() kiểm tra xem phần tử đã cho có tồn tại trong mảng hay không

includes() không làm thay đổi mảng ban đầu

includes() trả về Boolean


let fruits = ['apple', 'banana', 'orange', 'grape'];

// Kiểm tra xem 'banana' có trong mảng không
let isBananaIncluded = fruits.includes('banana');
console.log(isBananaIncluded); // In ra: true

// Kiểm tra xem 'kiwi' có trong mảng không
let isKiwiIncluded = fruits.includes('kiwi');
console.log(isKiwiIncluded); // In ra: false

// Kiểm tra từ vị trí có chỉ số 2 trở đi
let isOrangeIncluded = fruits.includes('orange', 2);
console.log(isOrangeIncluded); // In ra: true

Cú Pháp

array.includes(searchElement[, fromIndex])```

Array.indexOf()

indexOf() Trả về vị trí của phần tử còn find() => trả về Phần tử (nhớ nhé)

indexOf() Không làm thay đổi mảng ban đầu

indexOf() trả về -1 nếu không có phần tử nào thỏa mãn điều kiện (Xem ví dụ để sử dụng -1)


let fruits = ['apple', 'banana', 'orange', 'grape'];

// Kiểm tra xem 'banana' có trong mảng không
let bananaIndex = fruits.indexOf('banana');

if (bananaIndex !== -1) {
  console.log(`'banana' có trong mảng ở chỉ số ${bananaIndex}`);
} else {
  console.log(`'banana' không có trong mảng`);
}

Tạm kết

Với 6 phương thức trên nếu bạn nắm rõ và làm việc quen với nó thì khi làm việc với mảng sẽ nhẹ nhàng hơn rất nhiều.
Bài viết mình muốn chia sẽ về cách làm việc với mảng một cách tự tin hơn cho các bạn mới học, mỗi phương thức bạn cần biết nó trả về cái gì để nắm rõ code mình đang viết cái gì nhé.
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 ở part 2 nhé !

Mục lục