Nối hai mảng JavaScript

Bài đăng này sẽ thảo luận về cách nối hai mảng JavaScript. Giải pháp không nên thay đổi các mảng hiện có mà tạo một mảng mới thay vì các phần tử của mảng đầu tiên, tiếp theo là tất cả các phần tử trong mảng thứ hai

1. Sử dụng chức năng Array.prototype.concat()

Phương pháp tiêu chuẩn để nối hai hoặc nhiều mảng là concat() . Điều này trả về một mảng mới để lại mảng ban đầu không bị ảnh hưởng.

1

2

3

4

5

6

7

8

9

var first = [1, 2, 3];

var giây = [4, 5];

var arr = đầu tiên. concat(giây);

bảng điều khiển. log(arr);

/*

đầu ra. [ 1, 2, 3, 4, 5 ]

*/

Tải xuống Chạy mã

2. Sử dụng cú pháp Spread

Một giải pháp tốt khác là sử dụng cú pháp trải rộng ES6 để trải rộng các mảng đã chỉ định thành một mảng bằng chữ. Điều này được thể hiện dưới đây

Cách cơ bản nhất là sử dụng phương thức concat(). Nó rất đơn giản; . (Hãy nhớ trình tự quan trọng. )

let firstArray = [1,2,3,'Shinchan']
let secondArray = ['Nohara',4,5,6]
let combinedArray1 = firstArray.concat(secondArray)
let combinedArray2 = secondArray.concat(firstArray)

console.log(`Combined Array1 = `+combinedArray1)
// Combined Array1 = 1,2,3,Shinchan,Nohara,4,5,6

console.log(`Combined Array2 = `+combinedArray2)
//Combined Array2= Nohara,4,5,6,1,2,3,Shinchan

2. Sử dụng Toán tử trải rộng (Phím tắt ES6)

Bây giờ phương pháp thứ hai giống như một lối tắt; . Điều này chỉ khả dụng trong phiên bản ES6. Đó là cách yêu thích của tôi để kết hợp các mảng, vì nó rất hiệu quả

Như bạn có thể thấy, trình tự cũng quan trọng ở đây

let firstArray = [1, 2, 3, 'Shinchan']
let secondArray = ['Nohara', 4, 5, 6]
let thirdArray = [7, 8, 9, 'Himawari']

let combinedArray1 = [...firstArray, ...secondArray, ...thirdArray]
let combinedArray2 = [...secondArray, ...firstArray, ...thirdArray]

console.log('CombinedArray1 = ' + combinedArray1)
//Combined Array1 = 1,2,3,Shinchan,Nohara,4,5,6,7,8,9,Himawari

console.log('CombinedArray2 = ' + combinedArray2)
//Combined Array2 = Nohara,4,5,6,1,2,3,Shinchan,7,8,9,Himawari

3. Hợp nhất các mảng với Push

Bạn cũng có thể sử dụng phương thức đẩy để kết hợp các mảng khác nhau như được hiển thị

let firstArray = [1, 2, 3, 'Shinchan']
let secondArray = ['Nohara', 4, 5, 6]
let thirdArray = [7, 8, 9, 'Himawari']

let combinedArray = []

combinedArray.push(...firstArray, ...secondArray, ...thirdArray)

console.log(`CombinedArray = `+combinedArray)
// CombinedArray = [1,2,3,'Shinchan','Nohara',4,5,6,7,8,9,'Himawari']

Đầu tiên, khai báo một mảng trống và sau đó sử dụng phương thức push() với toán tử trải rộng. Nội dung của các mảng sẽ được sao chép trong mảng mong muốn

Hãy nhớ rằng nếu bạn không sử dụng toán tử trải rộng thì toàn bộ mảng sẽ được đẩy và bạn sẽ nhận được một mảng lồng nhau được gọi là mảng hai chiều. (Đó là cuộc thảo luận của một ngày khác, vì vậy chúng ta đừng đi sâu vào vấn đề đó. )

let firstArray = [1, 2, 3, 'Shinchan']
let secondArray = ['Nohara', 4, 5, 6]
let thirdArray = [7, 8, 9, 'Himawari']


let combinedArray = []


combinedArray.push( firstArray, secondArray, thirdArray)

