Giới thiệu
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.
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]
Tổng kết
Đây là 14 cách để copy mảng mà không ảnh hưởng mảng bạn đầu, dù cách nào đi nữa cũng hiểu rõ bản chất của mảng để sáng tạo thêm nhé. Hy vọng bài viết này sẽ hữu ích cho cách bạn!
