"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Establecer vs matriz en JavaScript: ¿Cuándo usar cuál?

Establecer vs matriz en JavaScript: ¿Cuándo usar cuál?

Publicado el 2025-02-19
Navegar:596

Set vs Array in JavaScript: When to Use Which?

JavaScript proporciona dos poderosas estructuras de datos para almacenar conjuntos: set y array . Si bien ambos pueden almacenar múltiples valores, sus características únicas los hacen más adecuados para diferentes escenarios. Exploremos cuándo y por qué se elige uno sobre el otro.

  1. el valor único por defecto

La característica más prominente de

set es su procesamiento 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]
    Elemento verifique el rendimiento
set

proporciona tiempos de búsqueda más rápidos para verificar si existe un elemento.

const Largearray = array.from ({longitud: 1000000}, (_, i) => i); const largeset = nuevo conjunto (LargearRay); // búsqueda de matriz console.time ('matriz incluye'); console.log (Largearray.Includes (999999)); console.timeend ('matriz incluye'); // Establecer búsqueda console.time ('set ha'); console.log (Largeset.has (999999)); console.timeend ('set ha'); // set es obviamente más rápido porque usa tablas 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 y operaciones disponibles
array

proporciona más métodos incorporados para la manipulación de datos, mientras que set se enfoca en la gestión de singularidad.

// método de matriz const arr = [1, 2, 3, 4, 5]; arr.push (6); arr.pop (); arr.unshift (0); arr.hift (); arr.splice (2, 1, 'nuevo'); arr.slice (1, 3); arr.map (x => x * 2); arr.filter (x => x> 2); arr.reduce ((a, b) => a b); // Establecer método const set = new Set ([1, 2, 3, 4, 5]); set.add (6); set.delete (6); set.has (5); set.clar (); // Eliminar todos los valores
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 明显更快,因为它内部使用哈希表
    secuencia e índice de acceso
array

mantiene el orden de inserción y proporciona acceso basado en índices, mientras que set solo mantiene el orden de inserción.

// Acceso de índice de matriz const arr = ['a', 'b', 'c']; console.log (arr [0]); console.log (arr [1]); arr [1] = 'x'; // set no tiene acceso índice const set = new Set (['A', 'B', 'C']); console.log ([... set] [0]); // La modificación directa del índice
// 数组索引访问
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]); // 需要先转换为数组
// 不允许直接修改索引
    Uso de memoria
set

generalmente usa más memoria que array , pero proporciona búsquedas más rápidas.

// comparación de memoria (ejemplo aproximado) const números = array.from ({longitud: 1000}, (_, i) => i); // memoria de matriz const arr = [... números]; console.log (Process.MemoryUsage (). HeapUsed); // Establecer memoria const set = new Set (números); console.log (Process.MemoryUsage (). HeapUsed); // Debido a la estructura de la tabla hash, el conjunto generalmente usa más memoria
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 明显更快,因为它内部使用哈希表
    casos usados ​​frecuentemente
  1. cuando use la matriz:

// 1. Cuando el acceso al pedido y el índice son importantes const playlist = ['Song1.mp3', 'Song2.mp3', 'Song3.mp3']; const centreTrack = PlayList [CurrentIndex]; // 2. Cuando necesite el método de matriz Const números = [1, 2, 3, 4, 5]; const dupluce = números.map (x => x * 2); const sum = números.reduce ((a, b) => a b, 0); // 3. Cuando los valores repetidos son aceptables o requeridos const votes = ['sí', 'no', 'sí', 'sí', 'sí', 'no']; const YesVotes = votes.filter (vote => vote === 'sí'). Longitud;
// 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. Al rastrear valores únicos const UniqueVisitors = new Set (); function logvisitor (userId) { UniqueVisitors.Add (UserId); console.log (`Visitantes únicos totales: $ {uniqueVisitors.size}`); } // 2. Utilizado para operaciones de búsqueda rápida const permitidos = new set (['user1', 'user2', 'user3']); function checkAccess (userId) { return permitedUsers.has (UserId); } // 3. Se usa para eliminar los duplicados función getuniquehashtags (publicaciones) { const uniquetags = new Set (); posts.forEach (post => { post.hashtags.foreach (tag => uniquetags.add (tag)); }); regresar [... 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];
}

puede convertir fácilmente entre

set

y array según sea necesario.

// Array para configurar const arr = [1, 2, 2, 3, 3, 4]; const set = new Set (arr); // Establecer en la matriz - Tres métodos const back1 = [... set]; const back2 = array.from (set); const back3 = array.from (set.values ​​()); // utilizado para la deduplicación de la matriz const dedicado = [... nuevo 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)];

select

array

cuando necesita lo siguiente:

acceso basado en índice
  • extensos métodos de matriz (mapear, reducir, filtrar, etc.)
  • Repetir valor
  • Eficiencia de memoria
  • modelo iterativo tradicional
  • set
cuando necesita las siguientes situaciones:

solo valor único

    Operación de búsqueda rápida
  • simple agregar/eliminar operación
  • Mantenga la lista de elementos únicos
  • Deduplicación rápida
  • Recuerde que puede convertir entre los dos tipos en cualquier momento, así que elija el que mejor se adapte a sus necesidades actuales.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3