Kiểu dữ liệu Array khá phổ biến trong các ngôn ngữ lập trình. Như tiêu đề bài viết, mình giới thiệu cho các bạn cách gộp 2 array thành 1 array trong Javascript.
Thoạt đầu, bạn thường nghĩ đến + nhưng nó không phải là cú pháp cho việc merge array lại với nhau.
var a = [1, 2, 3] var b = [4, 5, 6] console.log[a+b] //1,2,34,5,6
Kết quả chưa đúng phải không nào. Bạn cũng đừng nhầm lẫn sử dụng hàm `push` của php nhé.
Chúng ta sử dụng hàm concat để gộp 2 array lại với nhau nha.
var a = [1, 2, 3] var b = [4, 5, 6] var c = a.concat[b] console.log[c] //[1, 2, 3, 4, 5, 6]
Vậy là ok nhé. Chúng ta sử dụng hàm concat cho việc gộp 2 array trong javascript nha!
Cú pháp và cách sử dụng
Phương thức concat[] được dùng để nối hai hay nhiều mảng lại với nhau.
Cú pháp:
array1.concat[array2, array3, array4, ...., arrayN];var a = ["Samsung", "HTC", "Sony"];
var b = ["Apple", "Nokia"];
var c = a.concat[b];Xem ví dụ
var a = ["Samsung", "HTC", "Sony"];
var b = ["Apple", "Nokia"];
var c = ["Lumia"];
var d = ["Lenovo", "Acer"];
var e = c.concat[d, a, b];Xem ví dụ
Lưu ý: Các phần tử của mảng được nối từ các mảng con sẽ được sắp xếp theo đúng thứ tự từ trái qua phải. Điển hình ở ví dụ 2, các phần tử của mảng e được xếp theo đúng thứ tự nối mảng.
- c: Lumia
- d: Lenovo, Acer
- a: Samsung, HTC, Sony
- b: Apple, Nokia
- Do đó các phần tử của mảng e sẽ là: Lumia, Lenovo, Acer, Samsung, HTC, Sony, Apple, Nokia
Việc phải ghép nối nhiều mảng thành một mảng duy nhất là một trong những task mà bạn rất hay gặp. Trong javascript, bạn có khá nhiều cách tiếp cận để thực hiện việc này. Bạn có thể chỉnh sửa trực tiếp trên mảng đầu vào, hoặc giữ nguyên tất cả các mảng đầu vào và trả về một mảng mới.
Trong bài viết này, chúng ta sẽ cùng nhau so sánh các cách tiếp cận đó, xem cách nào hay hơn nhé:
- Phương pháp 1: Nối các phần tử vào một mảng hiện có bằng
Array.prototype.push[] - Phương pháp 2: Nối các phần tử vào một mảng mới bằng
Array.prototype.push[] - Phương pháp 3: Sử dụng prototype
concat[] - Phương pháp 4: Sử dụng toán từ spread […]
Chúng ta cùng nhau khám phá nhé!
Nội dung chính của bài viết
- Nối các phần tử vào một mảng hiện có bằng Array.prototype.push[]
- Nối các phần tử vào một mảng mới bằng Array.prototype.push[]
- Sử dụng Array.prototype.concat[]
- Sử dụng toán từ spread[…]
- Tạm kết
Nối các phần tử vào một mảng hiện có bằng Array.prototype.push[]
Đầu tiên, cũng là phương pháp cổ điển nhất. Đó là sử dụng hàm Array.prototype.push[]. Giả sử, chúng ta có 2 mảng cần ghép nối sau:
const array1 = [1, 2, 3]; const array2 = [4, 5, 6];
Suy nghĩ đầu tiên mà bạn nghĩ tới là gì? Có phải là sẽ duyệt một mảng và ghép từng phần tử vào mảng còn lại, đúng không?
for [const element of array2] {
array1.push[element];
}
Ở đây, mình cải tiến mã nguồn cho đẹp hơn một chút, thay vì phải dùng vòng for, chúng ta sử dụng
toán tử spread […]
array1.push[...array2];
Kết quả bạn nhận được là tương tự nhau, mảng array1 giờ chứa tất cả phần tử của cả 2 mảng, còn mảng array2 thì giữ nguyên.
array1; // [1, 2, 3, 4, 5, 6] array2; // [4, 5, 6]
Đôi khi, việc thay đổi nội dung của mảng đích không phải là điều tốt. Tại sao ư?
Bởi vì, khi bạn viết một hàm nhận các đối số truyền vào. Tất cả thay đổi chỉ nên xảy ra bên trong hàm đó mà thôi, khi kết thúc hàm, đối số nên được giữ nguyên giá trị, điều này để tránh việc gây ảnh hưởng tới các chức năng khác, khi mà chúng cũng sử dụng giá trị của đối số đó.
Đó là lý do vì sao chúng ta nghĩ tới giải pháp tiếp theo sau đâu.
Nối các phần tử vào một mảng mới bằng Array.prototype.push[]
Để giải quyết yêu cầu không làm thay đổi bất kỳ nội dung của mảng truyền vào, chúng ta đơn giản là tạo một mảng rỗng mới. Sau đó, sẽ lần lượt thêm các phần tử của hai mảng kia vào mảng rỗng đó.
const concatenated = []; concatenated.push[...array1]; concatenated.push[...array2];
Đây là kết quả khi thực hiện:
array1; // [1, 2, 3] array2; // [4, 5, 6] concatenated; // [1, 2, 3, 4, 5, 6]
Sử dụng Array.prototype.concat[]
Lúc trước, chúng ta sử dụng hàm push[] để nối hai mảng với nhau. Giờ mình cho bạn thêm một lựa chọn nữa. Đó là sử dụng Array.prototype.concat[].
Vẫn lấy ví dụ là cần ghép nối hai mảng sau:
const array1 = [1, 2, 3]; const array2 = [4, 5, 6];
Chúng ta gọi hàm concat[] của mảng array1 và truyền array2 vào.
const concatenated = array1.concat[array2];
Vì hàm concat[] là hàm non-mutating, tức là hàm không làm thay đổi nội dung giá trị truyền vào. Do đó, kết quả chúng ta nhận được giống như phương
pháp thứ 2 mà mình đã trình bày ở trên.
array1; // [1, 2, 3] array2; // [4, 5, 6] concatenated; // [1, 2, 3, 4, 5, 6]
Cũng giống như hàm push[], hàm concat[] chấp nhận nhiều tham số nên bạn có thể ghép nối bao nhiêu mảng cùng lúc cũng được.
const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const array3 = [7, 8, 9]; const concatenated = array1.concat[array2, array3];
Sau đây là một thủ thuật nhỏ: Cách để bạn làm phẳng một mảng lồng nhau bằng hàm concat. Ví dụ: mình có một mảng với các phần tử là các mảng như sau:
arrays; // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
Bùm! Cách làm đơn giản như sau:
const concatenated = [].concat[...arrays];
Và đây là kết quả bạn nhận được
concatenated; // [1, 2, 3, 4, 5, 6, 7, 8, 9]
Sử dụng toán từ spread[…]
Phần cuối cùng bài viết, chúng ta sẽ sử dụng toán từ spread[…] để ghép nối hai mảng. Cú pháp như sau:
const concatenated = [...array1, ...array2];
Điều tuyệt vời của toán tử spread là chúng có thể gọi iteration protocol của phần tử mà nó đang thao tác. Điều này có nghĩa là toán tử spread có khả năng hoạt động với bất kỳ iterable nào, không chỉ iterable của array.
Mình sẽ lấy một ví dụ sử dụng toán tử spread[…] để ghép nối hai mảng, đồng thời loại bỏ những phần tử bị trùng lặp, đảm bảo mỗi phần tử trong mảng là duy nhất [unique] bằng cách kết hợp spread[…] với Set iterable.
const array1 = [1, 2, 3]; const array2 = [2, 3, 4]; const uniques = [...new Set[[...array1, ...array2]]];
Kết quả thu được như sau:
array1; // [1, 2, 3] array2; // [2, 3, 4] uniques; // [1, 2, 3, 4]
Tạm kết
Qua bài viết này, mình đã giới thiệu một số phương pháp để bạn có thể ghép nối nhiều mảng lại thành một.
Tùy vào cách tiếp cận hoặc yêu cầu cụ thể của dự án mà bạn chọn cho mình một cách viết hợp lý nhất nhé.
😌 Đọc thêm:
- Cách sử dụng Javascript Class
- 5 thủ thuật hay với Javascript Promise
- Toàn tập về Javascript Async Await – Tại sao lại nên dùng?