Làm cách nào để tạo nhiều mảng thành một mảng?

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 nhìn vào 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); // ['🚚', '🚛'];

Trả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ụ

Ví 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

________số 8_______

☝️ 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); // ['🚚', '🚛'];

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, bạn muốn sử dụng concat thay thế hoặc sử dụng trình biên dịch như Babel

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

Làm thế nào để kết hợp ba mảng thành một?