Trong JavaScript, chúng ta có thể hợp nhất hai mảng theo các cách tiếp cận khác nhau và trong hướng dẫn này, chúng ta sẽ thấy một số cách tiếp cận để thực hiện việc này -
- Sử dụng phương thức Array concat[]
- Sử dụng toán tử trải rộng
- Sử dụng phép lặp lặp
Sử dụng phương thức Array concat[]
Phương thức Array concate[] hợp nhất hai hoặc nhiều mảng. Đây là một trong những phương pháp tốt nhất để hợp nhất các mảng trong JavaScript. Phương thức này hoạt động trên một mảng, lấy một mảng khác trong các tham số và trả về một mảng mới sau khi hợp nhất hai mảng này. Nó cũng có thể lấy nhiều mảng trong các tham số để hợp nhất tất cả chúng
cú pháp
let merged_arr = arr1.concat[arr2]
Theo cú pháp trên, “arr1” và “arr2” là hai mảng riêng biệt. Chúng tôi đã sử dụng phương thức mảng concat[] với “arr1” và chuyển mảng “arr2” vào tham số để tạo một mảng được hợp nhất mới, “mảng đã hợp nhất”
Thí dụ
Trong ví dụ bên dưới, chúng tôi hợp nhất hai mảng trong JavaScript bằng phương thức Array concat[]. Chúng tôi đã sử dụng sự kiện bấm nút để hợp nhất hai mảng, “arr1” và “arr2” và xuất chúng trên trang web
Sử dụng toán tử lây lan
Toán tử trải rộng [. ] được sử dụng để chuyển hoặc trải một bản sao của từng phần tử của một mảng hoặc đối tượng có thể lặp lại. Nó rất hữu ích để sao chép một mảng dễ dàng. Chúng ta có thể hợp nhất hai mảng một cách dễ dàng bằng cách sử dụng toán tử trải rộng. Ta phải lấy một mảng rồi trong mảng đó rải lần lượt hai hoặc nhiều mảng, cách nhau bởi dấu phẩy
cú pháp
let merged_arr = [...arr1, ...arr2]
Theo cú pháp trên, “arr1” và “arr2” là hai mảng riêng biệt. Chúng tôi lấy một mảng “merged_arr” và bên trong mảng đó, chúng tôi sử dụng các toán tử trải rộng trên “arr1” và “arr2” để tạo một bản sao của tất cả các phần tử của chúng và chuyển chúng vào mảng mới
Thí dụ
Trong ví dụ bên dưới, chúng tôi đã hợp nhất hai mảng trong JavaScript bằng cách sử dụng toán tử trải rộng. Chúng tôi đã sử dụng sự kiện bấm nút để hợp nhất hai mảng, “arr1” và “arr2” và xuất chúng trên trang web
Sử dụng phép lặp lặp
Cách tiếp cận truyền thống nhất để hợp nhất hai mảng là sử dụng phép lặp. Trong cách tiếp cận này, chúng tôi sử dụng một vòng lặp như “vòng lặp for” hoặc “vòng lặp while” và bên trong vòng lặp, chúng tôi nối từng phần tử của một mảng vào một mảng khác bằng cách sử dụng mảng. đẩy[] phương pháp
cú pháp
let merged_arr = [] for [let index = 0; index < arr1.length; index++] { merged_arr.push[arr1[index]] } for [let index = 0; index < arr2.length; index++] { merged_arr.push[arr2[index]] }
Theo cú pháp trên, “arr1” và “arr2” là hai mảng riêng biệt. Sử dụng vòng lặp for, chúng tôi đã hợp nhất hai mảng thành “merged_arr”
Thí dụ
Trong ví dụ dưới đây, chúng tôi đã hợp nhất hai mảng trong JavaScript bằng cách sử dụng phép lặp. Chúng tôi đã sử dụng sự kiện bấm nút để hợp nhất hai mảng, “arr1” và “arr2” và xuất chúng trên trang web
Trong hướng dẫn này, chúng ta đã thảo luận về ba cách tiếp cận để hợp nhất hai mảng trong JavaScript- sử dụng phương thức concate[], sử dụng toán tử trải rộng và sử dụng phép lặp vòng lặp
Có nhiều cách để hợp nhất các mảng trong JavaScript. Bạn có thể sử dụng 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, có trường hợp bạn muốn gộ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]
Đối với biến merged
, chúng tôi tạo một mảng mới và sau đó trải rộng các giá trị của
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]
0 theo sau là 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]
1 trong đó. Bây giờ bạn có thể thấy mảng merged
chứa các giá trị từ các mảng nàyBạ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]
Trong mảng merged
ở đây, đầu tiên chúng ta trải
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]
1, sau đó là 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]
5 và cuối cùng là 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]
0Bạ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ử lây lan
2. Cách sử dụ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]
7 trong JavaScript
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 sử dụng phương thức
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]
8 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ớiCác giá trị mới này có thể là số, chuỗi, booleans, đố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
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]
0 được nối với nội dung của 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]
1 để 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 phương thức
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]
8 trên 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]
1 có nghĩa là nội dung của 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]
1 ở vị trí đầu tiên trong mảng được hợp nhấtĐối với các đối số, chúng tôi vượt qua
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]
5 trước, có nghĩa là nội dung của 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]
5 tiếp theo trong mảng được hợp nhất, sau đó là nội dung của 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]
0Bạn có thể tìm hiểu thêm về
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]
8 trong bài viết này. Mảng concat được đơn giản hóa3. Cách sử dụng array.concat[value1, value2, ..., valueN]
9 trong JavaScript
array.concat[value1, value2, ..., valueN]
Phương thức
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
0 của mảng cho phép bạn "đẩy" [thêm] các giá trị mới vào cuối mảngarray.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 tôi đã đề cập, cách tiếp cận
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
0 sửa đổi mảng mà nó được sử dụng trênĐâ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 vòng lặp
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
2 để lặp qua các giá trị của 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]
1 và trên mỗi vòng lặp, chúng tôi đẩy giá trị tại chỉ mục lên tới 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]
0Ở cuối vòng lặp, bạn thấy
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]
0 được sửa đổi, chứa các giá trị từ 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]
1Thay vì vòng lặp
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
2, bạn cũng có thể sử dụng toán tử const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
8 với phương thức const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
0. Vì phương thức const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
0 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, nên 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ụngconst 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
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
0 trên 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]
5, sau đó trải rộng các giá trị của 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]
1 theo sau bởi 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]
0 làm đối số được đẩy vào 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]
5kế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 toán tử
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
8 vì nó dễ sử dụng hơn và đơn giản hơnKhi sử dụng
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat[array2]
// [1, 2, 3, 4, 5, 6]
0, hãy cẩn thận, như tôi đã đề cập, rằng nó sửa đổi mảng mà nó được sử dụng [không giống như 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]
8 trả về một mảng mới thay thế]. Đ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ậnQUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Người ủng hộ nhà phát triển và Người sáng tạo nội dung đam mê chia sẻ kiến thức của tôi về Công nghệ. Tôi đơn giản hóa JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / v.v. Kênh YT của tôi. youtube. com/c/deeecode
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu