Hướng dẫn array push javascript

Trong bài này chúng ta sẽ tìm hiểu cú pháp của hàm array.push() trong javascript, qua đó sẽ giúp bạn biết cách thêm mới một phần tử vào mảng.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Thông thường, muốn thêm một phần tử vào mảng thì bạn phải gán số chỉ mục cho phần tử cần thêm đó. Trường hợp chỉ mục đó đã tồn tại trong mảng thì đó sẽ là một thao tác cập nhật chứ không phải là thêm mới.

Hơn nữa, rất khó để kiểm soát được những chỉ mục nào đã tồn tại. Vì vậy, ta thường thêm phần tử vào vị trí cuối cùng bằng cách sử dụng hàm push() trong js.

1. Cú pháp hàm push trong javascript

Một vài lưu ý quan trọng:

Bài viết này được đăng tại [free tuts .net]

• Hàm push() sẽ thêm mới một hoặc nhiều phần tử vào cuối mảng, hàm trả về chiều dài của mảng mới.
• Hàm push() sẽ làm thay đổi chiều dài của mảng.
• Nếu bạn muốn thêm phần tử vào đầu mảng, sử dụng hàm unshift().

Cú pháp hàm này như sau:

array.push(item1, item2, ..., itemX)

Trong đó:

• tem1, item2, ..., itemX là các phần tử sẽ được thêm vào cuối mảng array.
• Hàm sẽ trả về tổng chiều dài của mảng mới sau khi thêm.

Ví dụ: Một vài thao tác thêm phần tử vào cuối mảng. Đây là ví dụ mình lấy từ trang chủ Mozilla.

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// output: 4
console.log(animals);
// output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

2. Một ví dụ khác về hàm push trong js

Hãy sử dụng hàm push() để thêm các phần tử vào cuối mảng. Hành động xảy ra khi click vào một button.

In

Như vậy là chúng ta đã tìm hiểu xong cách sử dụng hàm push trong javascrpipt.

• Định nghĩa hàm push() trong JavaScript
• Cú pháp hàm push() trong JavaScript
• Gán giá trị cho mảng
• Làm thế nào để thêm một mảng vào mảng khác?
• Sử dụng hàm push() với Object
• Kết luận

Trong bài viết này, chúng ta sẽ tìm hiểu về hàm push() trong JavaScript. Nếu như ở các ngôn ngữ lập trình khác, việc thêm phần tử vào cuối mảng diễn ra một cách thủ công từ việc bạn phải tăng số lượng phần tử trong mảng rồi đi gán giá trị cho phần tử đó. Nhưng với JavaScript thì linh hoạt hơn, bạn sẽ không phải mất nhiều công đoạn cho việc này.

Hàm push() trong JavaScript được sử dụng để thêm một hoặc nhiều phần tử vào trong mảng. Phần tử được thêm sẽ nằm ở vị trí cuối mảng.

Khác với hàm push(), hàm unshift() sẽ thêm một hoặc nhiều phần tử vào trong mảng nhưng phần tử được thêm sẽ nằm ở vị trí đầu mảng.

Cú pháp hàm push() trong JavaScript

Cú pháp:

array.push(item1, item2, item3,..., itemN)
Code language: CSS (css)

Trong đó:

Ví dụ: Thêm 1 phần tử vào vị trí cuối cùng của mảng

let arr = [0, 1, 2, 3];
arr.push(4);
console.log(arr); // [0, 1, 2, 3, 4]
Code language: JavaScript (javascript)

Trong ví dụ trên, câu lệnh arr.push(4) thêm phần tử 4 vào vị trí cuối cùng trong mảng.

Hàm push() chấp nhận số lượng đối số không giới hạn và bạn có thể thêm bấy nhiêu phần tử tùy thích vào cuối mảng.

let arr = [0, 1, 2, 3];
arr.push(4, 5, 6, 7, 8, 9);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Code language: JavaScript (javascript)

Hàm push() trả về độ dài mới của mảng.

let arr = [0, 1, 2, 3];
let newLength = arr.push(4);
console.log(newLength); // 5
Code language: JavaScript (javascript)

Gán giá trị cho mảng

Gán mảng hiện tại là kết quả của hàm push(). Đây là một lỗi rất cơ bản mà nhiều bạn mắc phải.

let arr = [0, 1, 2, 3];
arr = arr.push(4);
console.log(arr); // 5
Code language: JavaScript (javascript)

Để tránh lỗi này, bạn cần nhớ rằng push() sẽ trả về độ dài mới của mảng. Nếu bạn gán giá trị cho mảng với giá trị là kết quả của hàm push() thì có nghĩa là bạn đang ghi đè giá trị mảng bằng độ dài mới của mảng.

Trong ví dụ trên, mảng arr được ghi đè bằng giá trị 5 (độ dài mới của mảng).

Làm thế nào để thêm một mảng vào mảng khác?

Nếu bạn muốn thêm các phần tử của một mảng vào cuối mảng khác, bạn cũng có thể lựa chọn hàm push() để sử dụng.

let arr1 = [0, 1, 2, 3];
let arr2 = [4, 5, 6, 7];
let arr3 = arr1.concat(arr2);
console.log(arr3); // [0, 1, 2, 3, 4, 5, 6, 7]
Code language: JavaScript (javascript)

Hàm push() sẽ thêm tất cả các đối số nên từ khi ES6 ra mắt, chúng ta có thể sử dụng Spread Operator trong trường hợp này.

let arr1 = [0, 1, 2, 3];
let arr2 = [4, 5, 6, 7];
arr1.push(...arr2);
console.log(arr1); // [0, 1, 2, 3, 4, 5, 6, 7]
Code language: JavaScript (javascript)

Spread Operator trong JavaScript

Sử dụng hàm push() với Object

Có những đối tượng tương tự như mảng (như đối tượng arguments – đối tượng cho phép truy cập vào tất cả các đối số của một hàm), nhưng nó không có tất cả các hàm mà mảng có.

Để có thể sử dụng hàm push() hoặc các hàm khác, trước tiên chúng phải được ép kiểu thành mảng.

function myFunc() {
   let args = [...arguments];
   args.push(4);
   returns args;
}

console.log(myFunc(0, 1, 2, 3)); // [0, 1, 2, 3, 4]
Code language: JavaScript (javascript)

Nếu bạn không ép kiểu đối tượng arguments thành một mảng, thông báo lỗi sẽ được hiển thị trong console.

TypeError: arguments.push is not a function
Code language: JavaScript (javascript)

Ép kiểu trong JavaScript

Kết luận

Hàm push() trong JavaScript sẽ thêm một hoặc nhiều phần tử vào trong mảng và trả về độ dài mới của mảng đó. Hãy ghi nhớ cách sử dụng của hàm này vì nếu bạn vẫn còn làm việc với JavaScript thì bạn sẽ sử dụng nó thường xuyên đấy. Cảm ơn bạn đã đọc!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

CẨM NANG LẬP TRÌNH CĂN BẢN CHO NGƯỜI MỚI BẮT ĐẦU