Chèn mảng JavaScript - Cách thêm vào một mảng bằng các hàm Đẩy, Bỏ chuyển và Kết hợp

Mảng JavaScript dễ dàng là một trong những kiểu dữ liệu yêu thích của tôi. Chúng rất năng động, dễ sử dụng và cung cấp nhiều phương pháp tích hợp sẵn mà chúng ta có thể tận dụng.

Tuy nhiên, bạn càng có nhiều tùy chọn, bạn càng có thể bối rối khi quyết định lựa chọn nào mình nên sử dụng.

Trong bài viết này, tôi muốn thảo luận về một số cách phổ biến để thêm một phần tử vào một mảng JavaScript.

Phương pháp Đẩy

Phương thức mảng JavaScript đầu tiên và có lẽ là phổ biến nhất mà bạn sẽ gặp là push () . Phương thức push () được sử dụng để thêm một phần tử vào cuối một mảng.

Giả sử bạn có một mảng các phần tử, mỗi phần tử là một chuỗi đại diện cho một nhiệm vụ bạn cần hoàn thành. Sẽ rất hợp lý nếu bạn thêm các mục mới hơn vào cuối mảng để chúng ta có thể hoàn thành các nhiệm vụ trước đó của mình trước.

Hãy xem ví dụ ở dạng mã:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Được rồi, push đã cung cấp cho chúng ta một cú pháp đơn giản và đẹp để thêm một mục vào cuối mảng của chúng ta.

Giả sử chúng tôi muốn thêm hai hoặc ba mục cùng một lúc vào danh sách của mình, khi đó chúng tôi sẽ làm gì? Hóa ra, push () có thể chấp nhận nhiều phần tử được thêm vào cùng một lúc.

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Bây giờ chúng tôi đã thêm một số nhiệm vụ khác vào mảng của mình, chúng tôi có thể muốn biết có bao nhiêu mục hiện đang có trong mảng của chúng tôi để xác định xem chúng tôi có quá nhiều trên đĩa của mình hay không.

May mắn thay, push () có giá trị trả về bằng độ dài của mảng sau khi (các) phần tử của chúng ta được thêm vào.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Phương pháp không chuyển đổi

Không phải tất cả các nhiệm vụ đều được tạo ra như nhau. Bạn có thể gặp phải một tình huống trong đó bạn đang thêm nhiệm vụ vào mảng của mình và đột nhiên bạn gặp phải một nhiệm vụ khẩn cấp hơn những nhiệm vụ khác.

Đã đến lúc giới thiệu người bạn unshift () cho phép chúng tôi thêm các mục vào đầu mảng của chúng tôi.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

Bạn có thể nhận thấy trong ví dụ trên, giống như phương thức push () , unshift () trả về độ dài mảng mới để chúng ta sử dụng. Nó cũng cho chúng ta khả năng thêm nhiều phần tử cùng một lúc.

Phương pháp Concat

Viết tắt của concatenate (để liên kết với nhau), phương thức concat () được sử dụng để nối hai (hoặc nhiều) mảng với nhau.

Nếu bạn nhớ ở trên, các phương thức unshift ()push () trả về độ dài của mảng mới. concat () , mặt khác,sẽ trả về một mảng hoàn toàn mới.

Đây là một sự khác biệt rất quan trọng và làm cho concat () cực kỳ hữu ích khi bạn đang xử lý các mảng mà bạn không muốn thay đổi (như các mảng được lưu trữ trong trạng thái React).

Đây là một trường hợp khá cơ bản và đơn giản có thể trông như thế nào:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

Giả sử bạn có nhiều mảng mà bạn muốn kết hợp với nhau. Đừng lo lắng, concat () luôn sẵn sàng để cứu lấy một ngày!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Nhân bản bằng Concat

Hãy nhớ cách tôi đã nói rằng concat () có thể hữu ích khi bạn không muốn thay đổi mảng hiện có của mình? Hãy xem cách chúng ta có thể tận dụng khái niệm này để sao chép nội dung của một mảng vào một mảng mới.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Tuyệt vời! Về cơ bản, chúng ta có thể "sao chép" một mảng bằng concat () .

Nhưng có một 'lỗi nhỏ' trong quá trình nhân bản này. Mảng mới là "bản sao cạn" của mảng đã sao chép. Điều này có nghĩa là bất kỳ đối tượng nào cũng được sao chép theo tham chiếu chứ không phải đối tượng thực.

Hãy xem một ví dụ để giải thích rõ hơn ý tưởng này.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

Mặc dù chúng tôi không trực tiếp thực hiện bất kỳ thay đổi nào đối với mảng ban đầu của mình, nhưng mảng cuối cùng vẫn bị ảnh hưởng bởi những thay đổi mà chúng tôi đã thực hiện trên mảng nhân bản của mình!

Có nhiều cách khác nhau để thực hiện đúng "bản sao sâu" của một mảng, nhưng tôi sẽ để bạn làm bài tập về nhà.

TL; DR

Khi bạn muốn thêm một phần tử vào cuối mảng của mình, hãy sử dụng push (). Nếu bạn cần thêm một phần tử vào đầu mảng của mình, hãy thử unshift (). Và bạn có thểthêm các mảng với nhau bằng concat ().

Chắc chắn có nhiều tùy chọn khác để thêm phần tử vào một mảng, và tôi mời bạn ra ngoài và tìm thêm một số phương thức mảng tuyệt vời hơn!

Vui lòng liên hệ với tôi trên Twitter và cho tôi biết phương pháp mảng yêu thích của bạn để thêm các phần tử vào một mảng.