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

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

青灯夜游
풀어 주다: 2022-10-26 17:58:21
원래의
2366명이 탐색했습니다.

새 구조는 다음과 같습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