목차
ES6 새로운 데이터 구조
웹 프론트엔드 프런트엔드 Q&A 새로운 es6 데이터 구조는 무엇입니까?

새로운 es6 데이터 구조는 무엇입니까?

Apr 15, 2022 pm 07:26 PM
es6 데이터 구조

새 구조는 다음과 같습니다. 1. 고유한 값을 나타내며 함수 구조인 기호 2. 배열과 유사한 "집합" 구조를 참조하여 순서가 없고 반복할 수 없는 데이터를 저장할 수 있는 집합 ; 3. WeakSet, Set과 유사하게 내부 데이터는 중복된 값을 가질 수 없습니다. 4. Map은 매핑 관계를 저장할 수 있는 "사전" 구조를 나타냅니다.

새로운 es6 데이터 구조는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES6 새로운 데이터 구조

1. Symbol

SymbolES6의 새로운 기본 데이터 유형 중 하나입니다. Symbol 함수에서 반환된 각 Symbol 값은 고유합니다. symbol 값은 객체 속성의 식별자 역할을 하며 유일한 목적을 갖습니다. SymbolES6中新增的一个基本数据类型之一,它是一个函数。每一个从Symbol函数返回的Symbol值都是独一无二的,symbol值作为对象属性的标识符,也是唯一的用途的。

const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2); // false
로그인 후 복사

symbol作为key

第一种方式,直接在对象的字面量中添加。

// symbol作为key
const obj = {
  [s1]:'abc',
  [s2]:'cc',
}
로그인 후 복사

第二种方式,通过添加数组方式添加。

// 需要用数组方式来获取,不能通过点语法,否则会获取到字符串key
console.log(obj[s1]);
로그인 후 복사

第三种方式,通过对象中的defineProperty方法添加。

const s4=Symbol()
Object.defineProperty(obj,s4,{
  configurable:true,
  enumerable:true,
  writable:true,
  value:'ff'
})
로그인 후 복사

通过symbol获取对应的值

需要用数组方式来获取,不能通过点语法,否则会获取到字符串key。

console.log(obj[s1]);
로그인 후 복사

symbol不能被隐式转换成string类型。

注意:Symbol函数中的参数是symbol描述符,这是在ES10新增的特性

let Sym = Symbol("Sym")
alert(Sym)  // TypeError: Cannot convert a Symbol value to a string
로그인 후 복사

我们不能直接alert一个symbol对象,但是我们可以通过toString的方式或者.description来获取symbol对象的描述符。

let sym = Symbol('a')
console.log(sym.description); // 'a'
로그인 후 복사

遍历symbol

在使用for遍历、object.keys中是获取不到symbol健的,对此object还提供了getOwnPropertySymbols方法,用于获取对象中所有symbol的key。

const sKeys=(Object.getOwnPropertySymbols(obj));
for(const skey of sKeys){
  console.log(obj[skey]);
}
로그인 후 복사

全局symbol对象注册

有时,我们可能需要多个symbol的值是一致的,我们可以通过symbol提供的静态方法for方法传入一样的描述符来使它们的值一致。

Symbol.for

该方法会在使用给定键搜索运行时符号注册表中的现有符号,并在找到时返回它。否则,使用此键在全局符号注册表中创建一个新符号。

const sa=Symbol.for('cc')
const sb=Symbol.for('cc')
console.log(sa===sb); //true
로그인 후 복사

Symbol.keyFor

该方法用于获取全局symbol的描述符。

const key =Symbol.keyFor(sb)
console.log(key); // c
로그인 후 복사

2、Set

Set对象(类似数组)允许你存放任何数据类型,但里面的值不能重复。

const s1 = new Set()
s1.add(10)
s1.add(20)
s1.add(30)
s1.add(40)

console.log(s1) // Set(4) { 10, 20, 30, 40 }

s1.add(20)
console.log(s1) // Set(4) { 10, 20, 30, 40 }
로그인 후 복사

Set常用方法

