JavaScript中数组的集合和映射

Posted 2022-03-25 zai1

集合

集合(set)是在ES6中引入的一种数据结构，用于表示唯一值的集合，所以它不能包含重复值。接 下来这一小节，就让我们具体来看一下这种新的数据结构。

Set集合是一种无重复元素的列表，这是这种数据结构的最大的一个特点。

要创建一个集合，方法很简单，直接使用new就可以创建一个Set对象。如果想要集合在创建时 就包含初始值，那么我们可以传入一个数组进去。

let s1 = new Set();

let s2 = new Set([1,2,3]);

console.log(s1);//Set

console.log(s2);//Set 1, 2, 3

 

使用add()方法可以给一个集合添加值，由于调用add()方法以后返回的又是一个Set对象，所 以我们能连续调用add()方法进行值的添加，这种像链条一样的方法调用方式被称为链式调用。

let s1 = new Set();

s1.add(1);

console.log(s1);//Set 1

s1.add(2).add(3).add(4);

console.log(s1);

//Set 1, 2, 3, 4 我们还可以直接将一个数组传入add()方法里面 let s1 = new Set();

s1.add([1,2,3]);

console.log(s1);

//Set [ 1, 2, 3 ]

 

需要注意的是建立Set对象时传入数组与调用add()方法时传入数组是效果是不一样，区别 如下：

建立Set对象时传入数组，数组每一项成为Set对象的一个元素

let s1 = new Set([1,2,3]);

console.log(s1);

//Set 1, 2, 3

console.log(s1.size);//3

 

调用add()方法时传入数组，就是作为Set对象的一个元素

let s1 = new Set();

s1.add([1,2,3]);

console.log(s1);

//Set [ 1, 2, 3 ]

console.log(s1.size);//1

 

在Set对象中，不能够添加相同的元素，这是很重要的一个特性

let s1 = new Set();

s1.add(1).add(2).add(2).add(3);

console.log(s1);

//Set 1, 2, 3

 

集合相关属性和方法

 

1. 用size属性获取元素个数

 

let s1 = new Set([1,2,3]);

console.log(s1.size);//3

 

1. 使用has（）方法来查看一个集合中是否包含某一个值

 

let s1 = new Set([1,2,3]);

console.log(s1.has(1));//true

 

1. 删除集合值

 

使用delete删除Set对象里面的某一个元素

let s1 = new Set([1,2,3]);

s1.delete(2);

console.log(s1);//Set 1, 3

//没有的元素也不会报错

s1.delete("2");

console.log(s1);//Set 1, 3

如果要一次性删除所有的元素，可以使用clear方法

let s1 = new Set([1,2,3]);

s1.clear()

console.log(s1);//Set

 

遍历集合

 

集合也是可以枚举的，我们同样可以使用for-o f来对集合进行遍历，如下:

let s = new Set([1,2,3,4,5]);

for(let i of s) console.log(i);

// 1

// 2

// 3

// 4

// 5

或者通过for Each来进行遍历，示例如下：

//使用forEach进行遍历

let s = new Set([1,2,3,4,5]); s.forEach(ele => console.log(ele));

//1

//2

//3

//4

//5

 

除此之外，我们也可以使用集合里面自带的keys() , values()以及ent ries()方法来对集合 进行遍历。顺便要说一下的是，在集合里面键和值是相同的。

 

keys()方法遍历集合的键

let s = new Set(["Bill","Lucy","David"]); for(let i of s.keys())

console.log(i);

// Bill

// Lucy

// David

values()方法遍历集合的值

let s = new Set(["Bill","Lucy","David"]); for(let i of s.values())

console.log(i);

// Bill

// Lucy

// David

 

ent ries()方法同时遍历集合的键与值

 

let s = new Set(["Bill","Lucy","David"]); for(let i of s.entries())

console.log(i);

// [ ‘Bill‘, ‘Bill‘ ]

// [ ‘Lucy‘, ‘Lucy‘ ]

// [ ‘David‘, ‘David‘ ]

 

集合转数组

 

集合转为数组，最快的方法就是使用前面所讲过的扩展运算符，如下:

let s1 = new Set([1,2,3]);

console.log(s1);//Set 1, 2, 3

let arr = [...s1]; console.log(arr);//[ 1, 2, 3 ]

除此之外，我们还可以使用Arra y对象所提供的from。方法来进行转换

let s1 = new Set([1,2,3]); console.log(s1);//Set 1, 2, 3

