Gộp Mảng Trong JavaScript

Có thể bạn quan tâm

Hướng dẫn cách gộp mảng trong JavaScript. Bạn sẽ học được 3 phương pháp gộp mảng căn bản trong JavaScript sau bài học này.

Gộp mảng trong JavaScript là gì

Gộp mảng trong JavaScript hay còn gọi là nối mảng javascript hoặc ghép mảng trong javascript, là các xử lý nhằm gộp toàn bộ các phần tử của một mảng vào cuối của một mảng khác.

Khác với chuỗi thì chúng ta không thể đơn giản sử dụng toán tử cộng + để tiến hành cộng 2 mảng trong javascript, vì mảng sẽ bị chuyển thành kiểu chuỗi rồi bị nối lại thành chuỗi kết quả như sau:

Copy

let arr1 = [1, 3, 5];let arr2 = [2, 4, 6, 8];let result = arr1 + arr2;console.log(result);// 1,3,52,4,6,8console.log(typeof result);// string

Thay vào đó thì chúng ta có 3 phương pháp để gộp mảng trong JavaScript như sau:

Phương thức concat(): Gộp nhiều mảng mà không thay đổi mảng ban đầu trong JavaScript
Phương thức push(): Ghép nối 2 mảng và thay đổi mảng ban đầu trong JavaScript
Toán tử ba chấm: nối nhiều mảng và tạo ra mảng mới trong JavaScript

Gộp nhiều mảng trong JavaScript bằng phương thức concat()

Phương thức concat() là phương thức thông dụng nhất được sử dụng để gộp mảng trong JavaScript.

Xem thêm: Phương thức concat trong JavaScript

Phương thức concat() có khả năng gộp nhiều mảng lại với nhau và trả về một mảng kết quả chứa toàn bộ các phần tử của chúng. Chúng ta có thể chỉ định một mảng trong số chúng và gán các mảng còn lại vào nó, hoặc là tạo ra một mảng khác và gán toàn bộ các mảng vào.

Và dựa vào đó mà chúng ta có 2 style dùng concat() để gộp mảng trong JavaScript như sau.

Gộp các mảng vào một mảng chỉ định bằng concat()

Với style này, chúng ta chỉ định một mảng đích từ các mảng ban đầu, và gán các mảng còn lại vào nó như sau:

Copy

let arr1 = [1, 3, 5];let arr2 = [2, 4, 6];let arr3 = [7, 8];let result = arr1.concat(arr2, arr3)console.log(result);// [ 1, 3, 5, 2, 4, 6, 7, 8]

Lưu ý, cơ chế hoạt động của concat() không làm thay đổi các mảng ban đầu, nên mặc dù các mảng arr2 và arr3 được gộp vào arr1 như trên, nhưng kết quả gộp sẽ được gán vào một mảng mới, nên mảng arr1 sẽ không bị thay đổi với cách viết này.

Gộp các mảng vào một mảng trống bằng concat()

Với style này, thay vì chỉ định mảng đích từ trong các mảng ban đầu, chúng ta gán toàn bộ chúng vào một mảng trống như sau:

Copy

let arr1 = [1, 3, 5];let arr2 = [2, 4, 6];let arr3 = [7, 8];let result = [].concat(arr1,arr2, arr3)console.log(result);// [ 1, 3, 5, 2, 4, 6, 7, 8]

Và tất nhiên thì kết quả cũng sẽ giống với style 1 dùng concat ở trên.

Ghép 2 mảng trong javascript bằng phương thức push()

Trong bài Thêm phần tử vào mảng trong JavaScript chúng ta đã biết cách sử dụng phương thức push() để thêm một hoặc nhiều phần tử vào cuối mảng JavaScript.

Ứng dụng phương thức này kết hợp với toán tử 3 chấm trong JavaScript, chúng ta có thể lấy và thêm từng phần tử của một mảng vào một mảng khác, qua đó có thể thực hiện được việc ghép 2 mảng trong javascript rất đơn giản như sau:

Copy

let arr1 = [1, 3, 5];let arr2 = [2, 4, 6];arr1.push(...arr2);console.log(arr1);// [ 1, 3, 5, 2, 4, 6 ]

Nếu không sử dụng toán tử 3 chấm, chúng ta cũng có thể sử dụng các phương pháp khác để có thể lấy lần lượt các phần tử trong mảng javascript, ví dụ như vòng lặp forEach mà chúng ta đã học trong bài forEach trong JavaScript và cách lấy phần tử trong mảng theo thứ tự chẳng hạn.

Copy

let arr1 = [1, 3, 5];let arr2 = [2, 4, 6];arr2.forEach(function(element){ arr1.push(element);});console.log(arr1);// [ 1, 3, 5, 2, 4, 6 ]

Lưu ý là khác với cách gộp mảng bằng concat() thì phương pháp sử dụng push() sẽ làm thay đổi mảng ban đầu.

Nối mảng trong javascript bằng toán tử 3 chấm

Toán tử 3 chấm trong JavaScript có rất nhiều ứng dụng, và một trong số đó chính là nối mảng trong javascript.

Cú pháp sử dụng toán tử 3 chấm để nối mảng trong JavaScript như sau:

let result = [...arr1, ...arr2, ...arr3, ...arr4];

Trong đó các array sẽ được thêm toán tử 3 chấm đằng trước đó, và được phân tách với nhau bởi dấu phẩy khi viết.

Ví dụ cụ thể, chúng ta ghép 2 mảng trong javascript bằng toán tử 3 chấm như sau:

Copy

let arr1 = [1, 3, 5];let arr2 = [2, 4, 6];let result = [...arr1, ...arr2];console.log(result);//[ 1, 3, 5, 2, 4, 6 ]

Tương tự khi nối nhiều mảng trong javascript bằng toán tử 3 chấm :

Copy

let arr1 = [1, 3, 5];let arr2 = [2, 4, 6];let arr3 = [7, 6];let result = [...arr1, ...arr2, ...arr3];console.log(result);// [ 1, 3, 5, 2, 4, 6, 7, 8]

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách gộp nối mảng trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/gop-mang-trong-javascript/

Từ khóa » Nối Mảng Javascript

Gộp Mảng Trong JavaScript