189 8069 5689

新增的es6数据结构是什么

本文小编为大家详细介绍“新增的es6数据结构是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“新增的es6数据结构是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

10年积累的网站设计制作、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有普兰免费网站建设让你可以放心的选择与我们合作。

新增结构有：1、Symbol，表示独一无二的值，是一个函数结构；2、Set，指的是“集合”结构，类似数组，允许存放无序且不能重复的数据；3、WeakSet，类似Set，内部数据也不能有重复值；4、Map，指的是“字典”结构，可存储映射关系。

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

ES6新增数据结构

1、Symbol

Symbol是ES6中新增的一个基本数据类型之一，它是一个函数。每一个从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常用方法

方法返回值说明
addweakset对象添加元素
deleteboolean删除元素
hasbooleanweakset对象中是否存在这个值

关于遍历

WeakSet不能被遍历，因为它只是对对象进行弱引用，如果遍历去获取元素，有可能导致对象不能被GC回收。

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

4、Map

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

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

console.log(obj3);
// { '[object Object]': 'b' }

而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: '_island' } => 'a', { name: 'QC2125' } => 'b' }

// or
const map2 = new Map([[obj1,'a'],[obj2,'b']])

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的区别

    • WeakMap的key只能使用对象，不接受其他的类型作为key

    • WeakMap的key对对象是弱引用

基本使用

const weakMap = new WeakMap();
weakMap.set(obj, "a");
console.log(weakMap.get(obj)); // a

WeakMap常用方法

方法返回值说明
getweakmap对象获取元素
deleteboolean删除元素
hasbooleanweaksmap对象中是否存在这个值

关于遍历

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

读到这里，这篇“新增的es6数据结构是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。


新闻标题：新增的es6数据结构是什么
文章链接：http://cdxtjz.cn/article/pooihg.html

其他资讯