"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Definir Vs Array em JavaScript: Quando usar qual?

Definir Vs Array em JavaScript: Quando usar qual?

Postado em 2025-02-19
Navegar:929

Set vs Array in JavaScript: When to Use Which?

javascript fornece duas estruturas de dados poderosas para armazenar conjuntos: set e Array . Embora ambos possam armazenar vários valores, seus recursos exclusivos os tornam mais adequados para diferentes cenários. Vamos explorar quando e por que um é escolhido sobre o outro.

  1. o valor exclusivo por padrão

O recurso mais proeminente de

set é o seu processamento automático de duplicados.

// 数组允许重复
const arr = [1, 2, 2, 3, 3, 4];
console.log(arr); // [1, 2, 2, 3, 3, 4]

// Set 自动删除重复项
const set = new Set([1, 2, 2, 3, 3, 4]);
console.log([...set]); // [1, 2, 3, 4]

// 使用 Set 从数组中删除重复项
const uniqueArray = [...new Set(arr)];
console.log(uniqueArray); // [1, 2, 3, 4]
    Verifique o desempenho
set

fornece tempos de pesquisa mais rápidos para verificar se existe um elemento.

const largeset = new Set (largearray); // Pesquisa de matriz console.Time ('Array inclui'); console.log (largearray.includes (999999)); console.TimeEnd ('Array inclui'); // Defina pesquisa console.Time ('set tem'); console.log (largeset.has (999999)); console.TimeEnd ('set tem'); // o conjunto é obviamente mais rápido porque usa tabelas de hash internamente
const largeArray = Array.from({ length: 1000000 }, (_, i) => i);
const largeSet = new Set(largeArray);

// 数组查找
console.time('Array includes');
console.log(largeArray.includes(999999));
console.timeEnd('Array includes');

// Set 查找
console.time('Set has');
console.log(largeSet.has(999999));
console.timeEnd('Set has');

// Set 明显更快,因为它内部使用哈希表
    métodos e operações disponíveis
Array

fornece mais métodos internos para manipulação de dados, enquanto set se concentra no gerenciamento de exclusividade.

// Método da matriz const arr = [1, 2, 3, 4, 5]; Arr.push (6); Arr.pop (); arr.unshift (0); arr.shift (); Arr.splice (2, 1, 'novo'); Arr.slice (1, 3); Arr.map (x => x * 2); Arr.Filter (x => x> 2); arr.Reduce ((a, b) => a b); // Método definido const set = new Set ([1, 2, 3, 4, 5]); set.add (6); set.Delete (6); set.has (5); set.clear ();
// 数组方法
const arr = [1, 2, 3, 4, 5];
arr.push(6);                    // 添加到末尾
arr.pop();                      // 从末尾移除
arr.unshift(0);                 // 添加到开头
arr.shift();                    // 从开头移除
arr.splice(2, 1, 'new');       // 替换元素
arr.slice(1, 3);               // 提取部分
arr.map(x => x * 2);           // 转换元素
arr.filter(x => x > 2);        // 过滤元素
arr.reduce((a, b) => a   b);   // 归约为单个值

// Set 方法
const set = new Set([1, 2, 3, 4, 5]);
set.add(6);                    // 添加值
set.delete(6);                 // 删除值
set.has(5);                    // 检查是否存在
set.clear();                   // 删除所有值
  1. Array
  2. mantém a ordem de inserção e fornece acesso baseado em índice, enquanto
set

mantém apenas o pedido de inserção. // Acesso ao índice de matriz const arr = ['a', 'b', 'c']; console.log (arr [0]); console.log (arr [1]); arr [1] = 'x'; // SET não tem acesso ao índice const set = new Set (['A', 'B', 'C']); console.log ([... set] [0]); // A modificação direta do índice

não é permitida
// 数组索引访问
const arr = ['a', 'b', 'c'];
console.log(arr[0]);      // 'a'
console.log(arr[1]);      // 'b'
arr[1] = 'x';            // 直接修改

// Set 没有索引访问
const set = new Set(['a', 'b', 'c']);
console.log([...set][0]); // 需要先转换为数组
// 不允许直接修改索引
  1. set
  2. geralmente usa mais memória do que
Array

, mas fornece pesquisas mais rápidas. // Comparação de memória (exemplo aproximado) const números = array.from ({comprimento: 1000}, (_, i) => i); // Memória de matriz const arr = [... números]; console.log (process.memoryusage (). // Defina memória const set = new Set (números); console.log (process.memoryusage (). // Devido à estrutura da tabela de hash, o conjunto geralmente usa mais memória

// 内存比较(粗略示例)
const numbers = Array.from({ length: 1000 }, (_, i) => i);

// 数组内存
const arr = [...numbers];
console.log(process.memoryUsage().heapUsed);

// Set 内存
const set = new Set(numbers);
console.log(process.memoryUsage().heapUsed);
// 由于哈希表结构,Set 通常使用更多内存
  1. Quando usar a Array:

// 1. Quando o pedido e o acesso do índice são importantes const playlist = ['Song1.mp3', 'Song2.mp3', 'Song3.mp3']; const currentTrack = playlist [currentIndex]; // 2. Quando você precisa do método de matriz const números = [1, 2, 3, 4, 5]; const dobrou = números.map (x => x * 2); const sum = números.Reduce ((a, b) => a b, 0); // 3. Quando valores repetidos são aceitáveis ​​ou necessários const votos = ['sim', 'não', 'sim', 'sim', 'sim', 'não']; const simVotes = Votes.Filter (Vote => Vote === 'Sim'). Length;

// 1. 当顺序和索引访问很重要时
const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
const currentTrack = playlist[currentIndex];

// 2. 当您需要数组方法时
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
const sum = numbers.reduce((a, b) => a   b, 0);

// 3. 当重复值可以接受或需要时
const votes = ['yes', 'no', 'yes', 'yes', 'no'];
const yesVotes = votes.filter(vote => vote === 'yes').length;
// 1. Ao rastrear valores únicos const uncelVisitors = new Set (); Função Logvisitor (UserID) { exclusivoVisitors.add (UserID); console.log (`Total de visitantes exclusivos: $ {exclusivoVisitors.size}`); } // 2. Usado para operações de pesquisa rápida const permitidos = novo set (['user1', 'user2', 'user3']); Função CheckAccess (UserID) { return alpedemusers.has (userID); } // 3. Usado para excluir duplicatas função getuniquehashtags (postagens) { const UniqueTags = new Set (); posts.foreach (post => { post.hashtags.foreach (tag => uniquetags.add (tag)); }); retornar [... uniquetags]; }

// 1. 当跟踪唯一值时
const uniqueVisitors = new Set();
function logVisitor(userId) {
    uniqueVisitors.add(userId);
    console.log(`Total unique visitors: ${uniqueVisitors.size}`);
}

// 2. 用于快速查找操作
const allowedUsers = new Set(['user1', 'user2', 'user3']);
function checkAccess(userId) {
    return allowedUsers.has(userId);
}

// 3. 用于删除重复项
function getUniqueHashtags(posts) {
    const uniqueTags = new Set();
    posts.forEach(post => {
        post.hashtags.forEach(tag => uniqueTags.add(tag));
    });
    return [...uniqueTags];
}
set

e

Array

conforme necessário. // Array para definir const arr = [1, 2, 2, 3, 3, 4]; const set = new Set (arr); // definido para a matriz - três métodos const back1 = [... set]; const back2 = array.From (set); const back3 = array.from (set.values ​​()); // usado para desduplicação de matrizes const dedicated = [... novo set (arr)];

// 数组到 Set
const arr = [1, 2, 2, 3, 3, 4];
const set = new Set(arr);

// Set 到数组 - 三种方法
const back1 = [...set];
const back2 = Array.from(set);
const back3 = Array.from(set.values());

// 用于数组去重
const deduped = [...new Set(arr)];
Array

quando você precisar do seguinte:

acesso baseado em índice

métodos de matriz extensos (mapear, reduzir, filtrar, etc.)
  • Repita o valor
  • eficiência da memória
  • Modelo Iterativo Tradicional
  • set
  • quando você precisa das seguintes situações:

apenas valor exclusivo Operação de pesquisa rápida

    Operação ADD/DELETE SIMPLES
  • Mantenha a lista de itens exclusivos
  • Deduplicação rápida
  • Lembre -se de que você pode converter entre os dois tipos a qualquer momento, então escolha o que melhor atende às suas necessidades atuais.
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3