이 기사는 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
로그인 후 복사
로그인 후 복사
이 문제를 해결하기 위해 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
로그인 후 복사
로그인 후 복사
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
로그인 후 복사
로그인 후 복사
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에서 약점 또는 약점을 반복하는 방법은 무엇입니까?
지도 및 세트와 달리, 약점 및 약점은 요소를 반복 할 수있는 방법이 없습니다. 이는 키 (약점) 또는 값 (약세)에 대한 약한 참조를 보유하도록 설계 되었기 때문에 언제든지 수집 할 수 있음을 의미합니다. 따라서 요소를 반복하려고 할 때 요소가 여전히 존재한다는 보장은 없습니다. 컬렉션을 반복 해야하는 경우지도를 사용하거나 대신 설정해야합니다.
원래 데이터 유형을 약점 또는 약점에서 키로 사용할 수 있습니까?
아니요, 원래 데이터 유형을 약점 또는 약점에서 키로 사용할 수 없습니다. 이 컬렉션의 키는 개체 여야합니다. 이는 약점과 약한 세트가 열쇠에 대한 약한 참조를 가지고 있기 때문에 다른 참조가 없으면 키를 수집 할 수 있습니다. 숫자 및 문자열과 같은 원시 데이터 유형 (예 : 숫자 및 문자열)은 객체처럼 수집되지 않으므로이 컬렉션에서 키로 사용할 수 없습니다.
위 내용은 ES6 컬렉션 : 맵, 세트, 약점, 약점 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
이 기사는 4 개의 새로운 ES6 컬렉션과 그들이 가져 오는 이점을 살펴 봅니다. 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
