Cách Thêm Phần Tử Vào Vị Trí Cụ Thể Của Mảng Với JavaScript

Học cách thêm mục vào vị trí cụ thể (index) của mảng trong JavaScript.

Giả sử bạn muốn thêm mục vào mảng, nhưng không muốn append (thêm cuối) hoặc prepend (thêm đầu). Bạn muốn thêm tại vị trí/địa chỉ cụ thể của mảng.

Lưu ý: khi nói thao tác dữ liệu tại vị trí cụ thể, thường gọi là index. Với array indexes đếm từ 0, nghĩa là:

• 0 là 1
• 1 là 2
• v.v.

Vậy nếu mảng 5 phần tử, muốn truy cập phần tử thứ 3, truy cập 2.

Được, làm điều bạn đến đây.

Xuất hiện phương thức splice()

Để thêm mục vào vị trí index cụ thể trong mảng, dùng phương thức mạnh mẽ array.splice() của JavaScript. splice() có thể thêm hoặc xóa mục từ mảng.

Cú pháp splice():

array.splice(startIndex) array.splice(startIndex, deleteCount) array.splice(startIndex, deleteCount, value1)

Phương thức splice() nhận 3 hoặc nhiều đối số:

• Đối số 1: startIndex — vị trí bạn muốn thêm.
• Đối số 2: tùy chọn deleteCount — số mục muốn xóa (từ vị trí startIndex).
• Đối số 3: giá trị mục mới muốn thêm vào mảng.

Ví dụ thực tế splice()

Giả sử danh sách diễn viên chính phim hành động giả tưởng "Ask Questions Later". Diễn viên liệt kê theo thứ tự vai to nhỏ.

Một diễn viên nổi giận vì tên không xuất hiện trong danh sách chính:

const mainCastList = [ "Michael Jai White", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman" "The Rock", "Wesley Snipes" ]

Diễn viên bực mình là Steven Seagal(!!) xuất hiện đúng 7 giây, đủ đấm choáng 10 kẻ thù. Ông Seagal tin 7 giây đủ để vào danh sách chính.

Ai dám tranh cãi với Steven Seagal?

Thêm ông vào danh sách chính dùng splice() và cú pháp đối số vừa học.

Thêm Steven Seagal làm diễn viên thứ 2, ngay sau Michael Jai White (sẽ giải thích sau):

const mainCastList = [ "Michael Jai White", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Wesley Snipes", ] mainCastList.splice(1, 0, "Steven Seagal") console.log(mainCastList) // ["Michael Jai White", "Steven Seagal", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Wesley Snipes"]

Xong, hy vọng ông Seagal hài lòng!

Vì lặp lại là chìa khóa học tập, đây là điều xảy ra trong code:

• Gắn splice() cho biến mainCastList
• Áp dụng 3 đối số: startIndex (1), deleteCount (0 = không xóa gì), mục muốn thêm tại index đó ("Steven Seagal").

Lý do không thể thêm ông Seagal làm số 1 là Michael Jai White sẽ đá bây ông, rõ ràng.

Tốt để biết về splice()

Thêm nhiều mục cùng lúc

Muốn thêm nhiều mục cùng lúc, tách bằng dấu phẩy:

mainCastList.splice(1, 0, "Steven Seagal", "Sylvester Stallone")

Xóa tất cả mục từ startIndex

Nếu không truyền đối số 2 (ví dụ 0), tất cả mục từ startIndex sẽ bị xóa mặc định. Cẩn thận khi dùng splice() dự án thực tế.

Bắt đầu từ cuối mảng

Muốn chỉ định vị trí từ cuối mảng thay vì đầu, dùng giá trị âm cho đối số 1 splice():

mainCastList.splice(-1, 0, "Steven Seagal") console.log(mainCastList) // ["Michael Jai White", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Steven Seagal", "Wesley Snipes"]

Giờ ông Seagal thứ 2 từ cuối, quyết định táo bạo bạn tự chịu rủi ro.