let arr = Array.from(s1); console.log(arr);//[ 1, 2, 3 ]

前面我们有提到过，Set对象里面是不能够存放相同的元素的，利用这个特性，我们可以快速的 为数组去重，如下：

let arr = [1,2,2,3,4,3,1,6,7,3,5,7];

let s1 = new Set(arr);

let arr2 = [...s1]; console.log(arr2);//[ 1, 2, 3, 4, 6, 7, 5 ]

 

弱集合(扩展)

 

当对象添加到集合中时，只要集合存在，它们就一直存储在集合。即使对象的引用被删除了也依 然如此，我们来看下面的这个例子：

let arr = [1,2,3];

let s = new Set(arr);

arr = null;//删除arr数组的指向

console.log(s);//Set 1, 2, 3 数组依然存在于集合中 console.log(arr);//null

 

映射

 

映射(Map)也是ES6规范中引入的一种数据结构。

使用new关键字与Map()构造函数，就可以创建一个空的m ap对象。如果要向Map映射中添加 新的元素，可以调用set()方法并分别传入键名和对应值作为两个参数。如果要从集合中获取 信息，可以调用get()方法。

let m = new Map();

m.set("name","xiejie");

m.set("age",18);

console.log(m);

//Map ‘name‘ => ‘xiejie‘, ‘age‘ => 18

console.log(m.get("name"));

//xiejie

在对象中，无法用对象作为对象属性的键名。但是在Map映射中，却可以这样做，可以这么说， 在Map映射里面可以使用任意数据类型来作为键。

let m = new Map();

m.set(,"xiejie"); m.set([1,2,3],18);

m.set(3581,18);

console.log(m);

//Map => ‘xiejie‘, [ 1, 2, 3 ] => 18, 3581 => 18

 

传入数组来初始化Map映射 可以向Map构造函数传入一个数组来初始化Map映射，这一点同样与Set集合相似。数组中的每 个元素都是一个子数组，子数组中包含一个键值对的键名与值两个元素。因此，整个Map映射中 包含的全是这样的两个元素的二维数组

let arr = [["name","xiejie"],["age",18]];

let m = new Map(arr);

console.log(m);

//Map ‘name‘ => ‘xiejie‘, ‘age‘ => 18

 

映射相关属性和方法

 

在设计语言新标准时，委员会为Map映射与Set集合设计了如下3个通用的方法 has(key):检测指定的键名在Map映射中是否已经存在 delete(key):从Map映射中移除指定键名及其对应的值

clear。：移除M ap映射中的所有键值对

Map映射同样支持size属性，其代表当前集合中包含的键值对数量

let arr = [["name","xiejie"],["age",18]]; let m = new Map(arr);

console.log(m);//Map ‘name‘ => ‘xiejie‘, ‘age‘ => 18 console.log(m.size);//2 console.log(m.has("name"));//true console.log(m.get("name"));//xiejie m.delete("name");

console.log(m);//Map ‘age‘ => 18 m.clear();

console.log(m);//Map

 

映射的遍历

 

与集合一样，映射也是可以枚举的，所以可以用与集合类似的方式进行遍历。 使用for-of来遍历映射

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m)

console.log(i);

// [ ‘name‘, ‘xiejie‘ ]// [ ‘age‘, 18 ]

keys()方法遍历映射的键

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.keys())

console.log(i);

// name

// age

values()方法遍历映射的值

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.values())

console.log(i);

// xiejie

// 18

ent ries()方法同时遍历映射的键与值

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.entries())

console.log(i);

// [ ‘name‘, ‘xiejie‘ ]

// [ ‘age‘, 18 ]

 

映射转为数组

 

Map结构转为数组结构，比较快速的方法还是使用前面介绍过的扩展运算符...。

let arr = [["name","xiejie"],["age",18]];

let m = new Map(arr);

console.log([...m.keys()]);//[ ‘name‘, ‘age‘ ]

console.log([...m.values()]);//[ ‘xiejie‘, 18 ]

console.log([...m.entries()]);//[ [ ‘name‘, ‘xiejie‘ ], [ ‘age‘, 18 ] ]

console.log([...m]);//[ [ ‘name‘, ‘xiejie‘ ], [ ‘age‘, 18 ] ] 或者使用Array对象的from。方法

let arr = [["name","xiejie"],["age",18]];

let m = new Map(arr);

console.log(Array.from(m));

//[ [ ‘name‘, ‘xiejie‘ ], [ ‘age‘, 18 ] ]