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 : chèn vào mảng javascript

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ủ đề chèn vào javascript mảng

How to insert an item into an array at a specific index javascript

  • Tác giả: Chart JS
  • Ngày đăng: 2021-03-10
  • Đánh giá: 4 ⭐ ( 6974 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: How to insert an item into an array at a specific index javascript. In this video we will explore how to insert an item into an array at a specific index javascript. For this we will be using the array splice method. Watch to understand this! Let’s explore this!

    Javascript for beginners
    This is a part of a series of JavaScript tutorials for beginners. Helping out people who need to know more about JavaScript because they want to use this with their Chart.JS. The faster you learn basic JavaScript the faster you can start creating charts in chart js.

    Interested a Chart JS course?

    ⭐ Chart JS Udemy Course ⭐:
    Enjoy this video and want to dive deeper in a real useful Chart JS Training? Check out my Chart JS course on Udemy, click this link: https://www.udemy.com/course/chart-js…​

    Chart JS tutorials for Beginners:
    🎓 Beginners Series: https://www.youtube.com/watch?v=W6ai7…​

    Chart JS tutorials for Intermediate:
    👁️ Most Watched Chart JS Video: https://youtu.be/4jfcxxTT8H0​
    ⭐ Personal Favorite Chart JS Video: https://www.youtube.com/watch?v=PuFYW…​

    Chart JS Dashboard Series:
    👍 Most Liked Video Series:
    Watch Part 1: https://youtu.be/l3MnVpiHXBU​​​
    Watch Part 2: https://youtu.be/fDUo-LbrRSo​​​
    Watch Part 3: https://youtu.be/xlt5dDa8rz4​

    JavaScript​, JS​

Mảng array trong Javascript

  • Tác giả: kungfutech.edu.vn
  • Đánh giá: 4 ⭐ ( 6231 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ử)

Javascript – chèn một mảng vào bên trong một mảng khác

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 4212 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể sử dụng splicekết hợp với một số applythủ thuật: a1 = [1,2,3,4,5]; a2…

Một số cách thêm phần tử vào mảng trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 7342 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, mình sẽ trình bày một số cách thêm phần tử vào mảng trong Javascript. Sẽ có một số cách thay đổi mảng gốc, và có một số cách sẽ tạo ra một mảng mới và giữ nguyên mảng gốc. Mỗi cách…

Tổng hợp các hàm xử lý mảng hay dùng trong Javascript

  • Tác giả: suntech.edu.vn
  • Đánh giá: 3 ⭐ ( 1325 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp các hàm xử lý mảng thường sử dụng trong Javascript dành cho dev

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

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 5 ⭐ ( 7563 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 | JS ARRAY

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 7591 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu về Mảng (Hay còn gọi là Array), cách tạo và thao tác với Mảng trong JavaScript.

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  Hướng dẫn hoàn chỉnh để sử dụng phương thức Array Filter () trong JavaScript - phương pháp lọc mảng js

By ads_php