1

Gostaria clonar uma lista de números e poder manipular essa lista clonada sem fazer alteração na origem, mas na seguinte situação quando eu apago o item do array clonado ele apaga a origem.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <h3>Lista Origem</h3>
      <li v-for="item in listaOriginal">
        {{item}}
      </li>
    </ul>

    <ul>
      <h3>Lista Clone</h3>
      <li v-for="item in listaClone">
        {{item}}
      </li>
    </ul>

    <button @click="clonaLista">Clonar Lista</button>
    <button @click="removerItem">Remover item do Clone</button>
  </div>

  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        listaOriginal: [1, 2, 3],
        listaClone: []
      },

      methods: {
        clonaLista() {
          this.listaClone = this.listaOriginal
        },

        removerItem() {
          this.listaClone.pop()
        }
      }
    })
  </script>
</body>

</html>

3 Respostas 3

1

Rodolfo isto ocorre porque o Array é um tipo referenciado (reference type). Quando você diz que listaClone = listaOriginal ambas variáveis apontam para o mesmo array. Para resolver utilize um o spread para clonar efetivamente:

this.listaClone = [...this.listaOriginal];
1

Há várias maneiras de copiar um array, mas você precisa saber se você quer uma cópia rasa (shallow copy) ou uma cópia profunda (deep copy) 1.

Se você está apenas trabalhando com tipos primitivos como Number, String ou Boolean não vai fazer diferença você usar uma cópia rasa ou profunda. A partir do momento que seu array contém outros arrays ou objetos, você vai estar trabalhando com referências, se você apenas copiar essas referências você estará fazendo uma cópia rasa, porém se você fizer uma cópias do objeto para o novo array, você estará fazendo uma cópia profunda.

let array = [1, 2, 3, 4];
let copia = array;  // cópia da referência

copia.push(5);

// Como `array` e `copia` referenciam o mesmo
// objeto em memória, alterações feitas em 
// ambos inferem no mesmo objeto
console.log(array);
// [1, 2, 3, 4, 5]


Alguns métodos para criar cópias razas (Shallow Copy)

  1. Array.slice (#docs & compatibilidade)

    David Walsh postou neste artigo uma maneira de fazer uma cópia rasa usando o método Array.slice. A grande vantagem deste método é sua compatibilidade com navegadores antigos.

    let array = [1, 2, 3];
    let copia = array.slice(0);
    
    copia.push(4);
    
    console.log(array);  // [1, 2, 3]
    console.log(copia);  // [1, 2, 3, 4]
    
  2. Spread operator (#docs & compatibilidade)

    let array = [1, 2, 3];
    let copia = [...array];
    
  3. For loop

    let array = [1, 2, 3];
    let copia = [];
    
    for (let i=0, l=array.length ; i<l ; i++) {
        copia.push(array[i]);
    }
    
  4. Array.map (#docs & compatibilidade)

    let array = [1, 2, 3];
    let copia = array.map(x => x);
    

Métodos para criar cópias profundas (Deep copy)

  1. JSON.stringify e JSON.parse (compatibilidade)

    Você pode usar JSON.stringify e JSON.parse para criar cópias profundas de objetos.

    let array = [[1], [2], [3]];
    let copia = JSON.parse(JSON.stringify(array));
    
    copia[0].push(1.5);
    
    console.log(array); // [[1], [2], [3]]
    console.log(copia); // [[1, 1.5], [2], [3]]
    
  2. _.cloneDeep (#docs)

    Se você estiver utilizando a biblioteca lodash, você pode usar a função _.cloneDeep.

    let array = [[1], [2], [3]];
    let copia = _.cloneDeep(array);
    
    copia[0].push(1.5);
    
    console.log(array); // [[1], [2], [3]]
    console.log(copia); // [[1, 1.5], [2], [3]]
    

Este artigo menciona alguns outros métodos que você pode usar para criar cópias rasas.

0

Você pode obter uma cópia do array fazendo assim:

let array = [1, 2, 3];
let copy  = array.slice()

Da forma que você fez não estava copiando o array, mas referenciando o mesmo. :)

1
  • Essa maneira já foi mencionada na minha resposta. O que ela faz de diferente do que eu mencionei? 12/11/2019 às 22:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .