ES6 컬렉션 : 맵, 세트, ​​약점, 약점 사용

이 기사는 4 개의 새로운 ES6 컬렉션과 그들이 가져 오는 이점을 살펴 봅니다.

대부분의 주요 프로그래밍 언어에는 여러 유형의 데이터 컬렉션이 있습니다. 파이썬에는 목록, 튜플 및 사전이 있습니다. Java에는 목록, 컬렉션,지도 및 대기열이 있습니다. 루비에는 해시와 어레이가 있습니다. 지금까지 JavaScript에는 배열 만 있습니다. 객체와 배열은 JavaScript의 오른쪽 도우미입니다. ES6은 언어의 강력하고 표현력있는 기능을 향상시킬 4 가지 새로운 데이터 구조, 즉 맵, 세트, ​​약세 및 약점을 소개합니다.

키 포인트

ES6은 MAP, SET, 약세 및 약점의 네 가지 새로운 데이터 구조를 소개합니다. 이 컬렉션은보다 표현적이고 강력한 JavaScript 프로그래밍을 허용합니다.

맵 및 ES6에서 세트는 모든 유형의 키 값 쌍의 컬렉션입니다. 그들은 빠른 검색을 위해 최적화되어 값을 통해 추가, 삭제 및 루프를 제공하는 방법을 제공합니다. 그러나 물체에 대한 강한 언급을 보유하고 있으며, 물체가 크고 더 이상 필요하지 않은 경우 비용이 많이들 수 있습니다.

es6는 또한 MAP 및 SET과 유사하지만 객체에 대한 약한 참조를 보유하는 약점 및 약점을 소개합니다. 이는 이러한 객체가 더 이상 필요하지 않을 때는 쓰레기를 수집 할 수 있으며 이는 메모리 관리에 매우 유익합니다.

