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 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.

Bạn đang xem : thêm vào mảng js

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 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, 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 biểu thị 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 = ['Mục đầu tiên', 'Mục thứ hai', 'Mục thứ ba '];

arr.push ('Mục thứ tư');

console.log (arr); // ['Mặt hàng đầu tiên', 'Mặt hàng thứ hai', 'Mặt hàng thứ ba', 'Mặt hàng thứ tư']  

Được rồi, vì vậy push đã cung cấp cho chúng ta một cú pháp đơn giản và hay để thêm một mặt hàng đến cuối mảng của chúng tôi.

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 = ['Mục đầu tiên', 'Mục thứ hai', 'Mục thứ ba'];

arr.push ('Vật phẩm thứ tư', 'Vật phẩm thứ năm');

console.log (arr); // ['Vật phẩm đầu tiên', 'Vật phẩm thứ hai', 'Vật phẩm thứ ba', 'Vật phẩm thứ tư', 'Vật phẩm thứ năm']  

Bây giờ chúng tôi đã thêm một số nhiệm vụ khác vào mảng, chúng ta có thể muốn biết có bao nhiêu mặt hàng hiện có trong mảng của chúng ta để xác định xem chúng ta 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 = ['Mặt hàng đầu tiên', 'Mặt hàng thứ hai', 'Mặt hàng thứ ba'];

const arrLength = arr.push ('Vật phẩm thứ tư', 'Vật phẩm thứ năm');

console.log (arrLength); // 5
console.log (arr); // ['Sản phẩm đầu tiên', 'Sản phẩm thứ hai', 'Vật phẩm thứ ba', 'Vật phẩm thứ tư', 'Vật phẩm thứ năm']  

The Unshift Phương pháp

Không phải tất cả các tác 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 = ['Mục đầu tiên', 'Mục thứ hai', 'Mục thứ ba'];

const arrLength = arr.unshift ('Mục khẩn cấp 1', 'Mục khẩn cấp 2');

console.log (arrLength); // 5
console.log (arr); // ['Mặt hàng khẩn cấp 1', 'Mặt hàng khẩn cấp 2', 'Mặt hàng đầu tiên', 'Mặt hàng thứ hai', 'Mặt hàng thứ ba']  

Bạn có thể nhận thấy trong ví dụ trên rằng, 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 cung cấp cho chúng tôi khả năng thêm nhiều phần tử cùng một lúc.

Phương thức Concat

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

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

Đây là một điểm khác biệt rất quan trọng và làm cho concat () cực kỳ hữu ích khi bạn 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).

Tại đâ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 cả ngày!

  const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];

const arr4 = arr1.concat (arr2, arr3);

console.log (arr4); // ["?", "?", "?", "?", "?", "?"]
 

Sao chép 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ó? 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 bằng 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);

// chỉ thay đổi arr2
arr2 [1] .food = "?";
arr2.push ({food: "?"})

console.log (arr1) // [{food: '?' }, { món ăn: '?' }, { món ăn: '?' }]

console.log (arr2) // [{food: '?' }, { món ăn: '?' }, { món ăn: '?' },
{ món ăn: '?' }]  

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, mảng cuối cùng vẫn bị ảnh hưởng bởi những thay đổi chúng tôi đã thực hiện trên mảng được sao chép 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ò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 pháp 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.


Xem thêm những thông tin liên quan đến chủ đề thêm vào một mảng js

How To Add Object to JavaScript Array

  • Tác giả: Semicolon Dot Dev
  • Ngày đăng: 2021-03-23
  • Đánh giá: 4 ⭐ ( 9386 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this short JavaScript tutorial I’ll show you how to add an object to a JS array. One way to add object to array in js is by using the built in push method, using array length or directly in array definition.

Mảng array trong Javascript

  • Tác giả: kungfutech.edu.vn
  • Đánh giá: 5 ⭐ ( 3129 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Array, hay được gọi là mảng, là kiểu dữ liệu mà giá trị của nó chứa nhiều giá trị khác. Mỗi giá trị của mảng được gọi là element (phần tử)

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

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 3080 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đặt bất cứ thứ gì vào một mảng bằng Array.push (). var a=[], b={}; a.push(b); //…

Các Phương Thức Array Javascript

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 5557 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay bạn hãy cùng mình đi vào tìm hiểu cách sử dụng các phương thức với kiểu dữ liệu array (mảng) trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Các phương thức của mảng trong JavaScript

  • Tác giả: completejavascript.com
  • Đánh giá: 3 ⭐ ( 2368 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có rất nhiều phương thức của mảng trong JavaScript. Nhờ đó, việc xử lý mảng trở nên dễ dàng hơn. Sau đây là các phương thức xử lý mảng phổ biến nhất.

Thêm phần tử vào mảng trong JavaScript (unshift, push, index)

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 5 ⭐ ( 6290 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách thêm phần tử vào mảng trong JavaScript. Bạn sẽ học được cách sử dụng index, phương thức push() và unshift() để thêm một hoặc nhiều phần tử vào mảng JavaScript trong bài học này.

Mảng trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 2190 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: các bạn về mảng trong JavaScript. Vậy trước tiên, hãy cùng mình trả lời câu hỏi Mảng là gì? Mảng trong JavaScript như thế nào?

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Alter Table Add Constraint - Cách sử dụng Constraints SQL - làm thế nào để thêm một ràng buộc

By ads_php