4 cách khác nhau để đẩy một mục lên đầu một mảng trong JavaScript bằng cách sử dụng các phương thức unshift (), concat (), ES6 Spread Operator và / hoặc splice ().

Bạn đang xem : đẩy mảng javascript lên phía trước

Đẩy một mục lên đầu mảng trong JavaScript

Giới thiệu

Làm cách nào để bạn đẩy một mục lên đầu mảng bằng JavaScript?

Trong bài viết này, chúng tôi sẽ chỉ cho bạn bốn cách khác nhau để thực hiện việc này bằng cách sử dụng JavaScript thuần túy:

  1. Phương thức unshift ()
  2. Phương thức concat ()
  3. Phương pháp ... Spread Operator ES6
  4. Phương thức splice ()

Chúng tôi sẽ trình bày chi tiết hơn từng phương pháp dưới đây và cũng cung cấp cho bạn các mẫu mã.

Hãy bắt đầu!

Mục lục

1. Phương thức Unshift ()

Phương thức unshift () thêm một hoặc nhiều mục vào đầu mảng và trả về độ dài mới của mảng đã sửa đổi.

Đây là những gì nó trông giống như trong một ví dụ mã:

JavaScript

Sao chép

    
      let originalArray = ["Taco", "Hamburger", "Hot Dog", "Chicken"]

      originalArray.unshift ("Thịt bê")

      console.log (originalArray)

      // Kết quả: ["Veal", "Taco", "Hamburger", "Hot Dog", "Chicken"]
    
  

Phương thức unshift () nhận một hoặc nhiều tham số của phần tử bạn muốn thêm vào phía trước của mảng.

Nếu bạn thêm nhiều mục vào hàm dưới dạng tham số, chúng sẽ được thêm vào dưới dạng đoạn ở đầu theo đúng thứ tự mà bạn đã chuyển chúng dưới dạng đối số.

Cũng cần lưu ý rằng phương thức này sẽ trả về độ dài của mảng mới được tạo ( không phải chính mảng mới ). Điều này sẽ khác với một số phương pháp khác mà chúng tôi đề cập trong bài viết này và tốt hoặc xấu tùy thuộc vào trường hợp sử dụng của bạn.

Xem Tài liệu Web MDN để biết thêm thông tin cụ thể về phương thức unshift ().

Trong phần tiếp theo, chúng ta sẽ đề cập đến phương thức concat () .

2. Phương thức Concat ()

Phương thức concat () được sử dụng để kết hợp hai hoặc nhiều mảng. Nó không thay đổi bất cứ điều gì về các mảng được cung cấp cho phương thức mà chỉ trả về mảng mới được tạo.

Xem Thêm  Kiểm tra xem Mảng có chứa giá trị trong JavaScript hay không - javascript kiểm tra xem mảng có chứa

Đây là mã trông như thế nào khi sử dụng phương thức concat () để nối một mục vào phía trước một mảng:

JavaScript

Sao chép

    
      const originalArray = ["Taco", "Hamburger", "Hot Dog", "Chicken"]

      const newArray = ["Veal"]. concat (originalArray)

      console.log (newArray)

      // Kết quả: ["Veal", "Taco", "Hamburger", "Hot Dog", "Chicken"]
    
  

Ngược lại với giá trị độ dài mảng được trả về bởi phương thức unshift () , concat () sẽ trả về một bản sao ngắn của mảng mới được tạo. Do đó, phương pháp này rất phù hợp để bạn sử dụng khi mảng ban đầu cần không thay đổi vì bất kỳ lý do gì.

Xem Tài liệu Web MDN để biết thêm thông tin cụ thể về phương thức concat ().

Phương pháp tiếp theo mà chúng tôi sẽ đề cập là Toán tử Spread ES6.

3. Toán tử Spread ES6

Cú pháp lây lan là một tính năng được thêm vào phiên bản ES6 của JavaScript cho phép bạn lặp lại một mảng và mở rộng các giá trị của mảng khi không có hoặc nhiều đối số hoặc phần tử được mong đợi.

Theo thuật ngữ của giáo dân, nó cho phép bạn thao tác chuỗi, mảng và đối tượng theo cú pháp ngắn gọn hơn và dễ sử dụng hơn so với các phương pháp khác. Và nó có thể được sử dụng đặc biệt để đẩy một mục lên đầu mảng.

Đây là mã trông như thế nào:

JavaScript

Sao chép

    
      let originalArray = ["Taco", "Hamburger", "Hot Dog", "Chicken"]

      originalArray = ["Veal", ... originalArray]

      console.log (originalArray)

      // Kết quả: ["Veal", "Taco", "Hamburger", "Hot Dog", "Chicken"]
    
  