새로운 ES6 컬렉션은 더 큰 유연성을 제공하지만 많은 경우에 JavaScript 객체를 컬렉션으로 사용할 수 있습니다. 객체 또는 키 컬렉션을 사용할지 여부를 결정할 때 개발자는 동적 키 조회 필요성, 값의 상호 교환 성 및 키 값 쌍을 추가 또는 삭제하는 빈도와 같은 요소를 고려해야합니다.
JavaScript Hashmap을 찾고 있습니다 Hashmap, Dictionary 및 Hash는 다양한 프로그래밍 언어가 주요 값 쌍을 저장하는 몇 가지 방법이며, 이러한 데이터 구조는 빠른 검색을 위해 최적화됩니다.
• es5에서 JavaScript 객체 (키 및 값이있는 속성 모음 만)는 해시를 시뮬레이션 할 수 있지만 객체를 해시로 사용하는 데 몇 가지 단점이 있습니다.
단점#1 : es5의 키는 문자열 여야합니다 javaScript 객체 속성 키는 문자열이어야하며, 이는 다양한 데이터 유형의 키 값 쌍의 컬렉션이되는 능력을 제한합니다. 물론 다른 데이터 유형을 문자열에 캐스팅 할 수 있지만 추가 작업이 추가됩니다. 단점#2 : 객체는 본질적으로 반복적이지 않습니다 객체는 컬렉션으로 설계되지 않았으므로 객체의 속성 수를 결정하는 효과적인 방법은 없습니다. (예 : Object.keys가 느립니다). 객체의 특성을 고려하면 프로토 타입 속성도 얻을 수 있습니다. 모든 객체에 반복적 인 속성을 추가 할 수 있지만 모든 객체가 컬렉션으로 사용되는 것은 아닙니다. for… in loop and hasownproperty () 메소드를 사용할 수 있지만 이는 해결 방법 일뿐입니다. 객체의 속성을 통과하면 삽입 된 순서로 속성이 반드시 검색되는 것은 아닙니다.
• 단점 #3 : 내장 방법 충돌의 도전 객체에는 생성자, 토스트 링 및 가치와 같은 내장 방법이 있습니다. 그들 중 하나가 재산으로 추가되면 충돌이 발생할 수 있습니다. object.create (null)를 사용하여 알몸 물체 (Object.Prototype에서 상속되지 않음)를 만들 수 있지만 여전히 해결 방법 일뿐입니다. ES6에는 새로운 수집 데이터 유형이 포함되어 있으므로 더 이상 개체를 사용하고 단점을 견딜 필요가 없습니다.

  ES6 맵 컬렉션 사용

  맵을 만들고 공통 메소드를 사용하십시오 이 예제를 JSBIN 에서 실행하십시오 세트 사용 세트는 중복없이 주문 된 값 목록입니다. 세트는 배열처럼 인덱싱되지 않지만 키를 사용하여 액세스합니다. 세트는 이미 Java, Ruby, Python 및 기타 많은 언어로 존재합니다. ES6 세트와 다른 언어로 세트의 한 가지 차이점은 ES6에서 순서가 중요하다는 것입니다 (다른 많은 언어가 아님). 주요 세트 방법은 다음과 같습니다.
  이 예제를 JSBIN 에서 실행하십시오 약한 컬렉션, 메모리 및 쓰레기 수집 JavaScript Garbage Collection은 더 이상 참조되지 않은 객체가 자동으로 삭제되고 자원이 재활용되는 메모리 관리의 형태입니다.

  const map = new Map(); // 创建一个新的Map
  map.set('hobby', 'cycling'); // 设置键值对
  
  const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
  const normalfoods = {}; // 新对象
  
  map.set(normalfoods, foods); // 设置两个对象作为键值对
  
  for (const [key, value] of map) {
    console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
  }
  
  map.forEach((value, key) => {
    console.log(`${key} = ${value}`);
  }, map); // hobby = cycling  [object Object] = [object Object]
  
  map.clear(); // 清除键值对
  console.log(map.size === 0); // True
  

  맵과 설정 객체에 대한 참조가 강요되고 쓰레기 수집이 허용되지 않습니다. MAP/Set 참조가 더 이상 필요하지 않은 큰 물체 (예 : DOM에서 제거 된 DOM 요소)를 참조하면 비용이 많이들 수 있습니다.

  이 문제를 해결하기 위해 ES6은 또한 약점과 약점이라는 두 가지 새로운 약한 세트를 도입했습니다. 이 ES6 컬렉션은 더 이상 메모리에서 청소할 필요가없는 객체를 허용하기 때문에 "약한"것입니다.

  <<> 약점 <🎜 🎜> 약점은 우리가 소개 한 세 번째 새로운 ES6 컬렉션입니다. 약점은 일반 맵과 유사하지만 방법이 적으며 쓰레기 수집에는 위의 차이점이 있습니다.

  사용자 사례 <🎜 🎜> 약점에는 몇 가지 인기있는 사용 사례가 있습니다. 객체의 개인 데이터를 비공개로 유지하거나 DOM 노드/객체를 추적하는 데 사용할 수 있습니다.

  개인 데이터 사용 사례 <🎜 🎜> 다음 예제는 JavaScript 전문가 Nicholas C. Zakas에서 나옵니다.

  const planetsOrderFromSun = new Set();
  planetsOrderFromSun.add('Mercury');
  planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
  console.log(planetsOrderFromSun.has('Earth')); // True
  
  planetsOrderFromSun.delete('Mars');
  console.log(planetsOrderFromSun.has('Mars')); // False
  
  for (const x of planetsOrderFromSun) {
    console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
  }
  console.log(planetsOrderFromSun.size); // 3
  
  planetsOrderFromSun.add('Venus'); // 尝试添加重复项
  console.log(planetsOrderFromSun.size); // 仍然是3，没有添加重复项
  
  planetsOrderFromSun.clear();
  console.log(planetsOrderFromSun.size); // 0
  

  여기에서 약점을 사용하면 객체 데이터를 비공개로 유지하는 프로세스를 단순화합니다. 사람 객체를 참조 할 수 있지만 특정 개인 인스턴스가없는 경우 PrivateAtaWeakMap에 액세스 할 수 없습니다.

  dom 노드 사용 사례 <🎜 🎜> Google Polymer Project는 PositionWalker라는 코드 스 니펫에서 약점을 사용합니다.

  Positionwalker는 DOM 서브 트리의 위치를 ​​현재 노드로 추적하고 해당 노드 내의 오프셋을 추적합니다.

  약점은 DOM 노드의 편집, 삭제 및 변경에 사용됩니다.

  const map = new Map(); // 创建一个新的Map
  map.set('hobby', 'cycling'); // 设置键值对
  
  const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
  const normalfoods = {}; // 新对象
  
  map.set(normalfoods, foods); // 设置两个对象作为键值对
  
  for (const [key, value] of map) {
    console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
  }
  
  map.forEach((value, key) => {
    console.log(`${key} = ${value}`);
  }, map); // hobby = cycling  [object Object] = [object Object]
  
  map.clear(); // 清除键值对
  console.log(map.size === 0); // True
  

  약점 <🎜 🎜> 약점은 참조가 더 이상 필요하지 않을 때 요소를 수집 할 수있는 세트 세트입니다. 약점은 반복을 허용하지 않습니다. 그들의 사용 사례는 상당히 제한적입니다 (적어도 당분간). 대부분의 얼리 어답터는 약점을 사용하여 객체를 수정하지 않고 태그를 붙일 수 있다고 말했다. es6-features.org는 객체에 태그가 지정되었는지 여부를 추적하기 위해 약세에서 요소를 추가하고 제거하는 예가 있습니다.

  모든 것을지도? 레코드 및 ES6 컬렉션 <6 6> 맵과 세트는 키 값 쌍의 멋진 새로운 ES6 컬렉션입니다. 즉, JavaScript 객체는 여전히 많은 경우 컬렉션으로 사용할 수 있습니다. 상황이 필요하지 않으면 새로운 ES6 컬렉션으로 전환 할 필요가 없습니다.

  MDN은 객체 또는 키드 컬렉션을 언제 사용 해야하는지 결정하기위한 좋은 질문 목록이 있습니다.

  키는 일반적으로 실행될 때까지 알려지지 않습니까? 동적으로 찾아야합니까?

  const planetsOrderFromSun = new Set();
  planetsOrderFromSun.add('Mercury');
  planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
  console.log(planetsOrderFromSun.has('Earth')); // True
  
  planetsOrderFromSun.delete('Mars');
  console.log(planetsOrderFromSun.has('Mars')); // False
  
  for (const x of planetsOrderFromSun) {
    console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
  }
  console.log(planetsOrderFromSun.size); // 3
  
  planetsOrderFromSun.add('Venus'); // 尝试添加重复项
  console.log(planetsOrderFromSun.size); // 仍然是3，没有添加重复项
  
  planetsOrderFromSun.clear();
  console.log(planetsOrderFromSun.size); // 0
  

  모든 값은 동일한 유형을 가지며 상호 교환 적으로 사용할 수 있습니까?

  문자열이 아닌 키가 필요합니까?

  키 가치 쌍이 자주 추가되거나 삭제됩니까?

  키 값 쌍의 숫자 (변경하기 쉬운)가 있습니까?

  컬렉션이 반복 되었습니까?
  새로운 ES6 컬렉션은 더 쉬운 javaScript 를 생성합니다 JavaScript 컬렉션은 이전에 매우 제한되었지만 ES6으로 수정되었습니다. 이 새로운 ES6 컬렉션은 언어의 힘과 유연성을 향상시키고 해상을 채택하는 JavaScript 개발자의 작업을 단순화합니다.
