"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > JavaScript의 VS 배열을 설정 : 언제 사용해야합니까?

JavaScript의 VS 배열을 설정 : 언제 사용해야합니까?

2025-02-19에 게시되었습니다
검색:353

Set vs Array in JavaScript: When to Use Which?

JavaScript는 세트를 저장하기위한 두 가지 강력한 데이터 구조를 제공합니다 : 세트 array . 둘 다 여러 값을 저장할 수 있지만 고유 한 기능은 다양한 시나리오에 더 적합합니다. 한 사람이 언제, 왜 선택되었는지 살펴 보겠습니다.

  1. 기본적으로 고유 한 값

세트 의 가장 두드러진 기능은 중복의 자동 처리입니다.

// 数组允许重复
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]
  1. 요소 점검 성능

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 는 데이터 조작을위한보다 내장 된 방법을 제공하는 반면, 를 고유성 관리에 중점을 둡니다.

// 数组方法
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. 시퀀스 및 인덱스 액세스

배열 는 삽입 순서를 유지하고 색인 기반 액세스를 제공하는 반면 는 삽입 순서 만 유지합니다.

// 数组索引访问
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 는 일반적으로 배열

보다 더 많은 메모리를 사용하지만 더 빠른 조회를 제공합니다.
// 内存比较(粗略示例)
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 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;
; const currentTrack = 재생 목록 [currentIndex]; // 2. 배열 방법이 필요할 때 const 번호 = [1, 2, 3, 4, 5]; const doubled = numbers.map (x => x * 2); const sum = numbers.reduce ((a, b) => a b, 0); // 3. 반복 값이 허용되거나 필요한 경우 const 투표 =

; const yesvotes = votes.filter (투표 => 투표 === '예'). 길이;

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

// 1. 고유 한 값을 추적 할 때 const cignervisitors = new set (); 함수 logvisitor (userId) { UniqueVisitors.add (userId); Console.log ( '총 고유 방문자 : $ {고유 한 Visitors.size}`); } // 2. 빠른 검색 작업에 사용됩니다 const allendUsers = new set (

); 함수 CheckAccess (userId) { return allendUsers.has (userId); } // 3. 복제를 삭제하는 데 사용됩니다 함수 getuniquehashtags (게시물) { const iriquetags = new set (); posts.foreach (post => { post.hashtags.foreach (tag => iriquetags.add (tag)); }); 반환 [... uniquetags]; }

세트와 배열 사이의 변환 필요에 따라

set
// 数组到 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)];

// 배열 설정 const arr = [1, 2, 2, 3, 3, 4]; const set = 새 세트 (ARR); // 배열로 설정 - 세 가지 메소드 const back1 = [... 세트]; const back2 = array.from (set); const back3 = array.from (set.values ​​()); // 배열 중복 제거에 사용됩니다 const dedicated = [... 새 세트 (arr)];

결론에서

다음이 필요할 때
    배열
  • 를 선택하십시오 :
  • 색인 기반 액세스
  • 광범위한 배열 메소드 (맵, 감소, 필터 등)
  • 반복 가치
  • 메모리 효율

전통적인 반복 모델

다음 상황이 필요할 때
    set
  • :
  • 독특한 가치 만
  • 빠른 검색 작업
  • 간단한 추가/삭제 작업
  • 고유 한 항목 목록을 유지하십시오

빠른 중복 제거

Set vs Array in JavaScript: When to Use Which? 언제든지 두 유형을 전환 할 수 있으므로 현재 요구에 가장 적합한 가장 적합한 유형을 선택하십시오.

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3