Cách nối mảng trong javascript

Nội dung chính Show

Gộp mảng trong JavaScript là gì
Gộp nhiều mảng trong JavaScript bằng phương thức concat()
Gộp các mảng vào một mảng chỉ định bằng concat()
Gộp các mảng vào một mảng trống bằng concat()
Ghép 2 mảng trong javascript bằng phương thức push()
Nối mảng trong javascript bằng toán tử 3 chấm
Tổng kết

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:

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6, 8];

let result = arr1 + arr2;
console.log(result);


console.log(typeof result);

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:

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr3 = [7, 8];

let result  = arr1.concat(arr2, arr3)
console.log(result);

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:

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr3 = [7, 8];

let result = [].concat(arr1,arr2, arr3)
console.log(result);

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:

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];

arr1.push(...arr2);

console.log(arr1);

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.

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

console.log(arr1);

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:

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let result = [...arr1, ...arr2];

console.log(result);

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

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr3 = [7, 6];
let result = [...arr1, ...arr2, ...arr3];

console.log(result);

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.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a>&nbsp;và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"></p><h3 style="font-size:15px">Bài viết liên quan</h3><ul class="popular-posts"><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/array-reduce-trong-javascript/" title="Array reduce trong JavaScript" rel="bookmark">Array reduce trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/array-map-trong-javascript/" title="Array map trong JavaScript" rel="bookmark">Array map trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/cat-mang-trong-javascript/" title="Cắt mảng trong JavaScript (slice)" rel="bookmark">Cắt mảng trong JavaScript (slice)</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/array-filter-trong-javascript/" title="Array filter trong JavaScript" rel="bookmark">Array filter trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/concat-trong-javascript/" title="Phương thức concat() trong JavaScript" rel="bookmark">Phương thức concat() trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/dem-so-lan-xuat-hien-phan-tu-trong-mang-javascript/" title="Đếm số lần xuất hiện phần tử trong mảng JavaScript" rel="bookmark">Đếm số lần xuất hiện phần tử trong mảng JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/chuyen-mang-thanh-chuoi-trong-javascript/" title="Chuyển mảng thành chuỗi trong javascript" rel="bookmark">Chuyển mảng thành chuỗi trong javascript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/dem-so-phan-tu-trong-mang-javascript/" title="Đếm số phần tử trong mảng JavaScript (length)" rel="bookmark">Đếm số phần tử trong mảng JavaScript (length)</a></h3></div></li></ul></div><div id="keugoi"><span>Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!</span></div><section class="icon-bar-2" style="border-bottom:dotted grey .3px!important"><a target="_blank" title="chia sẻ qua facebook" rel="noopener noreferrer" href="https://www.facebook.com/sharer/sharer.php?u=https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/gop-mang-trong-javascript/" class="facebook"><i class="fa fa-facebook"></i></a> <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/intent/tweet?url=https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/gop-mang-trong-javascript/" title="chia sẻ qua twitter" class="twitter"><i class="fa fa-twitter"></i></a> <a target="_blank" rel="noopener noreferrer" href="https://getpocket.com/edit?url=https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/gop-mang-trong-javascript/" title="chia sẻ qua pocket" class="pocket"><i class="fa fa-get-pocket"></i></a> <span class="zalo-share-button" title="chia sẻ qua zalo" style="margin-left:18px;margin-bottom:-3px" data-href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/gop-mang-trong-javascript/" data-oaid="579745863508352884" data-layout="3" data-color="blue" data-customize="false"></span></section><p class="ico-folder"><a target="_blank" href="https://laptrinhcanban.com/"><span itemprop="HOME">HOME</span></a><span class="sya"></span>>> <a target="_blank" class="article-category-link" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/">học javascript - lập trình javascript cơ bản</a>>><a target="_blank" class="article-category-link" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/">04. mảng trong javascript</a></p><nav id="article-nav"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/duyet-mang-trong-javascript/" id="article-nav-older" class="article-nav-link-wrap" style="float:left;text-align:right;padding-right:20px"><strong class="article-nav-caption">Bài sau</strong><div class="article-nav-title">Duyệt mảng trong JavaScript</div></a><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/duyet-mang-2-chieu-trong-javascript/" id="article-nav-newer" class="article-nav-link-wrap" style="float:right;text-align:left;padding-left:20px"><strong class="article-nav-caption">Bài tiếp</strong><div class="article-nav-title">Duyệt mảng 2 chiều trong JavaScript</div></a><span id="ezoic-pub-ad-placeholder-611" class="ezoic-adpicker-ad"></span></nav><div id="recent_posts_down"><div class="widget_athemes_tabs"><ul id="widget-tab" class="clearfix widget-tab-nav"><li class="active">Bài viết mới nhất</li></ul><div class="widget"><ul><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-chuoi-trong-php/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban45.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-chuoi-trong-php/">Tách chuỗi trong PHP (explode, preg_split)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/cat-chuoi-trong-php/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban21.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/cat-chuoi-trong-php/">Cắt chuỗi trong PHP (substr, mb_substr)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-chuoi-thanh-mang-trong-php/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban57.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-chuoi-thanh-mang-trong-php/">Tách chuỗi thành mảng trong PHP (explode)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tim-kiem-chuoi-trong-php/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban43.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tim-kiem-chuoi-trong-php/">Tìm kiếm chuỗi trong PHP (strpos)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/dem-so-lan-xuat-hien-cua-ky-tu-trong-chuoi-php/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban52.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/dem-so-lan-xuat-hien-cua-ky-tu-trong-chuoi-php/">Đếm số lần xuất hiện của ký tự và chuỗi trong chuỗi PHP (substr_count)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/chuyen-chuoi-thanh-mang-trong-php/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban47.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/chuyen-chuoi-thanh-mang-trong-php/">Chuyển chuỗi thành mảng trong PHP (str_split, mb_str_split)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-tung-ky-tu-trong-chuoi-php/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban47.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-tung-ky-tu-trong-chuoi-php/">Tách từng ký tự trong chuỗi PHP (substr, preg_split)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/xoa-ky-tu-trong-chuoi-php/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban15.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/xoa-ky-tu-trong-chuoi-php/">Xóa ký tự trong chuỗi PHP</a></span> <span>tháng 9 15, 2022</span></div></li></ul></div></div></div><footer class="entry-meta entry-footer"></footer><hr class="entry-footer-hr"></div><div id="profiletitle2">Profile</div><div id="profileblock2"><div id="profilephoto2"><a target="_blank" rel="noopener" href="https://www.facebook.com/mr.nchita"><img width="100" height="100" alt="きよしです！笑" ezimgfmt="rs rscb2 src ng ngcb2" class="ezlazyload" data-ezsrc="/css/images/kiyoshi.webp"></a></div><div id="profiletext2"><p>Tác giả : <a href="https://www.facebook.com/mr.nchita" target="_blank" rel="nofollow noopener">Kiyoshi (Chis Thanh)</a></p><p>Kiyoshi là một <a href="https://www.youtube.com/c/ChisThanh" target="_blank" rel="nofollow noopener">cựu du học sinh tại Nhật Bản</a>. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.<span id="ezoic-pub-ad-placeholder-196" class="ezoic-adpicker-ad"></span></p></div></div></div></article><aside id="sidebar"><div id="sidebar_first"><div class="search" style="margin-top:-30px"><div id="fb-root"></div><script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v12.0&appId=3084959888222500&autoLogAppEvents=1" nonce="KPkvxeh4">