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
Giả sử sau đây là mảng đầu tiên của chúng ta -
var firstArray=["John","David","Bob","Mike"];
Sau đây là mảng thứ hai của chúng tôi -
var secondArray=["Chris","Adam","James","Carol"];
Để thêm hai mảng trên vào một mảng mới, hãy sử dụng concat[]
Thí dụ
Sau đây là mã -
var firstArray=["John","David","Bob","Mike"]; var secondArray=["Chris","Adam","James","Carol"]; var thirdArray=firstArray.concat[secondArray]; console.log["First Array value="]; console.log[firstArray]; console.log["Second Array value="]; console.log[secondArray]; console.log["Third Array value="]; console.log[thirdArray];
Để chạy chương trình trên, bạn cần sử dụng lệnh sau -
node fileName.js.
Ở đây, tên tệp của tôi là demo249. js
đầu ra
Điều này sẽ tạo ra đầu ra sau trên bảng điều khiển -
PS C:\Users\Amit\javascript-code> node demo249.js First Array value= [ 'John', 'David', 'Bob', 'Mike' ] Second Array value= [ 'Chris', 'Adam', 'James', 'Carol' ] Third Array value= [ 'John', 'David', 'Bob', 'Mike', 'Chris', 'Adam', 'James', 'Carol' ]
Dưới đây là 2 cách để kết hợp các mảng của bạn và trả về một mảng MỚI. Tôi thích sử dụng toán tử Spread. Nhưng nếu bạn cần hỗ trợ trình duyệt cũ hơn, bạn nên sử dụng Concat
// 2 Ways to Merge Arrays
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
// Method 1: Concat
const combined1 = [].concat[cars, trucks];
// Method 2: Spread
const combined2 = [...cars, ...trucks];
// Result
// [ '🚗', '🚙', '🚚', '🚛' ]
Cú pháp Concat thay thế
Ngoài ra, bạn cũng có thể viết phương thức concat, về vấn đề này
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.concat[trucks];
// [ '🚗', '🚙', '🚚', '🚛' ]
console.log[cars]; // ['🚗', '🚙'];
console.log[trucks]; // ['🚚', '🚛'];
Như bạn thấy, cách viết này nó không thao tác hay thay đổi mảng hiện có
Tôi nên chọn cái nào?
Mình liệt kê ra cả 2 bản để các bạn so sánh
// Version A:
const combinedA = [].concat[cars, trucks];
// Version B:
const combinedB = cars.concat[trucks];
Vì vậy, bây giờ câu hỏi là, tôi nên chọn cái nào 🤔. Tôi thích Phiên bản A hơn vì tôi nghĩ ý định rõ ràng hơn rất nhiều. Nhìn vào là biết mình đang tạo mảng mới chứ không thao túng mảng đã có. Trong khi nếu tôi xem Phiên bản B, có vẻ như tôi đang thêm mảng trucks vào mảng
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.concat[trucks];
// [ '🚗', '🚙', '🚚', '🚛' ]
console.log[cars]; // ['🚗', '🚙'];
console.log[trucks]; // ['🚚', '🚛'];
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.concat[trucks];
// [ '🚗', '🚙', '🚚', '🚛' ]
console.log[cars]; // ['🚗', '🚙'];
console.log[trucks]; // ['🚚', '🚛'];
Vì tôi thực sự không có lý do chính đáng nào ngoài tính thẩm mỹ, tôi nghĩ bạn và nhóm của bạn nên gắn bó với bất cứ thứ gì bạn chọn 👍
Sự khác biệt giữa Trải rộng so với Concat
Tôi thích sử dụng
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.concat[trucks];
// [ '🚗', '🚙', '🚚', '🚛' ]
console.log[cars]; // ['🚗', '🚙'];
console.log[trucks]; // ['🚚', '🚛'];
concatTrải rộng thật tuyệt vời khi bạn biết trước rằng bạn đang xử lý các mảng. Nhưng điều gì sẽ xảy ra khi nguồn là một thứ khác, chẳng hạn như một chuỗi. Và bạn muốn thêm chuỗi đó vào mảng. Hãy xem qua một ví dụ
Thí dụ. Đối phó với một đối số tùy ý
Giả sử đây là kết quả chúng ta muốn
[1, 2, 3, 'random'];
A. Sử dụng trải rộng
Và nếu chúng ta làm theo mẫu mà chúng ta đang sử dụng và đã sử dụng toán tử trải rộng. Đây là những gì xảy ra
function combineArray[array1, array2] {
return [...array1, ...array2];
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray[isArray, notArray];
// 😱 [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]
☝️ Nếu chúng ta trải chuỗi, nó sẽ tách từ thành các chữ cái riêng biệt. Vì vậy, nó không đạt được kết quả chúng ta muốn
B. Sử dụng Concat
NHƯNG, nếu chúng ta làm theo mẫu concat mà chúng ta đã làm. Đây là những gì xảy ra
function combineArray[array1, array2] {
return [].concat[array1, array2];
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray[isArray, notArray];
// ✅ [ 1, 2, 3, 'random' ]
☝️ Xuất sắc. Chúng tôi nhận được kết quả chúng tôi muốn
Tôi biết một số bạn giống như, duh. Tôi sẽ chỉ viết một số điều kiện để đảm bảo những gì tôi đang chuyển qua là một mảng và thực thi tương ứng. chắc cái đó cũng được. Hoặc chỉ cần viết ít mã hơn và sử dụng concat là xong 😂
bản án
Vì vậy, đây là quy tắc nhanh chóng. Nếu bạn biết bạn đang xử lý mảng, hãy sử dụng
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.concat[trucks];
// [ '🚗', '🚙', '🚚', '🚛' ]
console.log[cars]; // ['🚗', '🚙'];
console.log[trucks]; // ['🚚', '🚛'];
concat để hợp nhất một mảng 👍Dù sao thì tôi chỉ muốn chỉ ra điều đó, để bạn có thể sử dụng phương pháp phù hợp nhất tùy thuộc vào vấn đề mà bạn đang cố gắng giải quyết 👍
Hợp nhất mảng với Push 🤔
Một số bạn đang hỏi, này, tôi cũng không thể sử dụng
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.concat[trucks];
// [ '🚗', '🚙', '🚚', '🚛' ]
console.log[cars]; // ['🚗', '🚙'];
console.log[trucks]; // ['🚚', '🚛'];
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.concat[trucks];
// [ '🚗', '🚙', '🚚', '🚛' ]
console.log[cars]; // ['🚗', '🚙'];
console.log[trucks]; // ['🚚', '🚛'];
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.push[...trucks];
console.log[combined]; // 4
// ☝when you use push, it returns the LENGTH of the combined array
console.log[cars]; // [ '🚗', '🚙', '🚚', '🚛' ]
console.log[trucks]; // ['🚚', '🚛']
Ngoài ra, khi bạn đang cố đẩy một mảng sang một mảng khác. Bạn sẽ cần trải nó ra, nếu không, cuối cùng bạn sẽ nhận được một mảng lồng nhau. Tất nhiên, trừ khi đó là điều bạn muốn 😜
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
cars.push[trucks];
// 😱 cars: [ '🚗', '🚙', [ '🚚', '🚛' ] ]
cars.push[...trucks];
// ✅ cars: [ '🚗', '🚙', '🚚', '🚛' ]
Hỗ trợ trình duyệt
Spread đã được giới thiệu trong ES6, vì vậy tất cả các trình duyệt hiện đại đều hỗ trợ nó. Ngoại trừ Internet Explorer "Tôi quá tuyệt" - không hỗ trợ ở đó 😕. Vì vậy, nếu bạn cần hỗ trợ IE, thay vào đó bạn muốn sử dụng concat hoặc sử dụng trình biên dịch như Babel