Có nhiều cách để hợp nhất các mảng trong JavaScript. Bạn có thể sử dụng các cách tiếp cận dài hoặc ngắn. Tôi sẽ hiển thị 3 trong số chúng trong bài viết này.
Khi làm việc với mảng trong JavaScript, sẽ có trường hợp bạn muốn kết hợp nhiều mảng lại với nhau. Ví dụ: các mảng có dữ liệu liên quan đến từ các nguồn khác nhau có thể được hợp nhất thành một mảng duy nhất.
Bạn có thể hợp nhất các mảng theo nhiều cách khác nhau. Hãy xem xét một số trong số chúng, từ yêu thích của tôi đến ít yêu thích nhất của tôi.
Đây là phiên bản video của bài viết này nếu bạn muốn sử dụng nó để bổ sung cho việc học của mình.
1. Cách sử dụng Toán tử trải rộng trong JavaScript
Toán tử trải rộng cho phép bạn trải rộng một bộ sưu tập có thể lặp lại (đối tượng hoặc mảng) vào một bộ sưu tập khác. Sử dụng toán tử này trên mảng, bạn có thể hợp nhất nội dung của các mảng lại với nhau.
Đây là một ví dụ:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = [...array1, ...array2]
// [1, 2, 3, 4, 5, 6]
Cho merged biến, chúng ta tạo một mảng mới và sau đó rải các giá trị của array1 theo dõi bởi array2 trong đó. Bây giờ bạn có thể thấy merged mảng chứa các giá trị từ các mảng này.
Bạn có thể sử dụng toán tử này cho nhiều mảng:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]
const merged = [...array2, ...array3, ...array1]
// [4, 5, 6, 7, 8, 9, 1, 2, 3]
bên trong merged mảng ở đây, đầu tiên chúng tôi lây lan array2sau đó array3và cuối cùng, array1.
Bạn có thể tìm hiểu thêm về toán tử này trong bài viết này: Đơn giản hóa toán tử trải rộng.
2. Cách sử dụng Array.concat trong JavaScript
Bạn sử dụng concat phương thức của mảng để kết hợp nội dung của một mảng với các giá trị mới để tạo thành một mảng mới.
Các giá trị mới này có thể là số, chuỗi, phép toán luận, đối tượng hoặc thậm chí là mảng.
Phương thức chấp nhận một danh sách các giá trị làm đối số:
array.concat(value1, value2, ..., valueN)
Bằng cách chỉ định một mảng làm đối số, bạn có thể hợp nhất một mảng hiện có với mảng đã chỉ định để tạo thành một mảng mới. Đây là một ví dụ:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat(array2)
// [1, 2, 3, 4, 5, 6]
Như bạn có thể thấy, nội dung của array1 được nối với nội dung của array2 để tạo thành một mảng mới được gán cho merged.
Bạn cũng có thể chuyển nhiều mảng để hợp nhất:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]
const merged = array2.concat(array3, array1)
// [4, 5, 6, 7, 8, 9, 1, 2, 3]
Trong ví dụ này, chúng tôi sử dụng concat phương pháp trên array2 có nghĩa là nội dung của array2 là đầu tiên trong mảng hợp nhất.
Đối với các đối số, chúng tôi vượt qua array3 đầu tiên, có nghĩa là nội dung của array3 tiếp theo trong mảng được hợp nhất, sau đó là nội dung của array1.
Bạn có thể tìm hiểu thêm về concat trong bài viết này: Mảng concat được đơn giản hóa.
3. Cách sử dụng Array.push trong JavaScript
Các push phương thức của mảng cho phép bạn “đẩy” (thêm) các giá trị mới vào cuối mảng.
array.push(value1, value2, ...valueN)
Sử dụng phương pháp này, bạn có thể đẩy một mảng mới vào một mảng hiện có để tạo quy trình hợp nhất. Không giống như các cách tiếp cận trước đây mà tôi đã đề cập, push cách tiếp cận sửa đổi mảng mà nó được sử dụng.
Đây là một ví dụ:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
for(let i = 0; i < array2.length; i++) {
array1.push(array2[i])
}
console.log(array1)
// [1, 2, 3, 4, 5, 6]
Ở đây, chúng tôi sử dụng một for vòng lặp để lặp qua các giá trị của array2và trên mỗi vòng lặp, chúng tôi đẩy giá trị tại chỉ mục tới array1.
Ở cuối vòng lặp, bạn thấy array1 sửa đổi, có chứa các giá trị từ array2.
Thay vì một for vòng lặp, bạn cũng có thể sử dụng spread nhà điều hành với push phương pháp. Kể từ khi push chấp nhận một danh sách hoặc các đối số được phân tách bằng dấu phẩy, bạn có thể trải một mảng khác trong phương thức này và tất cả chúng sẽ được đẩy vào mảng mà phương thức được áp dụng:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
array1.push(...array2)
console.log(array1)
// [1, 2, 3, 4, 5, 6]
Bạn có thể làm điều này cho nhiều mảng:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]
array3.push(...array2, ...array1)
console.log(array3)
// [7, 8, 9, 4, 5, 6, 1, 2, 3]
Ở đây, chúng tôi gọi push trên array3sau đó lây lan các giá trị của array2 theo dõi bởi array1 như các đối số được đẩy vào array3.
kết thúc
Trong bài viết này, chúng ta đã thấy ba cách tiếp cận để hợp nhất các mảng trong JavaScript. tôi đặc biệt yêu thích spread toán tử vì nó dễ sử dụng hơn và đơn giản hơn.
Khi đang sử dụng pushhãy lưu ý, như tôi đã đề cập, nó sửa đổi mảng mà nó được sử dụng (không giống như concat thay vào đó trả về một mảng mới). Điều này có thể gây ra kết quả không mong muốn nếu bạn không sử dụng nó một cách có chủ ý và cẩn thận.
