Bạn có thể thêm các phần tử vào một mảng JavaScript không?

Alexandra là một nhà tiếp thị web, Chủ sở hữu sản phẩm nhanh nhẹn và là người viết chữ khó tính, người đã đóng góp cho HostingAdvice, InMotion Hosting, HostGator và các blog công nghệ và lưu trữ nổi bật khác, cũng như Forbes. Cô có gần 10 năm kinh nghiệm xây dựng trang web, tư vấn về thiết kế web và ứng dụng dành cho thiết bị di động, đồng thời tạo ra nội dung thu hút và chuyển đổi. Chủ đề chuyên môn chính của cô bao gồm WordPress, thiết kế UX, quản lý dự án Agile và tất nhiên là lưu trữ web

Được chỉnh sửa bởi. Lillian Guevara-Castro

Lillian Guevara-Castro

Lillian mang đến hơn 30 năm kinh nghiệm biên tập và báo chí. Cô đã viết và biên tập cho các tổ chức tin tức lớn, bao gồm Tạp chí Atlanta-Hiến pháp và Thời báo New York, và trước đây cô từng là trợ giảng tại Đại học Florida. Hôm nay, cô ấy chỉnh sửa nội dung HostingAdvice cho rõ ràng, chính xác và thu hút người đọc

Đã cập nhật. 10/9/2020

Có một số phương pháp để thêm các phần tử mới vào một mảng JavaScript. Thay vào đó, nếu bạn muốn xóa các phần tử khỏi một mảng trong JavaScript, thì chúng tôi cũng có một bài viết về điều đó

Vui lòng nhấp vào các liên kết bên dưới để chuyển sang phần giải thích của từng phương pháp

1. Sử dụng push() để thêm vào cuối mảng
2. Sử dụng unshift() để thêm vào đầu mảng
3. Sử dụng mối nối () để thêm các phần tử trong một mảng
4. Sử dụng concat() để kết hợp và tạo các mảng mới, dài hơn
5. Sử dụng Ký hiệu chỉ mục để chỉ định một chỉ mục để thêm một phần tử

Bây giờ hãy thảo luận về cách thức và thời điểm thực hiện từng lệnh này

Thêm vào cuối mảng sử dụng push()

Phương thức push() sẽ thêm một phần tử vào cuối mảng, trong khi chức năng song sinh của nó, phương thức pop(), sẽ loại bỏ một phần tử khỏi phần cuối của mảng

Để thêm một phần tử vào cuối mảng bằng cách sử dụng push(), bạn sẽ làm điều này

var list = ["foo", "bar"];
list.push("baz");
["foo", "bar", "baz"] // result

Bạn cũng có thể thêm nhiều phần tử vào một mảng bằng cách sử dụng hàm push(), như hình bên dưới

var list = ["foo", "bar"];
list.push("baz", "qux", "etcetera");
["foo", "bar", "baz", "qux", "etcetera"] // result

Nếu bạn cần thêm một phần tử hoặc nhiều phần tử vào cuối một mảng, phương thức push() hầu như sẽ luôn là lựa chọn đơn giản và nhanh nhất của bạn

Thêm vào phần đầu của một mảng bằng cách sử dụng unshift()

Phương thức unshift() sẽ thêm một phần tử vào đầu mảng, trong khi hàm sinh đôi của nó, shift(), sẽ loại bỏ một phần tử khỏi đầu mảng

Để thêm một phần tử vào đầu một mảng bằng cách sử dụng unshift(), hãy thử điều này

var list = ["foo", "bar"];
list.unshift("baz");
["baz", "foo", "bar"] // result

Để thêm nhiều phần tử vào đầu một mảng bằng cách sử dụng unshift(), hãy thử điều này

var list = ["foo", "bar"];
list.unshift("baz", "qux");
["baz", "qux", "foo", "bar"] // result

Nếu bạn cần thêm các phần tử vào phần đầu của một mảng, phương thức unshift() hầu như sẽ luôn là lựa chọn đơn giản và nhanh nhất của bạn

Thêm (các) phần tử vào giữa mảng bằng splice()

Phương thức splice() sửa đổi nội dung của một mảng bằng cách loại bỏ các phần tử hiện có và/hoặc thêm các phần tử mới

Dưới đây, bạn sẽ tìm thấy cú pháp hàm splice() thích hợp

array.splice( start, deleteCount [, item1 [, item2 [, ...] ] ] )

