«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Установите vs массив в JavaScript: когда использовать что?

Установите vs массив в JavaScript: когда использовать что?

Опубликовано в 2025-02-19
Просматривать:825

Set vs Array in JavaScript: When to Use Which?

Javascript предоставляет две мощные структуры данных для хранения наборов: set и array . В то время как оба могут хранить несколько значений, их уникальные функции делают их более подходящими для разных сценариев. Давайте рассмотрим, когда и почему один выбирается над другим.

]
    ]
  1. ]

    уникальное значение по умолчанию

    ]
  2. ]
] Наиболее выдающейся функцией

set является его автоматическая обработка дубликатов.

]
// 数组允许重复
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]
]
    element проверяйте производительность
  1. ]

    ]

    ]
set

обеспечивает более быстрое время поиска, чтобы проверить, существует ли элемент. ]

const largearray = array.from ({length: 1000000}, (_, i) => i); const largeset = новый набор (argearray); // Поиск массива console.time ('array include'); console.log (largearray.includes (999999)); Console.TimeEnd ('Array включить'); // Установить поиск console.time ('set имеет'); console.log (largeset.has (999999)); console.timeend ('set имеет'); // set, очевидно, быстрее, потому что он использует хэш -таблицы внутри
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 明显更快,因为它内部使用哈希表
]
    доступные методы и операции
  1. ]

    ]
array

предоставляет более встроенные методы для манипулирования данными, в то время как set фокусируется на управлении уникальностью. ]

// Метод массива 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); // установить метод const 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. поддерживает порядок внедрения и предоставляет доступ на основе индекса, в то время как
set

только сохраняет порядок введения. ] // Индекс массива const arr = ['a', 'b', 'c']; console.log (arr [0]); console.log (arr [1]); arr [1] = 'x'; // Модифицируется напрямую // set не имеет индексного доступа const set = new Set (['a', 'b', 'c']); console.log ([... set] [0]); // Прямая модификация индекса ]

не допускается
// 数组索引访问
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. обычно использует больше памяти, чем
array

, но обеспечивает более быстрые поиски. ] // Сравнение памяти (грубый пример) const number = array.from ({длина: 1000}, (_, i) => i); // память массива const arr = [... числа]; console.log (process.memoryusage (). Hepused); // Установить память const set = new Set (numbers); console.log (process.memoryusage (). Hepused); // Из -за структуры хэш -таблицы, установленная обычно использует больше памяти

]
// 内存比较(粗略示例)
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. ]

    , когда использовать массив:

    ]
// 1. Когда важен доступ к заказу и индексу const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3']; const currenttrack = playlist [currentIndex]; // 2. Когда вам нужен метод массива const numbers = [1, 2, 3, 4, 5]; const Double = number.map (x => x * 2); const sum = numbers.reduce ((a, b) => a b, 0); // 3. Когда повторяющиеся значения приемлемы или требуются const hotos = ['yes', 'no', 'да', 'да', 'да', 'нет']; const yesvotes = hotes.filter (hot => hoge === 'yes').

, когда использовать Set:

// 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;

конвертировать между Set и Array

]
// 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];
}
array

по мере необходимости.

]

// массив для установки const arr = [1, 2, 2, 3, 3, 4]; const set = new Set (arr); // установить на массив - три метода const Back1 = [... set]; const Back2 = Array.from (set); const back3 = array.from (set.values ​​()); // используется для дедупликации массива const jeficated = [... new 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)];

]

Access на основе индекса

] обширные методы массива (карта, уменьшение, фильтр и т. Д.) ]

repeat value
    ]
  • эффективность памяти
  • ]
  • традиционная итеративная модель
  • ]
  • ]
  • set
  • , когда вам нужны следующие ситуации:
  • ]
  • ]
  • только уникальное значение
]

Quick Search Operation ] простой операция добавления/удаления

]
    сохранить список уникальных элементов
  • ]
  • Quick Deduplication
  • ]
  • помните, что вы можете конвертировать между двумя типами в любое время, поэтому выберите тот, который лучше всего соответствует вашим текущим потребностям.
  • ]
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3