Sangat mudah, bukan?
1. Menggunakan perulangan for/while
Cara paling sederhana adalah membuat larik kosong baru dan menggunakan loop untuk mendorong setiap elemen dari larik lama ke larik baru
function copyWithLoop(array) { const newArray = []; for (let item of array) { newArray.push(item); } return newArray; } const array = [1,2,3]; const newArray = copyWithLoop(array); console.log(newArray); // [1,2,3];
2. Menggunakan metode newArray.push(4); newArray[0] = 0; console.log(array); // [1,2,3] console.log(newArray); // [0,2,3,4] _0
Menurut dokumen web MDN
Metode slice() mengembalikan salinan dangkal dari sebagian array ke dalam objek array baru yang dipilih dari awal hingga akhir (akhir tidak termasuk) di mana awal dan akhir mewakili indeks item dalam array tersebut. Array asli tidak akan dimodifikasi
OMG 😱 Persis seperti yang kami cari. Mari kita coba
function copyWithSlice(array) { return array.slice(); } const array = [1,2,3]; const newArray = copyWithSlice(array); console.log(newArray); // [1,2,3];
3. Menggunakan metode newArray.push(4); newArray[0] = 0; console.log(array); // [1,2,3] console.log(newArray); // [0,2,3,4] _1
Menurut dokumen web MDN
Objek. metodeassign() menyalin semua properti enumerable sendiri dari satu atau lebih objek sumber ke objek target. Ini mengembalikan objek target
Jadi, jika itu bekerja dengan Object, itu juga harus bekerja dengan Array, bukan?
function copyWithAssign(array) { return Object.assign([], array); } const array = [1,2,3]; const newArray = copyWithAssign(array); console.log(newArray); // [1,2,3]; _
Dan ya, itu juga berhasil 😱😱. Bagaimana kita bisa melakukannya dengan lebih baik?
3. Gunakan Operator Penyebaran ES2015
Spread Operator diperkenalkan di ES2015 dan memungkinkan elemen iterable (seperti array atau objek) untuk "diperluas" di tempat-tempat di mana nol atau lebih argumen diharapkan
function copyWithSpread(array) { return [...array]; } const array = [1,2,3]; const newArray = copyWithSpread(array); console.log(newArray); // [1,2,3];
Dan coba tebak?
Semua solusi terlihat bagus tetapi hanya untuk memastikan, mari kita tulis beberapa tes menggunakan Jest
import { copyWithLoop, copyWithSlice, copyWithAssign, copyWithSpread } from "./lib"; describe("copyWithLoop", function() { test("Testing an empty array", function() { const array = []; const newArray = copyWithLoop(array); newArray.push(0); expect(newArray).not.toEqual(array); }); test("Testing a populated array", function() { const array = [1, 2, 3]; const newArray = copyWithLoop(array); newArray.push(0); newArray[0] = -1; expect(newArray).not.toEqual(array); }); }); describe("copyWithSlice", function() { test("Testing an empty array", function() { const array = []; const newArray = copyWithSlice(array); newArray.push(0); expect(newArray).not.toEqual(array); }); test("Testing a populated array", function() { const array = [1, 2, 3]; const newArray = copyWithSlice(array); newArray.push(0); newArray[0] = -1; expect(newArray).not.toEqual(array); }); }); describe("copyWithAssign", function() { test("Testing an empty array", function() { const array = []; const newArray = copyWithAssign(array); newArray.push(0); expect(newArray).not.toEqual(array); }); test("Testing a populated array", function() { const array = [1, 2, 3]; const newArray = copyWithAssign(array); newArray.push(0); newArray[0] = -1; expect(newArray).not.toEqual(array); }); }); describe("copyWithSpread", function() { test("Testing an empty array", function() { const array = []; const newArray = copyWithSpread(array); newArray.push(0); expect(newArray).not.toEqual(array); }); test("Testing a populated array", function() { const array = [1, 2, 3]; const newArray = copyWithSpread(array); newArray.push(0); newArray[0] = -1; expect(newArray).not.toEqual(array); }); }); _
Dan hasilnya adalah
Semua tes lulus 😁. tapi tunggu. Saya tidak menguji Objek tetapi meh, itu harus sama 🙄
import { copyWithLoop, copyWithSlice, copyWithAssign, copyWithSpread } from "./lib"; describe("copyWithLoop", function() { // Testing an empty array still passes :) test("Testing a populated array", function() { const array = [{ a: 0 }, { b: 1 }, { c: 2 }]; const newArray = copyWithLoop(array); newArray[0].a = -1; expect(newArray).not.toEqual(array); }); }); describe("copyWithSlice", function() { // Testing an empty array still passes :) test("Testing a populated array", function() { const array = [{ a: 0 }, { b: 1 }, { c: 2 }]; const newArray = copyWithSlice(array); newArray[0].a = -1; expect(newArray).not.toEqual(array); }); }); describe("copyWithAssign", function() { // Testing an empty array still passes :) test("Testing a populated array", function() { const array = [{ a: 0 }, { b: 1 }, { c: 2 }]; const newArray = copyWithAssign(array); newArray[0].a = -1; expect(newArray).not.toEqual(array); }); }); describe("copyWithSpread", function() { // Testing an empty array still passes :) test("Testing a populated array", function() { const array = [{ a: 0 }, { b: 1 }, { c: 2 }]; const newArray = copyWithSpread(array); newArray[0].a = -1; expect(newArray).not.toEqual(array); }); });
Dan hasil yang jelas adalah 🙄
Apa?. Bagaimana?. 🤯
Nah, solusinya benar-benar membuat Array baru (itulah sebabnya tes array kosong lulus) tetapi kedua array berbagi referensi objek yang sama 🤯
Setelah beberapa penelitian saya menemukan solusinya dan. mengubah array menjadi string dan mengubahnya kembali menjadi array
Yap, Anda membacanya dengan benar, sejauh ini ini adalah solusi terbaik saat ini. Mari kita lihat apakah itu benar-benar berfungsi