方法返回值说明
sizeset对象中的数量返回set对象中的数量
addSet对象添加元素
deleteboolean删除元素
hasbooleanSet对象中是否存在这个值
clear清空Set对象中的值

3、WeakSet

WeakSet是类似Set的另外一种数据结构,内部数据也不能有重复值。

  • 它与Set的区别
    • WeakSet只能存放对象类型,不能存放基本数据类型
    • WeakSet对元素是弱引用

基本使用

const weakSet = new WeakSet();
let obj = {
  name: "_island"
};

weakSet.add(obj);
로그인 후 복사

WeakSet常用方法

symbol as key
方法返回值说明
addweakset对象添加元素
deleteboolean删除元素
hasbooleanweakset
const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const obj3={
  [obj1]:'a',
  [obj2]:'b',
}

console.log(obj3);
// { '[object Object]': 'b' }
로그인 후 복사
로그인 후 복사
🎜첫 번째 방법은 객체의 리터럴에 직접 추가하는 것입니다. 🎜
const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const map = new Map();
map.set(obj1, "a");
map.set(obj2, "b");
console.log(map); // Map(2) { { name: '_island' } => 'a', { name: 'QC2125' } => 'b' }

// or
const map2 = new Map([[obj1,'a'],[obj2,'b']])
로그인 후 복사
로그인 후 복사
🎜두 번째 방법은 배열을 추가하여 추가하는 것입니다. 🎜
map2.forEach((item) => console.log(item));
로그인 후 복사
로그인 후 복사
🎜세 번째 방법은 객체의 defineProperty 메소드를 통해 추가하는 것입니다. 🎜
for ([val, key] of map2) {
  console.log(`${key}---${val}`);
}
로그인 후 복사
로그인 후 복사
🎜🎜기호를 통해 해당 값 가져오기🎜🎜🎜점 구문이 아닌 배열 모드에서 가져와야 합니다. 그렇지 않으면 문자열 키를 가져옵니다. 🎜
const weakMap = new WeakMap();
weakMap.set(obj, "a");
console.log(weakMap.get(obj)); // a
로그인 후 복사
로그인 후 복사
🎜symbol은 암시적으로 string 유형으로 변환될 수 없습니다. 🎜🎜🎜참고: Symbol 함수의 매개변수는 ES10🎜🎜rrreee🎜의 새로운 기능인 기호 설명자입니다. symbol 개체에 직접 alert할 수는 없지만 toString 또는 .description을 통해 symbol 개체의 설명자를 얻을 수 있습니다. 🎜rrreee🎜🎜Traversing Symbol🎜🎜🎜for 탐색 및 object.keys를 사용할 때 symbol 키를 얻을 수 없습니다. >object는 또한 객체에 있는 모든 기호의 키를 얻는 데 사용되는 getOwnPropertySymbols 메서드를 제공합니다. 🎜rrreee🎜🎜전역 기호 개체 등록🎜🎜🎜때로는 일관성을 유지하기 위해 여러 symbol의 값이 필요할 수 있습니다. symbol<에서 제공하는 정적 메서드 <code>를 전달할 수 있습니다. /code> for 메소드는 동일한 설명자를 전달하여 해당 값을 일관되게 만듭니다. 🎜🎜🎜Symbol.for🎜🎜🎜이 메서드는 지정된 키를 사용하여 런타임 기호 레지스트리에서 기존 기호를 검색하고 발견되면 반환합니다. 그렇지 않으면 이 키를 사용하여 전역 기호 레지스트리에 새 기호가 생성됩니다. 🎜rrreee🎜🎜Symbol.keyFor🎜🎜🎜이 메서드는 전역 symbol의 설명자를 얻는 데 사용됩니다. 🎜rrreee🎜🎜🎜2, Set🎜🎜🎜🎜Set 객체(배열과 유사)를 사용하면 모든 데이터 유형을 저장할 수 있지만 내부 값은 반복될 수 없습니다. 🎜rrreee🎜🎜공통 메소드 설정🎜🎜🎜< /thead>
메소드반환 값설명
size🎜set세트 개체의 수량🎜세트 개체의 수량을 반환합니다🎜 🎜
추가🎜설정 개체 🎜요소 추가 🎜🎜
삭제 🎜부울🎜요소 삭제 🎜🎜
has🎜boolean🎜 이 값이 Set 개체에 있습니까? 🎜🎜
clear🎜None🎜Set에서 값을 지웁니다. object🎜 🎜🎜🎜🎜🎜🎜3.WeakSet🎜🎜🎜🎜WeakSetSet과 유사한 또 다른 데이터 구조이며, 내부 데이터는 중복된 값을 가질 수 없습니다. . 🎜
  • Set
    • WeakSet과의 차이점은 객체 유형만 저장할 수 있고 기본 데이터 유형은 저장할 수 없습니다
    • WeakSet는 요소에 대한 약한 참조입니다.
