Nội dung bài viết

Video học lập trình mỗi ngày

Làm việc với array trong javascript không tránh khỏi những lúc chúng ta phải clone array hay copy array trong code của mỗi lập trình viên javascript. Để sao chép một mảng không phải là khó nhưng việc copy một array gây ra nhiều lỗi nhất, vì nó liên quan đến việc tham chiếu tới array gốc.

Chính vì thế việc clone array được liệt kê vào những công việc hay gây hiểu nhầm nhiều nhất. Điều này không phải là do những method của javascript, mà là do thiếu kiến thức về cách xử lý mảng và các thành phần của chúng. Chính vì vậy có nhiều bài viết giúp chúng ta hiểu được Sự khác nhau giữa Shallow copying và Deep copying trong javascript.

Nếu bạn là một trong những lập trình viên hay gặp những trường hợp trên thì vui lòng đọc thêm bài viết về "Deep copy Object, Array, Function Javascript". Vì ở đây tôi sẽ không dành thời gian cho việc giải thích vì sao khi copy array sẽ hiểu lầm. Mà sẽ dành thời gian cho việc giúp bạn làm thế nào để copy array nhanh nhất với 14 cách.

Tiếp theo, chúng ta hãy xem một số phương pháp và kỹ thuật thú vị để copy và clone một Array trong javascript. Có thể bạn chưa biết "Những method cần biết về array javascript"

Array.slice

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

const copy = numbers.slice()
copy.push(6) // add thêm một item xem mảng cũ nó thay đổi không

console.log(copy)
console.log(numbers)

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.map

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

const copy = numbers.map( num => num )
copy.push(6) // add thêm một item xem mảng cũ nó thay đổi không

console.log(copy);
console.log(numbers);

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.from

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

const copy = Array.from(new Set(numbers));
copy.push(6); 

console.log(copy);
console.log(numbers);

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Spread Operator

Một tính năng mà tôi nghĩ các bạn mới lập trình sẽ có thể không biết, nếu đó là sự thật thì đây là một món quà cho bạn. 5 cách sử dụng Spread Operator trong javascript

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

const copy = [...numbers];
copy.push(6); 

console.log(copy);
console.log(numbers);


// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.of

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

const copy = Array.of(...numbers);
copy.push(6); 

console.log(copy);
console.log(numbers);


// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

# Xem thêm sử dụng về Array.of()

console.log(Array.of(7));       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

console.log(Array(7));          // [ , , , , , , ]
console.log(Array(1, 2, 3));    // [1, 2, 3]

Sử dụng new Array và Spread Operator

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

const copy = new Array(...numbers);
copy.push(6); 

console.log(copy);
console.log(numbers);

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Destructuring

Thêm một cách nữa đó là sử dụng Destructuring, một trong những phương pháp nên học khi lập trình javascript. Nếu có điều kiện thì nên đọc thêm về "Destructuring Javascript là gì?"

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

const [...copy] = numbers;
copy.push(6); 

console.log(copy);
console.log(numbers);

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.concat

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

const copy = numbers.concat();
copy.push(6); 

console.log(copy);
console.log(numbers);

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.push vs Spread Operator

Tips: Spread Operator for Objects

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

let copy = [];
copy.push(...numbers);
copy.push(6); //

console.log(copy);
console.log(numbers);

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.unshift vs Spread Operator

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

let copy = [];
copy.unshift(...numbers);
copy.push(6); // 

console.log(copy);
console.log(numbers);


// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.forEach

Tips: Những trường hợp không nên dùng forEach trong javascript

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

let copy = [];
numbers.forEach((value) => copy.push(value));
copy.push(6); //

console.log(copy);
console.log(numbers);

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

for Sử dụng for là một cách truyền thống, dể hiểu. Tips: Sự khác biệt giữa for...in, for...of and forEach trong javascript

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

let copy = [];
for (let i = 0; i < numbers.length; i++) {
    copy.push(numbers[i]);
}
copy.push(6); 

console.log(copy);
console.log(numbers);


// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.reduce Array.reduce là một trong những method trong Array được sử dụng nhiều và cũng gây khó hiểu nhiều chính vì điều đó chúng tôi có một tips về cách sử dụng Array.reduce trong javascript. Javascript reduce nâng cao

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

const copy = numbers.reduce((acc, x) => { acc.push(x); return acc; }, []);
copy.push(6); 

console.log(copy);
console.log(numbers);

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

apply

Đây là một trong những phương pháp cũ, nhưng cho đến giờ apply() vẫn còn được sử dụng rỗng rãi, vì sao ư? Vì Trường hợp nào nên sử dụng call(), apply() và bind() trong javascript

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

let copy = [];
Array.prototype.push.apply(copy, numbers);
copy.push(6); 

console.log(copy);
console.log(numbers);

// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Tham khảo tại: https://twitter.com/protic_milos

14 cách copy array trong javascript