javascript 提供了两种强大的数据结构来存储集合：set 和 array。虽然两者都可以存储多个值，但它们独特的特性使它们更适合不同的场景。让我们探讨一下您何时以及为何会选择其中之一。
1. 默认的唯一值
set 最显着的特点是它自动处理重复项。
// arrays allow duplicatesconst arr = [1, 2, 2, 3, 3, 4];console.log(arr); // [1, 2, 2, 3, 3, 4]// sets automatically remove duplicatesconst set = new set([1, 2, 2, 3, 3, 4]);console.log([...set]); // [1, 2, 3, 4]// removing duplicates from an array using setconst uniquearray = [...new set(arr)];console.log(uniquearray); // [1, 2, 3, 4]
2. 元素检查性能
set 提供更快的查找时间来检查元素是否存在。
const largearray = array.from({ length: 1000000 }, (_, i) => i);const largeset = new set(largearray);// array lookupconsole.time('array includes');console.log(largearray.includes(999999));console.timeend('array includes');// set lookupconsole.time('set has');console.log(largeset.has(999999));console.timeend('set has');// set is significantly faster because it uses hash table internally
3. 可用方法和操作
数组提供了更多内置的数据操作方法，而集合则专注于唯一性管理。
// array methodsconst arr = [1, 2, 3, 4, 5];arr.push(6); // add to endarr.pop(); // remove from endarr.unshift(0); // add to beginningarr.shift(); // remove from beginningarr.splice(2, 1, 'new'); // replace elementsarr.slice(1, 3); // extract portionarr.map(x => x * 2); // transform elementsarr.filter(x => x > 2); // filter elementsarr.reduce((a, b) => a + b); // reduce to single value// set methodsconst set = new set([1, 2, 3, 4, 5]);set.add(6); // add valueset.delete(6); // remove valueset.has(5); // check existenceset.clear(); // remove all values
4. 订单和索引访问
数组维护插入顺序并提供基于索引的访问，而集合仅维护插入顺序。
// array index accessconst arr = ['a', 'b', 'c'];console.log(arr[0]); // 'a'console.log(arr[1]); // 'b'arr[1] = 'x'; // direct modification// set has no index accessconst set = new set(['a', 'b', 'c']);console.log([...set][0]); // need to convert to array first// no direct index modification possible
5. 内存使用
集合通常比数组使用更多的内存，但提供更快的查找速度。
// memory comparison (rough example)const numbers = array.from({ length: 1000 }, (_, i) => i);// array memoryconst arr = [...numbers];console.log(process.memoryusage().heapused);// set memoryconst set = new set(numbers);console.log(process.memoryusage().heapused);// set typically uses more memory due to hash table structure
6. 常见用例
何时使用数组：
// 1. when order and index access mattersconst playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3'];const currenttrack = playlist[currentindex];// 2. when you need array methodsconst numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(x => x * 2);const sum = numbers.reduce((a, b) => a + b, 0);// 3. when duplicates are acceptable or desiredconst votes = ['yes', 'no', 'yes', 'yes', 'no'];const yesvotes = votes.filter(vote => vote === 'yes').length;
何时使用集合：
// 1. when tracking unique valuesconst uniquevisitors = new set();function logvisitor(userid) { uniquevisitors.add(userid); console.log(`total unique visitors: ${uniquevisitors.size}`);}// 2. for quick lookup operationsconst allowedusers = new set(['user1', 'user2', 'user3']);function checkaccess(userid) { return allowedusers.has(userid);}// 3. for removing duplicatesfunction getuniquehashtags(posts) { const uniquetags = new set(); posts.foreach(post => { post.hashtags.foreach(tag => uniquetags.add(tag)); }); return [...uniquetags];}
集合和数组之间的转换
您可以在需要时轻松在集合和数组之间进行转换。
// Array to Setconst arr = [1, 2, 2, 3, 3, 4];const set = new Set(arr);// Set to Array - three methodsconst back1 = [...set];const back2 = Array.from(set);const back3 = Array.from(set.values());// Useful for array deduplicationconst deduped = [...new Set(arr)];
结论
需要时选择数组：
基于索引的访问丰富的数组方法（map、reduce、filter等）重复值内存效率传统迭代模式
需要时选择设置：
仅限唯一值快速查找操作简单的添加/删除操作维护独特项目的列表快速重复数据删除
请记住，您随时可以在需要时在两种类型之间进行转换，因此请选择最适合您当前需求的一种。
以上就是JavaScript 中的集合与数组：何时使用哪个？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500971.html
微信扫一扫 
支付宝扫一扫 
