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 năng động, dễ sử dụng và cung cấp một loạt các phương thức 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 lựa chọn thì càng khó quyết định nên sử dụng cái nào.
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 phần tử vào 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à đẩy(). Phương thức push() được sử dụng để thêm phần tử vào cuối 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ẽ hợp lý hơn nếu thêm các mục mới hơn vào cuối mảng để chúng tôi 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, vậy là Push đã cung cấp cho chúng ta một cú pháp hay và đơn giản để 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, chúng tôi sẽ làm gì sau đó? Hóa ra, đẩy() có thể chấp nhận nhiều yếu 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 ta đã thêm một số nhiệm vụ khác vào mảng của mình, chúng ta có thể muốn biết có bao nhiêu mục hiện có trong mảng của mình để xác định xem chúng ta có quá nhiều mục hay không.
May mắn thay, đẩy() có giá trị trả về với độ 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 Unshift
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 các 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 các nhiệm vụ khác.
Đã đến lúc giới thiệu bạn của chúng ta bỏ dịch () 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 rằng, giống như đẩy() phương pháp, bỏ dịch () trả về độ dài mảng mới để chúng ta sử dụng. Nó cũng cung cấp 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 nối (liên kết với nhau), các concat() phương thức được sử dụng để nối hai (hoặc nhiều) mảng lại với nhau.
Nếu bạn nhớ từ phía trên, bỏ dịch () và đẩy() các phương thức 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ữ ở 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() là ở đó để tiết kiệm trong ngày!
const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];
const arr4 = arr1.concat(arr2,arr3);
console.log(arr4); // ["?", "?", "?", "?", "?", "?"]
Nhân bản với Concat
Hãy nhớ làm thế nào tôi nói điều đó concat() có thể hữu ích khi bạn không muốn thay đổi mảng hiện tại của mình không? Chúng ta hãy xem làm thế nào 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 sang một mảng mới.
const arr1 = ["?", "?", "?", "?", "?", "?"];
const arr2 = [].concat(arr1);
arr2.push("?");
console.log(arr1) //["?", "?", "?", "?", "?", "?"]
console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]Thật tuyệt vời! Về cơ bản, chúng ta có thể “nhân bản” một mảng bằng cách sử dụng concat().
Nhưng có một ‘gotcha’ nhỏ trong quá trình nhân bản này. Mảng mới là “bản sao nông” của mảng đã sao chép. Điều này có nghĩa là bất kỳ đối tượng nào sao chép bằng cách tham khảo và không phải là đối tượng thực tế.
Hãy xem một ví dụ để giải thích ý tưởng này rõ ràng hơn.
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 chúng tôi, mảng cuối cùng 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 “bản sao sâu” của một mảng, nhưng tôi sẽ coi đó như bài tập về nhà cho bạn.
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 đẩy(). 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ử bỏ dịch (). Và bạn có thể thêm các mảng với nhau bằng cách sử dụng concat().
Chắc chắn có nhiều tùy chọn khác để thêm các 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 pháp mảng tuyệt vời!
Hãy liên hệ với tôi trên Twitter và cho tôi biết phương thức mảng yêu thích của bạn để thêm phần tử vào mảng.
