14 cách để copy Array trong JavaScript

Hi xin chào các bạn, ở chuỗi bài viết trước mình đã giới thiệu các method được sử dụng phổ biến nhất khi làm việc với Array trong JavaScript. Hôm nay chúng ta sẽ đến một bài viết khá hay ho nữa đó là: Làm thế nào để copy 'an toàn' một Array trong JS, 'an toàn' ở đây tức là ta phải đảm bảo việc copy không làm ảnh hưởng đến array gốc. Nào bắt đầu thôi !

1. Sử dụng Array.slice()

Việc không truyền đối số vào slice() giúp ta tạo ra 1 bản sao từ array gốc

const numbers = [1, 2, 3, 4, 5];
const copy = numbers.slice();

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

2. Sử dụng Array.map()

Nếu bên trong thân hàm map() ta không biến đổi gì mà chỉ return item thì đồng nghĩa với việc ta đang copy array

const numbers = [1, 2, 3, 4, 5];

// ES5
const copy = numbers.map(function(number) {
  return number;
});

// ES6
// const copy = numbers.map(number => number);

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

3. Sử dụng Array.from()

Set trong JS là tập hợp các giá trị không bị trùng lặp, nghĩa là trong một set không thể có hai giá trị bằng nhau. Việc ta tạo ra 1 đối tượng Set chứa array và đặt vào trong Array.from() sẽ giúp ta copy được array

const numbers = [1, 2, 3, 4, 5];
const copy = Array.from(new Set(numbers));

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

4. Sử dụng spread operator

Từ khoá này quá quen thuộc với các devjs rồi, thường khi đã làm việc với ES6 thì dấu 3 chấm này được dùng rất phổ biến để copy array/object

const numbers = [1, 2, 3, 4, 5];
const copy = [...numbers];

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

5. Sử dụng Array.of() kết hợp spread operator

Array.of() được dùng để tạo ra một mảng mới với các phần tử được truyền vào thông qua tham số truyền vào

const numbers = [1, 2, 3, 4, 5];
const copy = Array.of(...numbers);

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

6. Sử dụng Array.push() kết hợp spread operator

Trước tiên ta khởi tạo 1 array rỗng, sau đó push nguyên array ban đầu vào ta sẽ thu được 1 bản sao

const numbers = [1, 2, 3, 4, 5];
let copy = [];
copy.push(...numbers);

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

7. Sử dụng Array.unshift() kết hợp spread operator

Có push() thì đương nhiên sẽ có unshift()

const numbers = [1, 2, 3, 4, 5];
let copy = [];
copy.unshift(...numbers);

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

8. Sử dụng array constructor kết hợp spread operator

Con hàng ... này đúng là lợi hại, chỗ nào cũng thấy mặt

const numbers = [1, 2, 3, 4, 5];
const copy = new Array(...numbers);

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

9. Sử dụng destructuring

Ngoài spread operator thì trong ES6 cũng giới thiệu thêm destructuring, sử dụng nó để copy array như sau

const numbers = [1, 2, 3, 4, 5];
const [...copy] = numbers;

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

10. Sử dụng Array.concat()

Cũng giống như slice() việc bạn không truyền đối số vào concat() sẽ giúp trả về array mới chính là array ban đầu

const numbers = [1, 2, 3, 4, 5];
const copy = numbers.concat();

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

11. Sử dụng Array.forEach() kết hợp Array.push()

const numbers = [1, 2, 3, 4, 5];
let copy = [];

// ES5
numbers.forEach(function(value) {
  copy.push(value);
});

// ES6
// numbers.forEach(value => copy.push(value));

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

12. Sử dụng vòng lặp for truyền thống

const numbers = [1, 2, 3, 4, 5];
let copy = [];
for (let i = 0; i < numbers.length; i++) {
  copy.push(numbers[i]);
}

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

13. Sử dụng Array.reduce()

Tạo một biến tích luỹ là 1 array rỗng sau đó push dần các phần tử vào sẽ giúp ta copy được array

const numbers = [1, 2, 3, 4, 5];
const copy = numbers.reduce((arr, item) => {
  arr.push(item);
  return arr;
}, []);

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]

14. Sử dụng phương thức apply

const numbers = [1, 2, 3, 4, 5];
let copy = [];
Array.prototype.push.apply(copy, numbers);

console.log(copy);    // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5] 

Kết luận

Trên đây mình đã giới thiệu 14 cách để clone 1 array, hi vọng sẽ giúp ích cho các bạn khi gặp bài toán phải clone array thành nhiều array khác để xử lý

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công !

Hẹn gặp lại ở các bài viết sau !