Thêm hai mảng JavaScript

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 -

1. Sử dụng phương thức Array concat()
2. Sử dụng toán tử trải rộng
3. 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à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]

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]

0

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ử 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

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ới

Cá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]

0

Bạ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óa

3. Cách sử dụng array.concat(value1, value2, ..., valueN) 9 trong JavaScript

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ả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 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]

1

Thay 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ụ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

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]

5

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 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ơn

Khi 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ận

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Dillion Megida

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

Làm cách nào để kết hợp hai mảng thành một JavaScript?

Bạn có thể thêm hai mảng trong JavaScript không?

Làm cách nào để thêm mảng vào một mảng khác trong JavaScript?

Làm cách nào để hợp nhất hai mảng?