Làm thế nào thêm phần tử vào array trong Javascript

Hôm nay mình sẽ giới thiệu đến các bạn 6 cách để thêm phần tử vào mảng (array) trong Javascript. Okie, let’s go.

Cách 1: Thay đổi mảng gốc

const animals = ['a'];

// 1. unshift (thêm vào đầu mảng)
animals.unshift('b'); // ['b', 'a']

// 2. push (thêm vào cuối mảng)
animals.push('b'); // ['a', 'b']

// 3. splice (thêm vào vị trí tùy chỉnh được)
animals.splice(animals.length, 0, 'b'); // ['a', 'b']

// 4. dùng bracket
animals[animals.length] = 'b'; // ['a', 'b']

Cách 2: Không thay đổi mảng gốc, chỉ tạo ra mảng mới

const animals = ['a'];

// 5. concat
const newAnimals = animals.concat('b'); // ['a', 'b']

// 6. toán tử spread
const newAnimals = [...animals, 'b']; // ['a', 'b']

// 5.1 biến thể của concat (đảo vị trí tham số truyền vào sẽ thêm vào đầu hoặc cuối)
// cú pháp `[].concat` giúp bạn không nhầm lẫn animals nối thêm phần tử,mà là mảng mới nối mảng animals với phần tử hoặc mảng khác
const newAnimals = [].concat(animals, 'b'); // ['a', 'b']
// 5.2 thêm nhiều vào cuối mảng
const newAnimals = [].concat(animals, ['b', 'c']); // ['a', 'b', 'c']

// 6.1 biến toán tử spread, thêm vào đầu mảng và cuối mảng
const newAnimals = ['b', ...animals, 'c']; // ['b', 'a', 'c']

Giải thích cách 1 - thay đổi mảng gốc

Đây là cách sử dụng các function prototype có sẵn trong Array để thêm phần tử vào mảng. Các function phổ biến như sau:

unshift - thêm phần tử vào đầu mảng

const zoo = ['tiger', 'chicken'];

zoo.unshift('bird');

console.log(zoo); // ['bird', 'tiger', 'chicken']

// or thêm nhiều

zoo.unshift('bird', 'eagle');

console.log(zoo); // ['bird', 'eagle', 'tiger', 'chicken']

push - thêm phần tử vào cuối mảng

const zoo = ['tiger', 'chicken'];

zoo.push('bird');

console.log(zoo); // ['tiger', 'chicken', 'bird']

// or thêm nhiều

zoo.push('bird', 'eagle');

console.log(zoo); // ['tiger', 'chicken', 'bird', 'eagle']

splice

Đây là function có thể làm được 3 việc, đó là thêm phần tử, xóa phần tử và thay thế phần tử này bằng phần tử khác.

Ở trường hợp thêm phần tử vào mảng của chúng ta, splice hoặc động như sau:

const zoo = ['tiger', 'chicken'];

zoo.splice(
  zoo.length, // index tại cuối mảng, nghĩa là chúng ta muốn thêm vào cuối mảng
  0, // deleteCount = 0 vì chúng ta chỉ muốn thêm, không thay thế hay xóa em nào cả
  'eagle' // thêm phần tử này vào
);

console.log(zoo); // ['tiger', 'chicken', 'eagle']

Lưu ý splice có thể thêm vào nhiều phần tử ví dụ:

1
2
3

const zoo = ['tiger', 'chicken'];

zoo.splice(zoo.length, 0, 'bird', 'eagle'); // ['tiger', 'chicken', 'bird', 'eagle']

bracket

Thực ra cái này chắc nhiều bạn biết rồi, nguyên lý giống cái splice ở trên, index truyền vào bracket và nó sẽ thêm hoặc sửa. Ví dụ

const words = ['a', 'b', 'c'];

// ['a', 'b', 'c', 'd']
words[words.length] = 'd'; // words.length trả về độ dài của mảng, nên viết như vầy sẽ thêm phần tử vào mảng

// ['e', 'b', 'c']
words[0] = 'e'; // sửa phần tử đầu tiên

Giải thích cách 2 - không thay đổi mảng gốc

Khác với cách 1, cách hai này luôn luôn trả về một mảng mới sau khi đã thêm phần tử, chứ nó không có thay đổi mảng gốc.

concat - nối thêm mảng hoặc phần tử

Ví dụ trên khá rõ ràng chắc không có gì phải giải thích

spread - toán tử spread

Ngắn gọn và đẹp đẽ, với 3 dấu chấm đã thay đổi câu chuyện

Nếu không có 3 dấu chấm thì có nghĩa bạn đã thêm mảng vào mảng (thêm mảng lồng nhau), ví dụ:

const sports = ['⚽️', '🏀'];
const activities = ['🎾', '🏒'];

const myActivities = [sports, activities];

console.log(myActivities); // [['⚽️', '🏀'], ['🎾', '🏒']]

Thêm ba dấu chấm (3 dấu chấm nghĩa là destructuring)

const sports = ['⚽️', '🏀'];
const activities = ['🎾', '🏒'];

const myActivities = [...sports, ...activities];

console.log(myActivities); // ['⚽️', '🏀', '🎾', '🏒']

Tóm lại nên dùng thằng nào

Thường để trả lời câu hỏi nên chọn ai, thì phải dựa vào nhiều trường hợp, nếu bạn tuân thủ phương châm trong pure function không muốn bị side effect thì nên dùng cách 2, (vì nó không thay đổi mảng gốc, luồng chạy dữ liệu dễ dàng kiểm soát hơn). Nói như vậy không có nghĩa là không nên dùng cách 1, vì cách 1 có công dụng trong vài trường hợp.

Ví dụ, check if...else nếu if thêm phần tử này vào, else thêm phần tử kia, thì cách 1 là tốt nhất. (ngắn gọn, thay vì phải nhận kết quả trả về).

Về vấn đề hiệu suất, bạn thử tưởng tượng, một cái có sẵn chỉ việc thêm (cách 1) với lấy cái có sẵn, copy ra, thêm vào, trả về (cách 2) thì cái nào nhanh hơn. Hehe các bạn tự hiểu nhé.

Tham khảo

splice