JavaScript における Set と Array: いつどちらを使用するか?

JavaScript は、コレクションを保存するための 2 つの強力なデータ構造、Set と Array を提供します。どちらも複数の値を保存できますが、その独自の特性により、さまざまなシナリオに適しています。どちらかを選択する場合とその理由を見てみましょう。

1. デフォルトでの一意の値

Set 最も注目すべき機能は、重複の自動処理です。

<code class="language-javascript">// 数组允许重复
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]</code>

2. 要素チェックパフォーマンス

Set は、要素が存在するかどうかを確認するための検索時間を短縮します。

<code class="language-javascript">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 明显更快，因为它内部使用哈希表</code>

3. 利用可能なメソッドと操作

Array はデータ操作のためのより多くの組み込みメソッドを提供しますが、Set は一意性の管理に重点を置いています。

<code class="language-javascript">// 数组方法
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();                   // 删除所有值</code>

4. シーケンシャルアクセスとインデックス付きアクセス

Array は挿入順序を維持し、インデックスベースのアクセスを提供しますが、Set は挿入順序のみを維持します。

<code class="language-javascript">// 数组索引访问
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]); // 需要先转换为数组
// 不允许直接修改索引</code>

5. メモリ使用量

Set は通常、Array よりも多くのメモリを使用しますが、検索は高速になります。

<code class="language-javascript">// 内存比较（粗略示例）
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 通常使用更多内存</code>

6. 一般的な使用例

配列を使用する場合:

<code class="language-javascript">// 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;</code>

セットを使用する場合:

<code class="language-javascript">// 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];
}</code>

セットと配列間の変換

必要に応じて、Set と Array を簡単に切り替えることができます。

<code class="language-javascript">// 数组到 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)];</code>

結論

必要な場合は Array を選択してください:

• インデックスベースのアクセス
• 広範な配列メソッド (map、reduce、filter など)
• 値が重複しています
• メモリ効率
• 従来の反復モード

必要な場合は Set を選択してください:

• 一意の値のみ
• クイック検索操作
• 簡単な追加/削除操作
• ユニークなアイテムのリストを保持します
• 重複をすばやく削除

2 つのタイプはいつでも切り替えることができるので、現在のニーズに最も適したものを選択してください。

以上がJavaScript における Set と Array: いつどちらを使用するか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。