ES6+ 数据结构扩展教程

发布时间：2023-03-27 13:47:34 所属栏目：教程来源：

导读：编程语言都具有内建的数据结构，但各种编程语言的数据结构常有不同之处。本文将要说的数据结构就是 JavaScript 内建的数据结构及其属性。

我们知道在 JavaScript 中有两种数据类型，一种是基本数据类型，另一种是

编程语言都具有内建的数据结构，但各种编程语言的数据结构常有不同之处。本文将要说的数据结构就是 JavaScript 内建的数据结构及其属性。

我们知道在 JavaScript 中有两种数据类型，一种是基本数据类型，另一种是引用类型。ES5 在数据存储时一般使用 Array 或 Object 来存储数据。然而，在越来越复杂的业务中数组和对象已经不能满足我们对数据的存储要求了。ES6 新增了两个用于储存的数据结构 ——Set 和 Map，极大地丰富了 JS 数据存储的能力。

ES5 中 JavaScript 中没有所谓的集合概念，但是在其他一些语言如：C++、Java、python 等很早就有集合的概念了。ES6 对集合的数据结构进行了补充，引入了 Set 数据结构。

Set 对象允许你存储任何类型的值，且存储的值是唯一的，存储的值可以是原始类型或者是引用类型。并且 Set 对象提供了读、写、查找和遍历等方法，用以更加灵活地操作数据。

Set 是一个构造函数，在使用时必须要使用 new 来创建一个实例，创建的实例基本上可以当作数组来使用。构造方法如下：

var set = new Set([iterable]);
在 new Set() 时，可以接收一个默认值作为参数，这个参数需要满足可迭代的要求。

下面我们看下方法的使用实例：

// 创建一个空的 Set 实例
var set = new Set() // Set(0) {}
// 添加数据
set.add('es6') // Set(1) {"es6"}
// 还可以链式添加数据
set.add('imooc').add('7') // Set(3) {"es6", "imooc", "7"}
// 接受一个可遍历的对象，作为默认值，大部分情况是数组
var set = new Set([, , ])
console.log(set) // Set(3) {1, 2, 3}
上面的实例就是使用 Set 操作数据的过程，和数字不同的是对于数据的增删改查 Set 都有对应的方法，而数字则通过索引的方式来实现的，这样在一定情况下会出现不可控的因素。后面的章节我们会对 Set 做详细的学习。

我们都知道 Object 对象的键只能是基本类型，大部分情况都是字符串，并且 Object 存储的数据是无序的，不能记住插入的先后顺序。

ES6 为了弥补 Object 的缺陷，新增了 Map 数据结构用于存储复杂的数据类型。Map 保存的是键值对，并且能够记住键的插入顺序，而且任何值都可以作为 Map 的键来使用，包括引用类型。

和 Set 一样，Map 也是一个构造函数，需要通过 new 的方式来创建一个 Map 实例。

var map = Map([iterable]);
在创建 Map 实例时可以接收一个特定的二维数组或是一个可遍历的对象作为参数，这个参数内的每一项是以键和值的方式来组合的，如： [key, value] 形式，第一个元素键，第二个元素是值。

// 创建一个空的 Map 对象
var map1 = new Map()
map1.set('a', );
map1.set('b', );
map1.set('c', );
console.log(map1) // Map(3) {"a" => 1, "b" => 2, "c" => 3}
// map也可以进行链式调用
var map2 = new Map()
map2.set('a', ).set('b', ).set('c', )
console.log(map2) // Map(3) {"a" => 1, "b" => 2, "c" => 3}
// 接收一个二维数组，二维数组中包含两个值，key和value
var map3 = new Map([["x", ], ["y", ], ["z", ]]);
console.log(map3) // Map(3) {"x" => 10, "y" => 20, "z" => 30}
console.log(map1.get('a')) // 1
console.log(map3.get('z')) // 30
上面的代码展示了 Map 数据结构添加和获取操作，和 Set 一样，Map 操作数据也是通过函数的方式来实现的。后面的章节我们会对 Map 做详细的学习

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!