Sử dụng toán tử spread theo cách này chỉ cần tạo một phiên bản mới của mảng và đặt "Veal" ở vị trí đầu tiên.

Phương pháp này không được hỗ trợ trong tất cả các trình duyệt. Cụ thể, không có phiên bản trình duyệt Internet Explorer nào hỗ trợ toán tử lây lan ES6.

Xem Thêm  Cách thêm JavaScript vào HTML - cách thêm javascript vào html

Xem Tài liệu Web MDN để biết thêm thông tin cụ thể về Toán tử Spread ES6.

Trong phần tiếp theo, chúng ta sẽ đề cập đến phương thức splice () cuối cùng.

4. Phương thức Splice ()

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

Đây là phương pháp trông như thế nào trong thực tế:

JavaScript

Sao chép

    
      let originalArray = ["Taco", "Hamburger", "Hot Dog", "Chicken"]

      originalArray.splice (0, 0, "Veal")

      console.log (originalArray)

      // Kết quả: ["Veal", "Taco", "Hamburger", "Hot Dog", "Chicken"]
    
  

Phương thức splice () nhận ba tham số theo thứ tự sau:

  1. Chỉ mục mà bạn muốn bắt đầu thay đổi mảng tại đó
  2. Một số nguyên xác định có bao nhiêu phần tử trong mảng cần loại bỏ ngay từ đầu
  3. Các phần tử bạn muốn thêm vào mảng (bắt đầu từ điểm bắt đầu)

Trong ví dụ mã của chúng tôi, chúng tôi đã cung cấp cho cả tham số thứ nhất và thứ hai một giá trị 0 . Bằng cách cung cấp cho các mục đó giá trị 0 , chúng tôi đang yêu cầu phương thức splice () chèn phần tử của chúng tôi vào đầu originalArray chúng tôi cung cấp.

Xem Tài liệu Web MDN để biết thêm thông tin cụ thể về phương thức splice ().

Đó là phương pháp cuối cùng mà chúng tôi sẽ đề cập trong bài viết này.

Kết luận

Trong bài viết này, chúng tôi đề cập đến bốn phương pháp khác nhau để đẩy một mục lên đầu một mảng:

  1. Phương thức unshift ()
  2. Phương thức concat ()
  3. Phương pháp ... Spread Operator ES6
  4. Phương thức splice ()

Cảm ơn bạn đã đọc và chúc bạn viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề mảng javascript đẩy lên phía trước

Top 10 JavaScript Array Methods

  • Tác giả: JavaScript Mastery
  • Ngày đăng: 2019-05-02
  • Đánh giá: 4 ⭐ ( 8485 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Arrays are one of the most common things you will be dealing with in your everyday JavaScript workflow. These are some of the best JavaScript array methods that will make your workflow faster and more enjoyable. In this video I will be covering the 10 most important array methods in JavaScript.
Xem Thêm  Biến in trong Python - Cách in chuỗi và biến - python làm thế nào để in chuỗi

Chi tiết bài học Kiểu dữ liệu mảng trong Javascript (phần 1)

  • Tác giả: vimentor.com
  • Đánh giá: 4 ⭐ ( 6620 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vimentor chi tiết bài học

JavaScript đẩy lên mảng

  • Tác giả: vie.loveblade.org
  • Đánh giá: 5 ⭐ ( 3910 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm cách nào để đẩy giá trị mới vào mảng sau? json = {“cool”: “34.33”, “alsocool”: “45454”} Tôi đã thử json.push (“coolness”: “34.33”) ;, nhưng nó không hoạt động.

Javascript cơ bản

  • Tác giả: www.doidev.com
  • Đánh giá: 4 ⭐ ( 1630 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thông báo đẩy web

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 4319 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thông báo đẩy đã có sẵn cho các nền tảng di động trong một thời gian khá dài. Nhưng thông báo đẩy cho web vẫn là một công nghệ mới chưa được hỗ trợ rộng rãi. Tại thời điểm viết bài viết này,…

Mảng trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 3 ⭐ ( 5459 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở phần hằng và biến trong javascript mình cũng có nói qua về cách khai báo mảng trong javascript rồi. Nhưng đó mới chỉ là mức độ khai báo còn sử dụng thì mình chưa nói, nên bài này mình sẽ giới thiệu lại với mọi người về mảng trong javascript một cách chi tiết hơn.

Làm cách nào để thêm các phần tử mảng mới vào đầu một mảng trong Javascript?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 9730 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Sử dụng unshift. Nó giống như push, ngoại trừ nó thêm các phần tử vào đầu…

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

By ads_php