Video học lập trình mỗi ngày

Trong bài viết này tôi và devjs tìm hiểu về javascript array concat. Concat javascript là gì? Và sử dụng es6 để merge array javascript. Ngoài ra tìm hiểu thêm làm thế nào để merge 2 arrays of objects javascript

Concat javascript là gì?

Concat trong javascript có nghĩa là nối hai hay nhiều array lại với nhau. Và nó tạo tạo một mảng mới, và điều quang trọng nhất là có thể thay đổi giá trị array ban đầu. Để có thể thay đổi array ban đầu hay không tùy thuộc vào cách merge array javascript của mỗi lập trình viên chúng ta. Sau đây chúng ta sẽ lần lượt tìm hiểu những cách mà javascript concat có thể làm được.

javascript array concat es5

Với 2 arrays:

var array1 = [1, 2];
var array2 = [3, 4, 5];
var array3 = array1.concat(array2); // returns a new array
/*
Output:
[1, 2, 3, 4, 5]
*/

Với concat multiple array javascript

var array1 = [1, 2];
var array2 = [3, 4, 5];
var array3 = [6,7,8]
var array4 = array1.concat(array2, array3); // returns a new array
/*
Output:
[1, 2, 3, 4, 5, 6, 7, 8]
*/

Notes: Như đã nói ở đầu bài, khi sử dụng concat arrays js thì có thể không thay đổi arrays ban đầu. Nhưng nếu như bạn muốn thay đổi arrays ban đầu thì xem cách dưới đây. Ví dụ:

var array1 = [1, 2];
var array2 = [3, 4, 5];
array1.push.apply(array1, array2);// array1 = [1, 2, 3, 4, 5]
/*
Output:
[1, 2, 3, 4, 5]
*/

Khuyến nghị: Tìm hiểu về apply(), bind(), call() in javascript**

Notes: Nếu như array2 có nhiều items (>100,000 items), thì bạn có thể get một error (do sử dụng apply()). Do đó bạn có thể sử dụng cách cơ bản:

array2.forEach(function (elem) {
 array1.push(elem);
});

Như ta thấy đấy có nhiều bạn đang đọc và tặc lưỡi rằng ồ đó là cách cũ rồi, tưởng có gì mới chứ. Đúng vậy, và giờ đây chúng ta sẽ đi tìm hiểu es6 giúp được nhiểu hơn không trong vấn đề javascript array concat es6. Cứ bình tĩnh ha.

Merge array javascript es6

Ta vẫn lấy những ví dụ của phần trên làm luôn cho các bạn dễ hình dung

Với 2 arrays:

var array1 = [1, 2];
var array2 = [3, 4, 5];
var array3 = [...array1, ...array2]; // returns a new array
/*
Output:
[1, 2, 3, 4, 5]
*/

Multiple Arrays

var array1 = [1, 2];
var array2 = [3, 4, 5];
var array3 = [6,7,8]
var arrConc = [...array1, ...array2, ...array3]
/*
Output:
[1, 2, 3, 4, 5, 6, 7, 8]
*/

or chúng ta cũng có thể làm như sau và sẽ thay đổi giá trị array ban đầu

array1.push(...array2, ...array3);//
//Lúc này array1 sẽ có giá trị là [1, 2, 3, 4, 5, 6, 7, 8]

Okay, giờ đây chúng ta đã hiểu Array concat() trong javascript rồi và có thể sử dụng bất cứ khi nào chúng ta cần cho dự án của mình. Để tôi nói thêm về một tình huống nữa để kết thúc bài "javascript concat".

Merge array object javascript

Có nghĩa là những array đều chứa object thì làm sao ta có thể push array to array được đây: Tôi lấy một ví dụ trên stackoverflow.com

var arr1 = [{name: "lang", value: "English"},{name: "age", value: "18"}];
var arr2 = [{name : "childs", value: '5'}, {name: "lang", value: "German"}];

Để giải quyết vấn đề đó thì như sau:

Array.prototype.push.apply(arr1,arr2); 
console.log(arr1);
Output:
[{"name":"lang","value":"English"},
{"name":"age","value":"18"},
{"name":"childs","value":"5"},
{"name":"lang","value":"German"}]

Merge two arrays as key value pairs javascript

Định đi ngủ rồi mà lại có thêm trường hợp này nữa thì tính sao đây, mà trường hợp này giống như mảng đa chiều (JavaScript Multidimensional Array) vậy. Merge two arrays as key value pairs đó chính là lấy item của array1 làm key, lấy item của array2 làm value. Xem ví dụ để hiểu rõ hơn.

Ví dụ:

var columns = ["Date", "blog", "name", "Location", "rank"];
var rows = ["2019", "javascript", "anonystick", "Vietnam", "150000"];
var result = rows.reduce(function(result, field, index) {
 result[columns[index]] = field;
 return result;
}, {})
console.log(result);
Output:
{
Date: "2019", 
blog: "javascript", 
name: "anonystick", 
Location: "Vietnam", 
rank: "150000"
}

Kết luận về concat trong javascript

Bài viết tuy dài nhưng nó cho thấy rất nhiều vấn đề cần mổ xẻ trong cách làm việc với concat arrays javascript. Các bạn đọc xong, thì theo tôi hãy chạy từng dòng lệnh để hiểu hơn về es5 và es6 xử lý thế nào.

Thanks for reading!