Uma cópia superficial de um array é um novo array que possui os mesmos itens do original. Se o array contém apenas valores primitivos como números ou strings, o novo array é completamente separado. Mas se o array contém outros arrays dentro dele, tanto o original quanto a cópia têm referências para os mesmos arrays internos. Isso significa que se você alterar algo dentro de um array interno compartilhado, verá essa alteração em ambos os arrays. Cópias superficiais são úteis quando você precisa modificar a estrutura de nível superior, como adicionar, remover ou reordenar elementos, sem modificar o array original ou o array interno. Existem vários métodos para criar cópias rasas de arrays e vamos explorar alguns dos mais comuns: concat(), slice() e o operador spread. Vamos começar com o método concat(). Este método cria um novo array mesclando dois ou mais arrays. Quando usado com um único array, ele cria efetivamente uma cópia superficial. Aqui está um exemplo:

const originalArray = [1, 2, 3];
const copyArray = [].concat(originalArray);

console.log(copyArray); // [1, 2, 3]
console.log(copyArray === originalArray); // false

Neste exemplo, estamos usando o método concat() para concatenar um array vazio ao originalArray. Isto criará um novo array que é uma cópia superficial de originalArray. O copyArray contém os mesmos elementos que o originalArray, mas é um objeto de array diferente, por isso a verificação de igualdade estrita (===) retorna false. Outro método para criar uma cópia superficial é o método slice(). Quando chamado sem argumentos, slice() retorna uma cópia superficial de todo o array. Aqui está como funciona:

const originalArray = [1, 2, 3];
const copyArray = originalArray.slice();

console.log(copyArray); // [1, 2, 3]
console.log(copyArray === originalArray); // false

Neste caso, originalArray.slice() cria um novo array que é uma cópia superficial de originalArray. Novamente, o copyArray contém os mesmos elementos mas é um objeto de array diferente. O operador spread (...), introduzido no ES6, oferece outra forma concisa de criar cópias superficiais de arrays. Aqui está um exemplo:

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

console.log(copyArray); // [1, 2, 3]
console.log(copyArray === originalArray); // false

O operador spread (...) espalha os elementos de originalArray em um novo array, criando efetivamente uma cópia superficial. É importante notar que todos esses métodos criam novos objetos de array, o que significa que você pode modificar a cópia sem afetar o array original. Por exemplo:

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

copyArray.push(4);
console.log(originalArray); // [1, 2, 3]
console.log(copyArray);     // [1, 2, 3, 4]

Neste exemplo, adicionar um elemento a copyArray não afeta originalArray. Em resumo, cópias rasas de arrays podem ser facilmente criadas usando métodos como concat(), slice() ou o operador spread. Esses métodos são úteis para criar novos arrays que podem ser manipulados independentemente do array original.