Bạn có thể sử dụng mảng trong JavaScript để lưu trữ một nhóm biến, thường được gọi là phần tử hoặc mục của mảng. Mỗi phần tử này sẽ có một số chỉ mục được gán cho chúng bắt đầu từ số không.
Theo mặc định, bạn có thể sử dụng chỉ mục của một phần tử trong mảng để truy cập hoặc sửa đổi giá trị của nó.
Nhưng JavaScript cung cấp các phương thức khác nhau mà bạn có thể sử dụng để thêm/nối thêm các phần tử vào một mảng.
Cách thêm một phần tử vào một mảng trong JavaScript bằng cách sử dụng push Phương pháp
Các push phương thức lấy (các) phần tử sẽ được thêm vào mảng làm (các) tham số của nó.
Đây là một ví dụ:
let myArr = [2, 4, 6];
myArr.push(8);
console.log(myArr);
// [ 2, 4, 6, 8 ]
Trong đoạn mã trên, myArr mảng có 3 phần tử khi khởi tạo — [2, 4, 6].
Sử dụng push phương pháp, chúng tôi đã thêm 8 vào mảng: myArr.push(8).
Bạn có thể thêm nhiều phần tử khi sử dụng push phương pháp bằng cách chuyển các phần tử dưới dạng tham số được phân tách bằng dấu phẩy. Đây là một ví dụ:
let myArr = [2, 4, 6];
myArr.push(8, 10, 12);
console.log(myArr);
// [ 2, 4, 6, 8, 10, 12 ]
Cách thêm một phần tử vào một mảng trong JavaScript bằng cách sử dụng splice Phương pháp
Bạn có thể dùng splice phương thức để thêm phần tử mới, xóa phần tử và thay thế phần tử hiện có trong một mảng.
Đây là cú pháp trông như thế nào:
splice(index, deleteNum, item1, ..., itemN)Hãy cùng xem ý nghĩa của từng thông số trên:
index biểu thị chỉ mục bắt đầu nơi splice phương pháp sẽ bắt đầu hoạt động của nó.
deleteNum biểu thị số phần tử bị xóa bắt đầu từ index.
item1 biểu thị giá trị của phần tử được chèn tại index.
Nếu những lời giải thích ở trên có vẻ khó hiểu, các ví dụ sau đây sẽ giúp bạn hiểu rõ hơn.
Đây là ví dụ đầu tiên, cho thấy cách bạn có thể nối thêm một phần tử vào một mảng bằng cách sử dụng splice phương pháp:
let myArr = [2, 4, 6];
myArr.splice(3,0,8)
console.log(myArr);
// [ 2, 4, 6, 8 ]Hãy chia mã ở trên thành dạng đơn giản nhất. Bắt đầu với các chỉ mục – ban đầu mảng có ba mục:
2 => chỉ số 0
4 => chỉ số 1
6 => chỉ số 2
Chúng tôi đã chuyển ba tham số cho splice phương pháp: splice(3,0,8).
Tham số đầu tiên — 3 — biểu thị chỉ mục bắt đầu cho splice phương pháp. Chỉ số 3 trong mảng của chúng ta xuất hiện ngay sau phần tử cuối cùng.
Tham số thứ hai — 0 — biểu thị số lượng phần tử sẽ bị xóa bắt đầu từ chỉ mục 3 (chỉ mục được chỉ định ở trên).
Tham số thứ ba — 8 — biểu thị giá trị được chèn vào chỉ mục đã chỉ định. Vì vậy, 8 được chèn vào chỉ mục 3. Khi đăng nhập vào bảng điều khiển, chúng tôi đã có điều này: [ 2, 4, 6, 8 ]
Nếu bạn hiểu làm thế nào các splice phương pháp hoạt động, thì có lẽ bạn nên chuyển sang phần tiếp theo. Nếu không, ví dụ tiếp theo sẽ đơn giản hóa nó hơn nữa.
let myArr = [2, 4, 6, 8, 10, 12, 14];
myArr.splice(3,2,16)
console.log(myArr);
// [ 2, 4, 6, 16, 12, 14 ]Hãy chia nhỏ nó như chúng ta đã làm trong ví dụ trước:
2 => chỉ số 0
4 => chỉ số 1
6 => chỉ số 2
8 => chỉ số 3
10 => chỉ số 4
12 => chỉ số 5
14 => chỉ số 6
Các splice phương thức có ba tham số: splice(3,2,16).
Tham số đầu tiên là 3. Điều này có nghĩa là chúng tôi đang bắt đầu ở chỉ số ba có giá trị là 8.
Tham số thứ hai là 2 biểu thị có bao nhiêu phần tử sẽ bị xóa bắt đầu từ chỉ mục 3.
Tham số thứ ba là 16, đây là giá trị được chèn vào chỉ mục 3.
Nếu bạn nhìn vào đầu ra, bạn sẽ nhận thấy rằng 16 hiện chiếm chỉ số 3 trong khi hai phần tử từ mảng ban đầu (8 và 10) đã bị xóa: [ 2, 4, 6, 16, 12, 14 ].
Vì vậy, mảng đã đi từ:
Mảng ban đầu = [2, 4, 6, 8, 10, 12, 14].
Để xóa hai phần tử bắt đầu từ chỉ số 3 = [ 2, 4, 6, 12, 14 ].
Để thêm 16 vào chỉ số 3 = [ 2, 4, 6, 16, 12, 14 ].
Cách thêm một phần tử vào một mảng trong JavaScript bằng cách sử dụng concat Phương pháp
Bạn có thể hợp nhất hoặc nối hai hoặc nhiều mảng bằng cách sử dụng concat phương pháp. Đây là một ví dụ:
let myArr1 = [2, 4, 6, 8];
let myArr2 = [10, 12, 14]
myArr = myArr1.concat(myArr2)
console.log(myArr);
// [ 2, 4, 6, 8, 10, 12, 14 ]
Đoạn mã trên khá đơn giản. Chúng tôi đã tạo hai mảng khác nhau — myArr1 và myArr2.
Sau đó, chúng tôi đã hợp nhất hai trong số chúng thành một mảng duy nhất, được lưu trữ trong myArr Biến đổi: myArr1.concat(myArr2).
Cách thêm phần tử vào mảng trong JavaScript bằng cú pháp trải rộng (...)
Bạn cũng có thể sử dụng cú pháp lây lan ES6 (...) để hợp nhất các mảng như chúng ta đã làm trong phần trước.
let myArr1 = [2, 4, 6, 8];
let myArr2 = [10, 12, 14]
myArr = [ ...myArr1, ...myArr2]
console.log(myArr);
// [ 2, 4, 6, 8, 10, 12, 14 ]
Cú pháp lây lan như được sử dụng ở trên sao chép tất cả các giá trị của cả hai mảng vào myArr mảng: myArr = [ ...myArr1, ...myArr2].
Tóm lược
Trong bài viết này, chúng ta đã nói về các phương pháp khác nhau mà bạn có thể sử dụng để thêm và nối các phần tử vào một mảng JavaScript.
Chúng tôi đã đưa ra các ví dụ bằng cách sử dụng push, splicevà concat các phương thức cũng như cú pháp trải rộng ES6 (...).
Chúc mừng mã hóa!
