Cách thêm đối tượng vào mảng trong javascript

Dưới đây là 5 cách để thêm một mục vào cuối một mảng.

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

7,

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

8 và

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

9 sẽ thay đổi mảng ban đầu. Trong khi đó

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

0 và

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

1 sẽ không và thay vào đó sẽ trả về một mảng mới. Cái nào là tốt nhất tùy thuộc vào trường hợp sử dụng của bạn 👍

đột biến

Điều này sẽ thay đổi mảng ban đầu

const array = ['🦊'];

array.push('🐴');
array.splice(array.length, 0, '🐴');
array[array.length] = '🐴';

// Result
// ['🦊', '🐴']

không đột biến

Điều này sẽ tạo ra một mảng mới và mảng ban đầu không thay đổi

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

• 3 cách để thêm mục vào mảng (mutative)
  • đẩy
  • mối nối
  • chiều dài
• 2 cách để thêm mục vào mảng (không thay đổi)
  • concat
  • Lan tràn
• Đột biến hay không đột biến?
• Đầu vào của cộng đồng
• Tài nguyên

# 3 Cách Nối Mục vào Mảng (Mutative)

Hãy xem xét 3 cách chúng ta có thể đẩy một mục vào một mảng. Đây sẽ là cách đột biến, nghĩa là nó sẽ thay đổi mảng ban đầu

# đẩy

Cách đơn giản nhất để thêm các phần tử vào cuối một mảng là sử dụng

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

7

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

Lưu ý rằng tôi đã nói vật phẩm chứ không chỉ vật phẩm 😉 Yup, bạn có thể đẩy nhiều vật phẩm

const zoo = ['🦊', '🐮'];

zoo.push('🐧', '🐦', '🐤');

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

Nhưng việc chuyển các mục riêng lẻ là một lực cản như vậy, may mắn thay, chúng tôi có thể sử dụng tính năng trải rộng của ES6. Điều này cho phép chúng ta truyền một mảng và sau đó sử dụng cú pháp

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

3 để chia mục thành các đối số riêng lẻ 🙌

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

1

# mối nối

Thoạt nhìn, phương pháp này có vẻ rất cần thiết 😂 bởi vì chúng ta đang chuyển một loạt đối số. Đó là bởi vì phương pháp này có thể thêm HOẶC loại bỏ các mục mảng. Do đó, nó yêu cầu chúng tôi cung cấp thêm một chút thông tin để nó thực hiện công việc của mình. Hãy xem các thông số mà nó yêu cầu

Tham số Tên tham sốDefinition1startIndexChỉ mục nơi bạn muốn thêm/xóa item2deleteCountSố lượng mục bạn muốn xóa3itemsSố bạn muốn thêm
(Nếu bạn đang xóa, bạn có thể để trống phần này)

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

2

# chiều dài

Tôi nghĩ rằng đây là cách thông minh nhất trong tất cả các phương pháp. Đó là một trong những cách không bao giờ vượt qua tâm trí của tôi. Vì vậy, hãy hiểu tại sao điều này hoạt động

Mảng trong JavaScript là không có chỉ mục. Vì vậy, mục đầu tiên có chỉ số là

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

4

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

4

Ký hiệu dấu ngoặc trong mảng cho phép chúng tôi truy xuất mục NHƯNG nó cũng có thể cho phép chúng tôi ghi đè mục đó

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

5

Điều thú vị là

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

5 trả về cho chúng ta tổng số phần tử trong mảng. Điều đó có nghĩa là độ dài luôn cao hơn một số so với mục cuối cùng trong chỉ mục của chúng tôi. Vì vậy, bằng cách gán một giá trị ở chỉ số độ dài, về cơ bản, nó sẽ thêm một mục vào cuối mảng

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

7

# 2 Cách Nối Mục vào Mảng (Không Đột biến)

Được rồi, hãy tiếp tục nối thêm một mục vào một mảng theo cách không thay đổi. Trong đó mảng ban đầu sẽ không bị ảnh hưởng và một mảng mới sẽ chứa phần bổ sung

# concat

Phương pháp này có nghĩa là hợp nhất các mảng. Vì vậy, chúng ta có thể sử dụng nó để thêm nhiều mục bằng cách chuyển vào một mảng

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

8

Nhưng nó không chỉ chấp nhận mảng làm tham số của nó, nó còn chấp nhận (các) giá trị

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

0

# Lan tràn