Nếu bạn muốn chèn một phần tử (hoặc nhiều phần tử) vào một điểm cụ thể ở đâu đó trong mảng, ngoài phần đầu hoặc phần cuối, thì rất có thể bạn nên sử dụng phương thức splice()

Để sử dụng mối nối (), mã của bạn sẽ trông như thế này

var list = ["foo", "bar"];
list.splice( 1, 0, "baz"); // at index position 1, remove 0 elements, then add "baz" to that position
                           // element "bar" will now automatically be moved to index position 2
["foo", "baz", "bar"] // result

Để thêm nhiều phần tử vào giữa một mảng bằng cách sử dụng mối nối (), hãy thử điều này

var list = ["foo", "bar"];
list.splice( 1, 0, "baz", "qux");
["foo", "baz", "qux", "bar"] // result

Lệnh mối nối giống như Swiss Army Knife của thao tác mảng;

Thêm vào một mảng bằng cách tạo một mảng mới bằng cách sử dụng concat()

Phương thức concat() trả về một mảng kết hợp mới bao gồm mảng mà nó được gọi, được nối với mảng (hoặc các mảng) từ đối số của nó

Để thêm một số phần tử vào một mảng khác bằng cách sử dụng concat(), hãy làm như sau

var list = ["foo", "bar"];
var newlist = list.concat( ["baz", "qux"] );
["foo", "bar", "baz", "qux"] // newlist result

Cũng có thể thêm trực tiếp các giá trị không phải mảng bằng cách sử dụng concat()

Phương thức concat() là một giải pháp đơn giản trong các trường hợp bạn cần kết hợp một số mảng lại với nhau mà không làm mã của bạn bị phồng lên với các vòng lặp for hoặc các vòng lặp lặp khác

Thêm một phần tử mảng tại một chỉ mục cụ thể bằng cách sử dụng ký hiệu chỉ mục

Chúng ta cũng có thể thao tác trực tiếp với mảng mà không cần sử dụng bất kỳ phương thức mảng nào bằng cách tham chiếu đến vị trí chỉ mục trong mảng

Ở đây chúng tôi thêm hai yếu tố mới tại các vị trí được chỉ định

var list = ["foo", "bar"];
list[2] = "baz"; // add element "baz" to the index position 2 in the array
list[3] = "qux";
["foo", "bar", "baz", "qux"] // result

Ở đây chúng ta thêm một phần tử vào cuối mảng

var list = ["foo", "bar"];
list.push("baz", "qux", "etcetera");
["foo", "bar", "baz", "qux", "etcetera"] // result

Phương pháp ký hiệu chỉ mục thường hữu ích khi bạn biết chính xác vị trí đặt một phần tử trong mảng, bất kể vị trí đó có thể ở đâu. Tình huống này thường áp dụng cho nhiều loại triển khai thuật toán

Những từ cuối cùng về việc thêm vào một mảng trong JavaScript

Việc thêm một phần tử vào một mảng trong JavaScript khá đơn giản, nhưng không có một phương thức duy nhất nào luôn là tốt nhất để sử dụng. Hy vọng rằng bây giờ bạn có thể cảm thấy tự tin khi sử dụng một cách tiếp cận mở rộng mảng cụ thể trong các ngữ cảnh mã khác nhau. Như mọi khi, nếu bạn có thêm câu hỏi, nhận xét, bổ sung hoặc trừ, hãy thông báo cho chúng tôi bên dưới

Tiết lộ dành cho nhà quảng cáo

HostingAdvice. com là một nguồn tài nguyên trực tuyến miễn phí cung cấp các dịch vụ so sánh và nội dung có giá trị cho người dùng. Để giữ cho tài nguyên này miễn phí 100%, chúng tôi nhận được tiền bồi thường từ nhiều ưu đãi được liệt kê trên trang web. Cùng với các yếu tố đánh giá chính, khoản bồi thường này có thể ảnh hưởng đến cách thức và vị trí các sản phẩm xuất hiện trên trang web (ví dụ: bao gồm cả thứ tự xuất hiện của chúng). HostingAdvice. com không bao gồm toàn bộ các ưu đãi có sẵn. Ý kiến ​​​​biên tập thể hiện trên trang web hoàn toàn là của riêng chúng tôi và không được cung cấp, xác nhận hoặc phê duyệt bởi các nhà quảng cáo