目录
ES6新增数据结构
首页 web前端 前端问答 新增的es6数据结构有哪些

新增的es6数据结构有哪些

Apr 15, 2022 pm 07:26 PM
es6 数据结构

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

新增的es6数据结构有哪些

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

ES6新增数据结构

1、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常用方法

方法返回值说明
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的区别
    • 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 Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

使用Java函数比较进行复杂数据结构比较 使用Java函数比较进行复杂数据结构比较 Apr 19, 2024 pm 10:24 PM

Java中比较复杂数据结构时,使用Comparator提供灵活的比较机制。具体步骤包括:定义比较器类,重写compare方法定义比较逻辑。创建比较器实例。使用Collections.sort方法,传入集合和比较器实例。

Java数据结构与算法:深入详解 Java数据结构与算法:深入详解 May 08, 2024 pm 10:12 PM

数据结构和算法是Java开发的基础,本文深入探讨Java中的关键数据结构(如数组、链表、树等)和算法(如排序、搜索、图算法等)。这些结构通过实战案例进行说明,包括使用数组存储分数、使用链表管理购物清单、使用栈实现递归、使用队列同步线程以及使用树和哈希表进行快速搜索和身份验证等。理解这些概念可以编写高效且可维护的Java代码。

PHP数据结构:AVL树的平衡之道,维持高效有序的数据结构 PHP数据结构:AVL树的平衡之道,维持高效有序的数据结构 Jun 03, 2024 am 09:58 AM

AVL树是一种平衡二叉搜索树,确保快速高效的数据操作。为了实现平衡,它执行左旋和右旋操作,调整违反平衡的子树。AVL树利用高度平衡,确保树的高度相对于节点数始终较小,从而实现对数时间复杂度(O(logn))的查找操作,即使在大型数据集上也能保持数据结构的效率。

深入了解Go语言中的引用类型 深入了解Go语言中的引用类型 Feb 21, 2024 pm 11:36 PM

引用类型在Go语言中是一种特殊的数据类型,它们的值并非直接存储数据本身,而是存储数据的地址。在Go语言中,引用类型包括slices、maps、channels和指针。深入了解引用类型对于理解Go语言的内存管理和数据传递方式至关重要。本文将结合具体的代码示例,介绍Go语言中引用类型的特点和使用方法。1.切片(Slices)切片是Go语言中最常用的引用类型之一

Java集合框架全解析:解剖数据结构,揭秘高效存储之道 Java集合框架全解析:解剖数据结构,揭秘高效存储之道 Feb 23, 2024 am 10:49 AM

Java集合框架概述Java集合框架是Java编程语言的重要组成部分,它提供了一系列可以存储和管理数据的容器类库。这些容器类库具有不同的数据结构,可以满足不同场景下的数据存储和处理需求。集合框架的优势在于它提供了统一的接口,使得开发人员可以使用相同的方式来操作不同的容器类库,从而降低了开发难度。Java集合框架的数据结构Java集合框架中包含多种数据结构,每种数据结构都有其独特的特性和适用场景。下面是几种常见的Java集合框架数据结构:1.List:List是一个有序的集合,它允许元素重复。Li

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语言作为一门简洁、高效的编程语言,在处理数据结构方面也展现出了其独特的魅力。数据结构是计算机科学中的基础概念,它旨在组织和管理数据,使得数据能够更有效地被访问和操作。通过深入学习Go语言数据结构的奥秘,我们可以更好地理解数据的存储方式和操作方法,从而提高编程效率和代码质量。一、数组数组是最简单的数据结构之一

基于哈希表的数据结构优化PHP数组交集和并集的计算 基于哈希表的数据结构优化PHP数组交集和并集的计算 May 02, 2024 pm 12:06 PM

利用哈希表可优化PHP数组交集和并集计算,将时间复杂度从O(n*m)降低到O(n+m),具体步骤如下:使用哈希表将第一个数组的元素映射到布尔值,以快速查找第二个数组中元素是否存在,提高交集计算效率。使用哈希表将第一个数组的元素标记为存在,然后逐个添加第二个数组的元素,忽略已存在的元素,提高并集计算效率。

See all articles