console.log(`CombinedArray = `+combinedArray)
/* CombinedArray = [ [1,2,3,'Shinchan'],
                     ['Nohara',4,5,6],
                     [7,8,9,'Himawari'] ]

Đó là tất cả. Nếu bạn nghĩ rằng có bất kỳ lỗi nào hoặc bạn muốn cung cấp một số thông tin, vui lòng bình luận bên dưới

Như chúng ta đã biết mảng thường được dùng để lưu trữ các loại dữ liệu hoặc thông tin giống nhau. Khi cần thực hiện một số thay đổi động như hiển thị dữ liệu của hai bảng tại một nơi trên giao diện người dùng, thay vì truy vấn ngược lại từ mặt sau, chúng tôi có thể thực hiện một số chức năng cơ bản trên giao diện người dùng

Trong bài đăng này, chúng tôi sẽ có một hướng dẫn chi tiết về cách hợp nhất hoặc nối nhiều mảng trong JavaScript

Phương thức concat() trong JavaScript là gì

Để hợp nhất hai hoặc nhiều mảng trong JavaScript, hàm concat() được sử dụng. Cú pháp nối nhiều mảng bằng phương thức concat là

tên_mảng. concat( first_array , second_array . , ..., N_array )

• Hàm concat() lấy nhiều mảng làm tham số và nối chúng lại với nhau thành một mảng
• Hàm concat() trả về một mảng mới và không ảnh hưởng đến mảng ban đầu

Hãy thử nối hai mảng và hiểu rõ hơn về hàm concat()

Ghi chú. Chúng tôi sẽ sử dụng bảng điều khiển trình duyệt để minh họa các ví dụ được thực hiện trong bài đăng này. Để mở bảng điều khiển trình duyệt

• Sử dụng phím F12 trong Chrome và các trình duyệt dựa trên crom khác
• Sử dụng tổ hợp phím tắt CTRL + SHIFT + K cho Mozilla
• Sử dụng phím tắt Option + ⌘ + C trong Safari (nếu menu nhà phát triển không xuất hiện, hãy mở Tùy chọn bằng cách nhấn ⌘ + và trong tab Nâng cao, chọn “Hiển thị menu Phát triển trong thanh menu”)

Cách sử dụng hàm concat() trong JavaScript

Giả sử chúng ta có hai mảng và chúng ta muốn biến chúng thành một mảng

var mảng1 = [10,20,30,40];
var arr2 = [50,60,70,80];

Để nối chúng thành một mảng, câu lệnh sau sẽ được sử dụng

var mảng3 = mảng1. concat(arr2);

Bây giờ, nếu chúng ta điều khiển arr3

bảng điều khiển. log( arr3 );

Bạn có thể thấy hai mảng arr1 và arr2 được nối với nhau trong mảng 3

Bây giờ, giả sử chúng ta muốn nối ba mảng này. Để tham gia nhiều mảng đoạn mã sau sẽ được sử dụng

var mảng4 = mảng1. concat( arr2 , mảng3 );

Một cách khác để thực hiện cùng một nhiệm vụ sẽ diễn ra như thế này

var arr4 = [].concat( arr1 , Array2 , arr3);

Bây giờ, nếu chúng ta nhìn vào arr4

bảng điều khiển. log( arr4 );

Bạn có thể thấy rằng cả ba mảng được hợp nhất vào mảng4 như chúng ta mong đợi

Đây là cách chúng ta có thể hợp nhất hai mảng bằng phương thức concat

Nối các mảng bằng toán tử trải rộng trong JavaScript

Một cách khác để hợp nhất nhiều mảng trong JavaScript là sử dụng toán tử trải rộng. Hợp nhất hai mảng bằng toán tử trải phổ thực sự đơn giản. Chỉ cần thêm ba dấu chấm vào tên mảng và cung cấp chúng dưới dạng phần tử mảng cho một mảng mới

Ví dụ, chúng ta có hai mảng

var mảng1 = [10,20,30,40];
var arr2 = [50,60,70,80];

Bây giờ để tham gia cùng họ bằng cách sử dụng toán tử trải rộng, chỉ cần sử dụng câu lệnh sau

var mảng3 = [ . arr1, . arr2]

Bây giờ, điều khiển arr3 để xác minh

bảng điều khiển. log( arr3 );

Bạn có thể thấy mảng 1 và mảng 2 được nối hoàn hảo bằng cách sử dụng toán tử trải rộng

Sự kết luận

Phương thức concat() hữu ích khi thao tác dữ liệu có trong mảng mà không sửa đổi mảng ban đầu. Khi làm việc trên các ứng dụng web, chúng ta có thể cần hiển thị dữ liệu của các mảng khác nhau được kết hợp. Chúng ta có thể làm điều này bằng cách sử dụng phương thức contact() trong JavaScript. Phương pháp này sẽ giúp chúng tôi thực hiện nhiệm vụ của mình mà không thay đổi các mảng thực tế có thể cần thiết sau này ở trạng thái ban đầu

Trong hướng dẫn cách thực hiện này, chúng ta đã học cách sử dụng hàm concat() trong JavaScript. Hơn nữa, chúng ta cũng đã học cách sử dụng toán tử trải rộng, toán tử này cũng được sử dụng để hợp nhất các mảng. Toán tử trải rộng đã trở thành một cách hợp nhất mảng phổ biến hơn trong thời gian gần đây

Bạn có thể kết hợp hai mảng trong JavaScript không?

Bạn có thể thêm vào một mảng trong JavaScript không?