Apa yang mengkloning array dalam javascript?

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

Apa itu array kloning?

Bagaimana cara mengkloning array dalam JavaScript?

Bagaimana Anda mengkloning array?

Apa perbedaan antara salinan array dan klon array?