🎜🎜기본 사용🎜🎜rrreee🎜🎜WeakSet의 일반적인 메서드🎜🎜🎜
메서드반환 값설명
추가🎜weakset 객체 🎜요소 추가 🎜🎜
삭제🎜 부울</ code>🎜<td>요소 삭제 🎜🎜<tr><td><code>has🎜boolean🎜weakset</code > 개체 이 값이 존재합니까🎜🎜🎜🎜<p><strong>关于遍历</strong></p><p><code>WeakSet不能被遍历,因为它只是对对象进行弱引用,如果遍历去获取元素,有可能导致对象不能被GC回收。

所以WeakSet中的对象是不能获取的

4、Map

ES6新增的数据结构,用于存储映射关系。我们知道在JavaScript中对象中是不能用对象来作为key的。(假如我们把对象作为key,其内部会将对象转换为字符串[object object]

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const obj3={
  [obj1]:&#39;a&#39;,
  [obj2]:&#39;b&#39;,
}

console.log(obj3);
// { &#39;[object Object]&#39;: &#39;b&#39; }
로그인 후 복사
로그인 후 복사

Map则可以把对象作为key进行存储,可以通过set方法添加到Map中,也直接通过字面量的方式添加。

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const map = new Map();
map.set(obj1, "a");
map.set(obj2, "b");
console.log(map); // Map(2) { { name: &#39;_island&#39; } => &#39;a&#39;, { name: &#39;QC2125&#39; } => &#39;b&#39; }

// or
const map2 = new Map([[obj1,&#39;a&#39;],[obj2,&#39;b&#39;]])
로그인 후 복사
로그인 후 복사

Map常用方法

方法返回值说明
get获取对应的元素通过key获取对应元素
sizeMap对象中的数量返回Map对象中的数量
setMap对象添加元素
deleteboolean删除元素
hasbooleanSet对象中是否存在这个值
clear清空Set对象中的值

遍历Map

通过foreach语句遍历Map

map2.forEach((item) => console.log(item));
로그인 후 복사
로그인 후 복사

通过for..of遍历Map

for ([val, key] of map2) {
  console.log(`${key}---${val}`);
}
로그인 후 복사
로그인 후 복사

5、WeakMap

Map类似,也是以键值对的形式存在的

  • 和Map的区别
    • WeakMapkey只能使用对象,不接受其他的类型作为key
    • WeakMapkey对对象是弱引用

基本使用

const weakMap = new WeakMap();
weakMap.set(obj, "a");
console.log(weakMap.get(obj)); // a
로그인 후 복사
로그인 후 복사

WeakMap常用方法

方法 返回值 说明
get weakmap对象 获取元素
delete boolean 删除元素
has boolean weaksmap对象中是否存在这个值

关于遍历

WeakSet一样,正因为它是弱引用,WeakMapkey是不可枚举的,如果key可枚举那其列表将会受GC影响。

【相关推荐:javascript视频教程web前端

위 내용은 새로운 es6 데이터 구조는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Java 함수 비교를 사용하여 복잡한 데이터 구조 비교 Java 함수 비교를 사용하여 복잡한 데이터 구조 비교 Apr 19, 2024 pm 10:24 PM

Java에서 복잡한 데이터 구조를 사용할 때 Comparator는 유연한 비교 메커니즘을 제공하는 데 사용됩니다. 구체적인 단계에는 비교기 클래스 정의, 비교 논리를 정의하기 위한 비교 메서드 재작성 등이 포함됩니다. 비교기 인스턴스를 만듭니다. Collections.sort 메서드를 사용하여 컬렉션 및 비교기 인스턴스를 전달합니다.

Java 데이터 구조 및 알고리즘: 심층 설명 Java 데이터 구조 및 알고리즘: 심층 설명 May 08, 2024 pm 10:12 PM

데이터 구조와 알고리즘은 Java 개발의 기초입니다. 이 기사에서는 Java의 주요 데이터 구조(예: 배열, 연결 목록, 트리 등)와 알고리즘(예: 정렬, 검색, 그래프 알고리즘 등)을 자세히 살펴봅니다. 이러한 구조는 배열을 사용하여 점수를 저장하고, 연결된 목록을 사용하여 쇼핑 목록을 관리하고, 스택을 사용하여 재귀를 구현하고, 대기열을 사용하여 스레드를 동기화하고, 트리 및 해시 테이블을 사용하여 빠른 검색 및 인증을 저장하는 등 실제 사례를 통해 설명됩니다. 이러한 개념을 이해하면 효율적이고 유지 관리가 가능한 Java 코드를 작성할 수 있습니다.

Go 언어의 참조 유형에 대한 심층적인 이해 Go 언어의 참조 유형에 대한 심층적인 이해 Feb 21, 2024 pm 11:36 PM

참조 유형은 Go 언어의 특수 데이터 유형입니다. 해당 값은 데이터 자체를 직접 저장하지 않고 저장된 데이터의 주소를 저장합니다. Go 언어에서 참조 유형에는 슬라이스, 맵, 채널 및 포인터가 포함됩니다. Go 언어의 메모리 관리 및 데이터 전송 방법을 이해하려면 참조 유형에 대한 깊은 이해가 중요합니다. 이 기사에서는 특정 코드 예제를 결합하여 Go 언어의 참조 유형의 특징과 사용법을 소개합니다. 1. 슬라이스 슬라이스는 Go 언어에서 가장 일반적으로 사용되는 참조 유형 중 하나입니다.

PHP 데이터 구조: AVL 트리의 균형, 효율적이고 질서 있는 데이터 구조 유지 PHP 데이터 구조: AVL 트리의 균형, 효율적이고 질서 있는 데이터 구조 유지 Jun 03, 2024 am 09:58 AM

AVL 트리는 빠르고 효율적인 데이터 작업을 보장하는 균형 잡힌 이진 검색 트리입니다. 균형을 이루기 위해 좌회전 및 우회전 작업을 수행하고 균형을 위반하는 하위 트리를 조정합니다. AVL 트리는 높이 균형을 활용하여 노드 수에 비해 트리 높이가 항상 작게 되도록 함으로써 로그 시간 복잡도(O(logn)) 검색 작업을 달성하고 대규모 데이터 세트에서도 데이터 구조의 효율성을 유지합니다.

Java 컬렉션 프레임워크 전체 분석: 데이터 구조를 분석하고 효율적인 저장의 비밀을 밝힙니다. Java 컬렉션 프레임워크 전체 분석: 데이터 구조를 분석하고 효율적인 저장의 비밀을 밝힙니다. Feb 23, 2024 am 10:49 AM

Java 컬렉션 프레임워크 개요 Java 컬렉션 프레임워크는 Java 프로그래밍 언어의 중요한 부분으로, 데이터를 저장하고 관리할 수 있는 일련의 컨테이너 클래스 라이브러리를 제공합니다. 이러한 컨테이너 클래스 라이브러리는 다양한 시나리오의 데이터 저장 및 처리 요구 사항을 충족하기 위해 다양한 데이터 구조를 가지고 있습니다. 컬렉션 프레임워크의 장점은 통합된 인터페이스를 제공하여 개발자가 서로 다른 컨테이너 클래스 라이브러리를 동일한 방식으로 작동할 수 있도록 하여 개발의 어려움을 줄일 수 있다는 것입니다. Java 컬렉션 프레임워크의 데이터 구조 Java 컬렉션 프레임워크에는 다양한 데이터 구조가 포함되어 있으며 각 데이터 구조에는 고유한 특성과 적용 가능한 시나리오가 있습니다. 다음은 몇 가지 일반적인 Java 컬렉션 프레임워크 데이터 구조입니다. 1. 목록: 목록은 요소가 반복될 수 있도록 정렬된 컬렉션입니다. 리

해시 테이블 기반 데이터 구조는 PHP 배열 교차 및 결합 계산을 최적화합니다. 해시 테이블 기반 데이터 구조는 PHP 배열 교차 및 결합 계산을 최적화합니다. May 02, 2024 pm 12:06 PM

해시 테이블은 PHP 배열 교집합 및 합집합 계산을 최적화하여 시간 복잡도를 O(n*m)에서 O(n+m)으로 줄이는 데 사용할 수 있습니다. 특정 단계는 다음과 같습니다. 해시 테이블을 사용하여 요소를 매핑합니다. 첫 번째 배열을 부울 값으로 변환하여 두 번째 배열의 요소가 존재하는지 빠르게 확인하고 교차점 계산의 효율성을 향상시킵니다. 해시 테이블을 사용하여 첫 번째 배열의 요소를 기존 요소로 표시한 다음 기존 요소를 무시하고 두 번째 배열의 요소를 하나씩 추가하여 통합 계산의 효율성을 높입니다.

PHP SPL 데이터 구조: 프로젝트에 속도와 유연성을 추가합니다. PHP SPL 데이터 구조: 프로젝트에 속도와 유연성을 추가합니다. Feb 19, 2024 pm 11:00 PM

PHPSPL 데이터 구조 라이브러리 개요 PHPSPL(표준 PHP 라이브러리) 데이터 구조 라이브러리에는 다양한 데이터 구조를 저장하고 조작하기 위한 클래스 및 인터페이스 세트가 포함되어 있습니다. 이러한 데이터 구조에는 배열, 연결된 목록, 스택, 큐 및 세트가 포함되며, 각 항목은 데이터 조작을 위한 특정 메서드 및 속성 세트를 제공합니다. 배열 PHP에서 배열은 일련의 요소를 저장하는 정렬된 컬렉션입니다. SPL 배열 클래스는 정렬, 필터링 및 매핑을 포함하여 기본 PHP 배열에 대한 향상된 기능을 제공합니다. 다음은 SPL 배열 클래스를 사용하는 예입니다: useSplArrayObject;$array=newArrayObject(["foo","bar","baz"]);$array

Go 언어 데이터 구조의 비밀을 자세히 알아보세요. Go 언어 데이터 구조의 비밀을 자세히 알아보세요. Mar 29, 2024 pm 12:42 PM

Go 언어 데이터 구조의 신비에 대한 심층적인 연구에는 간결하고 효율적인 프로그래밍 언어로서 Go 언어는 데이터 구조 처리에서도 독특한 매력을 보여줍니다. 데이터 구조(Data Structure)는 컴퓨터 과학의 기본 개념으로, 데이터를 보다 효율적으로 접근하고 조작할 수 있도록 데이터를 구성하고 관리하는 것을 목표로 합니다. Go 언어 데이터 구조의 신비를 심층적으로 학습함으로써 데이터가 어떻게 저장되고 작동되는지 더 잘 이해할 수 있으며 이를 통해 프로그래밍 효율성과 코드 품질이 향상됩니다. 1. 배열 배열은 가장 간단한 데이터 구조 중 하나입니다.

See all articles