이 기사는 Microsoft Edge Browser 및 새로운 EdgeHTML 렌더링 엔진을 포함한 실제 JavaScript 학습, 오픈 소스 프로젝트 및 상호 운용성 모범 사례에 대한 Microsoft Technology Evangelist 및 Developeligence의 웹 개발 시리즈의 일부입니다. DevelopEntelligence는 프론트 엔드 중심 블로그 및 코스 웹 사이트 인 Appendto를 통해 JavaScript 교육 및 반응 교육 과정을 제공합니다.
우리는 Windows 10 용 기본 브라우저 인 Microsoft Edge를 포함한 다양한 브라우저 및 장치에서 테스트하는 것이 좋습니다. Dev.microsoftedge.com에서 무료 도구를 사용할 수 있습니다. 웹 사이트 렌더링 또는 표준 준수 문제와 같은 EdgeHTML 문제를보고하거나 검색하십시오. 또한 Microsoft 개발자 및 전문가의 최신 정보는 Edge 블로그를 방문하십시오.
• ES6 컬렉션에 대한 FAQS (FAQ) : MAP, SET, 약점, 약점
  JavaScript ES6의지도와 약점의 주요 차이점은 무엇입니까?

  JavaScript es6에서 맵과 약점은 키 값 쌍을 저장하는 데 사용됩니다. 그러나 그들 사이에는 몇 가지 중요한 차이점이 있습니다. 먼저, 맵에서 키는 모든 유형 일 수 있지만 약점에서는 키가 객체 여야합니다. 둘째, 맵은 키 값 쌍의 수를 확인할 수있는 크기 속성이 있지만 약점에는이 속성이 없습니다. 마지막으로, 맵은 주요 객체에 대한 강력한 참조를 보유하고 있습니다. 즉, 맵이 존재하는 한 쓰레기 수집을받을 자격이 없습니다. 반면에 약점은 주요 물체에 대한 약한 참조를 가지고 있습니다. 즉, 객체에 대한 다른 참조가 없으면 쓰레기를 수집 할 수 있습니다.

  JavaScript ES6에서 약점 또는 약점을 반복하는 방법은 무엇입니까?

  지도 및 세트와 달리, 약점 및 약점은 요소를 반복 할 수있는 방법이 없습니다. 이는 키 (약점) 또는 값 (약세)에 대한 약한 참조를 보유하도록 설계 되었기 때문에 언제든지 수집 할 수 있음을 의미합니다. 따라서 요소를 반복하려고 할 때 요소가 여전히 존재한다는 보장은 없습니다. 컬렉션을 반복 해야하는 경우지도를 사용하거나 대신 설정해야합니다.

  원래 데이터 유형을 약점 또는 약점에서 키로 사용할 수 있습니까?

  아니요, 원래 데이터 유형을 약점 또는 약점에서 키로 사용할 수 없습니다. 이 컬렉션의 키는 개체 여야합니다. 이는 약점과 약한 세트가 열쇠에 대한 약한 참조를 가지고 있기 때문에 다른 참조가 없으면 키를 수집 할 수 있습니다. 숫자 및 문자열과 같은 원시 데이터 유형 (예 : 숫자 및 문자열)은 객체처럼 수집되지 않으므로이 컬렉션에서 키로 사용할 수 없습니다.

  맵이나 세트 대신 약점 또는 약점을 사용해야하는 이유는 무엇입니까?

  약점 및 약점에는 몇 가지 고유 한 기능이 있으며 경우에 따라 맵이나 세트보다 더 적합 할 수도 있습니다. 키 (약점) 또는 값 (약세)에 대한 약한 참조를 가지고 있기 때문에 더 이상 사용하지 않을 때 쓰레기를 수집 할 수 있습니다. 다른 데이터를 객체와 연결하려는 경우 유용하지만 더 이상 필요하지 않을 때는 쓰레기 수집을 방지하지 않으려는 경우 유용합니다. 또한 약점과 약한 세트는 요소를 반복 할 수있는 방법이 없기 때문에 저장 한 데이터에 대한 특정 수준의 개인 정보를 제공 할 수 있습니다.

  약점 또는 약점의 키가 쓰레기를 수집하면 어떻게됩니까?

  약점 또는 약한 세트의 키가 쓰레기를 수집하면 컬렉션의 해당 항목이 자동으로 삭제됩니다. 이 세트는 키에 대한 약한 참조를 가지고 있기 때문에 더 이상 사용하지 않으면 키를 수집 할 수 있습니다. 이 기능은 JavaScript 응용 프로그램에서 메모리를 관리하는 데 유용합니다. 더 이상 사용하지 않는 객체와 관련된 데이터도 지우기 때문입니다.

  약점 또는 약점을 사용하여 임시 데이터를 저장할 수 있습니까?

  예, 약점 및 약한 세트는 임시 데이터를 저장하는 데 좋습니다. 키 (약점) 또는 값 (약세)에 대한 약한 참조를 가지고 있기 때문에 더 이상 사용하지 않을 때 쓰레기를 수집 할 수 있습니다. 이는 키가 쓰레기를 수집 할 때이 세트에 저장된 데이터도 지워집니다. 이것은 수동으로 청소에 대해 걱정할 필요가 없기 때문에 짧은 시간 동안 만 필요한 것을 저장하는 데 유용합니다.

  약점 또는 약한 세트에 특정 키나 값이 포함되어 있는지 확인하는 방법은 무엇입니까?

  약점 메소드 또는 약한 세트에 특정 키가 포함되어 있는지 확인하는 메소드를 사용할 수 있습니다. 이 메소드는 컬렉션에 키가 존재하는지 여부를 나타내는 부울 값을 반환합니다. 그러나이 세트의 값이 액세스 할 수 없기 때문에이 방법을 사용하여 약점에서 특정 값을 확인할 수 없습니다.

  약점 또는 약점에서 항목을 삭제할 수 있습니까?

  예, 삭제 방법을 사용하여 약점에서 항목을 삭제할 수 있습니다. 이 메소드는 주어진 키와 관련된 항목을 삭제하고 컬렉션에 키가 존재하는지 여부를 나타내는 부울 값을 반환합니다. 그러나이 컬렉션에는 삭제 메소드가 없으므로 약점에서 항목을 삭제할 수 없습니다.

  약점 또는 약세 세트의 모든 항목을 지울 수 있습니까?

  아니요, 약점 또는 약점의 모든 항목을 지우는 것은 아닙니다. 이 컬렉션에는 명확한 방법이 없으며지도 및 세트로 사용할 수 있습니다. 이는 약점과 약점이 키를 수집 할 때 키를 자동으로 정리하도록 설계 되었기 때문입니다.

  약점 또는 약세의 크기를 얻을 수 있습니까?

  아니요, 약점 또는 약점의 크기를 얻을 수 없습니다. 이 컬렉션에는 크기 속성이 없으며 맵 및 세트로 제공됩니다. 쓰레기 수집으로 인해 언제든지 약점 또는 약한 세트의 크기가 변경 될 수 있기 때문입니다.

위 내용은 ES6 컬렉션 : 맵, 세트, ​​약점, 약점 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!