Một số kinh nghiệm làm việc với mảng trong JavaScript dành cho bạn

JavaScript hiện nay là một ngôn ngữ phổ biến với khả năng làm được cả Frontend và Backend, nhờ vậy mà nó được nhiều anh em lập trình viên lựa chọn học và làm việc. JS dễ học, dễ hiểu nhưng cũng khá dễ nhầm lẫn đối với người học và luôn ẩn chứa những xử lý “ảo diệu” khi viết code. Vì thế để viết được những đoạn code JS tối ưu, hợp lý, ngắn gọn là điều không hề đơn giản. Bài viết hôm nay mình sẽ cùng các bạn tìm hiểu qua về một số kinh nghiệm làm việc với mảng (Array) trong JavaScript nhé.

1. Mảng 2 chiều

Thực tế, JavaScript không hỗ trợ mảng 2 chiều, vậy làm thế nào để chúng ta tạo ra mảng 2 chiều trong JS. Cách chúng ta thường nghĩ tới là tạo 1 đối tượng Array với các phần tử con trong mảng đó lại là 1 Array khác; hay nói cách khác là sử dụng mảng trong mảng.

let mang2Chieu = new Array();
mang2Chieu[0] = new Array("a", "b", "c", "d", "e");
mang2Chieu[1] = new Array(1, 2, 3, 4, 5);
mang2Chieu[2] = new Array("A", "B", "C", "D", "E");

Nhưng cũng có 1 cách đơn giản hơn để tạo ra mảng 2 chiều kích thước [i, j] bằng cách tạo ra mảng 1 chiều với kích thước i * j. Và để truy xuất vào phần tử ở vị trí [i1, j1], chúng ta sẽ thông qua index = i1 * i + j1. Cách này cũng giúp tối ưu bộ nhớ hơn nhiều và có thể áp dụng trong các ngôn ngữ lập trình khác nhau.

2. Xóa một mảng

Làm thế nào để bạn xóa toàn bộ dữ liệu một mảng một cách nhanh chóng và dễ dàng?

Cách đơn giản nhất là sử dụng câu lệnh set độ dài của mảng về 0. 

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

mang.length = 0;
console.log(mang); // []

3. Chuyển một mảng về thành Object

Nếu bạn muốn chuyển một Array sang dạng Object, có nhiều phương án bạn có thể dùng khi function map, dùng vòng lặp for,… để biến đổi dữ liệu. Nhưng trong JS có 1 cách ngắn gọn hơn rất nhiều:

const mang = ["a", "b", "c", "d", "e"];
let mangToObj = { ...mang };

console.log(mangToObj); // { 0: "a", 1: "b", 2: "c", 3: "d", 4: "e" }

4. Xáo trộn một mảng

Bạn đang cần xáo trộn vị trí của các phần tử trong một mảng, có cần thiết lại phải sử dụng một vòng lặp khác hay không? Câu trả lời là không. Với việc sử dụng hàm Math.random, bạn dễ dàng đạt được yêu cầu như dưới đây:

const mang = ["a", "b", "c", "d", "e"];
let xaoTronMang = mang.sort(() => 0.5 - Math.random());
console.log(xaoTronMang); //['a', 'd', 'e', 'b', 'c']
xaoTronMang = mang.sort(() => 0.5 - Math.random());
console.log(xaoTronMang); //['e', 'b', 'c', 'd', 'a']
xaoTronMang = mang.sort(() => 0.5 - Math.random());
console.log(xaoTronMang); //['d', 'e', 'b', 'a', 'c']

5. Loại bỏ các phần tử trùng lặp trong một mảng

Lại một lần nữa bạn có thể nghĩ đến việc sử dụng vòng lặp cho bài toán này. Mặc dù vậy thì cách ngắn hơn là sử dụng kiểu dữ liệu Set trong JavaScript. Set là một tập hợp các giá trị mà trong đó mỗi giá trị sẽ chỉ xuất hiện 1 lần duy nhất. Vì thế chúng ta sẽ convert mảng đầu vào về kiểu dữ liệu Set và nó sẽ giúp loại bỏ các giá trị trùng lặp.

const mang = ["a", "b", "a", "c", "b"];
var mangDuyNhat = [...new Set(mang)];
console.log(mangDuyNhat); // ["a", "b", "c"]

6. So sánh 2 mảng

Với 2 mảng đầu vào, làm sao bạn so sánh được xem 2 mảng đó có bằng nhau hay không? Bạn sẽ có thể nghĩ ngay đến việc sử dụng vòng lặp duyệt từng phần tử của mảng này xem có tồn tại trong mảng kia hay không và ngược lại. Tuy nhiên đấy là một cách xử lý khá cồng kềnh. Một ý tưởng đơn giản hơn và việc chuyển nó về dạng string với JSON.stringify và chỉ cần 1 phép so sánh 2 chuỗi string được tạo ra.

const soSanhMang = (mang1, mang2) =>
  JSON.stringify(mang1.sort()) === JSON.stringify(mang2.sort());

soSanhMang([1, 2, 3], [1, 3, 2]); // true
soSanhMang([1, 2, 3], [1, "2", 3]); // false

7. Loại bỏ các giá trị falsy trong mảng 

Falsy values trong JavaScript bao gồm: 0, false, NaN, undefined, null, ” (xâu rỗng)

Chúng ta cũng có khái niệm truthy values là các giá trị được hiểu là true trong ngữ cảnh Boolean; hoặc cũng có thể nói cách khác truthy values là những giá trị không thuộc Falsy values.

Để loại bỏ những giá trị Falsy values, chúng ta có đoạn code đơn giản như dưới đây:

const mang = [
  0,
  false,
  NaN,
  undefined,
  "",
  null,
  1,
  true,
  "Hello World",
  { name: "value" },
];
const truthyValues = mang.filter(Boolean);
console.log(truthyValues); // [ 1, true, 'Hello World', { name: 'value' } ]

Kết bài

Trên đây là một số kinh nghiệm khi viết code JavaScript xử lý dữ liệu mảng mà mình tổng hợp được, còn rất nhiều các xử lý hay và thú vị khác trong JS mà bạn có thể tự tìm hiểu hay rút ra trong quá trình lập trình, làm việc trong dự án. Hy vọng bài viết hữu ích dành cho bạn và hẹn gặp lại trong các bài viết tiếp theo của mình.

Tác giả: Phạm Minh Khoa

Có thể bạn quan tâm:

• Tìm hiểu phương thức slice của mảng trong JavaScript
• 3 cách xóa phần tử bị duplicate trong mảng
• Các phương thức trên array cần nhớ

Xem thêm các việc làm IT hấp dẫn tại TopDev