Chúng ta có thể sử dụng cú pháp trải rộng để mở rộng từng phần tử mảng thành các phần tử riêng lẻ. Một ứng dụng rất phổ biến là sử dụng spread để tạo một bản sao hoặc hợp nhất hai mảng riêng biệt. Điều này tương tự như tác động của

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

0

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

1

Tuy nhiên, nếu chúng tôi không sử dụng trải rộng, thay vào đó, chúng tôi sẽ nhận được một mảng lồng nhau, đây không phải là điều chúng tôi muốn

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

2

Vì vậy, tôi có thể sử dụng nó để hợp nhất các mảng, nhưng chúng ta cũng có thể chuyển (các) giá trị riêng lẻ, giống như chúng ta làm khi tạo một mảng thông thường

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

3

# Đột biến hay không đột biến?

Vì vậy, câu hỏi đặt ra là biến đổi hay không biến đổi 🎭 Điều đó thực sự phụ thuộc vào trường hợp sử dụng của bạn. Khi bạn đang làm việc trong Redux hoặc bất kỳ kiến ​​trúc quản lý trạng thái nào, thì đó là tất cả về tính bất biến. Vì vậy, các phương pháp không đột biến sẽ là sự lựa chọn của bạn. Ngoài ra, ý tưởng về tính bất biến thường được ưu tiên hơn vì nó được coi là một cách thực hành tốt để tránh các tác dụng phụ - đó là nền tảng của lập trình chức năng và tạo ra các chức năng thuần túy

Nhưng điều đó có nghĩa là chúng ta không bao giờ nên sử dụng các phương pháp đột biến? . Bởi vì có những lúc tính bất biến không quan trọng. Lấy ví dụ đơn giản này

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

4

Trong những trường hợp này, tại sao không sử dụng các phương pháp đột biến. Mục tiêu của tôi để nối thêm một giá trị là

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

7. Tại sao? . Vâng, bạn có thể lập luận rằng

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

0 cũng rất ngắn để gõ. Nhưng hãy kiểm tra thử nghiệm hiệu suất này. Đẩy nhanh hơn rất nhiều. ⚡️

Kiểm tra hiệu suất. Đẩy vs Concat

# Đầu vào của cộng đồng

@DigianPaul. Đột biến hay không đột biến? . Nhưng, để đơn giản hóa, giả sử mảng ban đầu vẫn cần ở một nơi khác? . Nếu không cần thiết, bạn có thể thay đổi trực tiếp, cách này thường nhanh hơn tạo bản sao

Đã nói rằng có những cấu trúc dữ liệu trong đó việc tạo một bản sao của mảng rẻ như biến đổi nó (hoặc rẻ tương đương) và những cấu trúc đó rất tuyệt nhưng không quá phổ biến trong cộng đồng JavaScript

Chúng được gọi là "Cấu trúc dữ liệu liên tục" và cực kỳ hữu ích trong nhiều trường hợp. Nhưng chúng khá phức tạp để thiết kế

Chẳng hạn, chúng làm cho chức năng thực hiện đơn giản như hoàn tác làm lại. Nhưng họ thực sự hát trong lập trình chức năng và cả trong các ứng dụng đa luồng

@KClarkADSTech. Ngoài ra, bạn có thể trả trước bằng cách sử dụng

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

9 hoặc

const zoo = ['🦊', '🐮'];

zoo.push('🐧', '🐦', '🐤');

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

0

@stojakovic99. Một cách khó khăn để thêm một mục trống vào một mảng (nếu chúng ta thậm chí có thể gọi nó là nối thêm một mục vào một mảng, tôi nghĩ rằng một thuật ngữ thích hợp hơn sẽ là thay đổi kích thước) sẽ là. (Tuy nhiên bạn không bao giờ nên làm điều này. )

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

5

@devhammed. Bạn cũng có thể sử dụng nó để thu nhỏ mảng

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

6

@johnkazer. Điểm không thay đổi nếu bạn cần mảng ở nơi khác là một điểm tốt, đặc biệt đối với lập trình song song hoặc đồng thời. Ngay cả trong JavaScript đơn luồng, bạn có thể đã chuyển một mảng theo tham chiếu và do đó làm thay đổi mọi thứ một cách bất ngờ. Nói chung, tôi thấy không đột biến là một phương pháp thư giãn hơn

Bạn có thể đặt đối tượng trong mảng không?

Bạn có thể lưu trữ các đối tượng trong một mảng JS không?