欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6看完必会第十一章------ Map和Set数据结构 (可私信解惑,不会来捶我)

程序员文章站 2022-07-16 21:57:33
...
  • Set 数据结构

ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set本身是一个构造函数,用来生成Set数据结构。

Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化。

var set = new Set([1, 2, 3, 3, 4, 4]);
set        //  Set { 1, 2, 3, 4 }       

上面代码可以发现,定义的set对象会自己去除重复的值。Set表示数据的类型是Set。

因为Set数据值的唯一性,我们可以用它来对数组进行去重。代码如下

var arr=[1, 2, 2, 3, 4, 4];        // 定义一个数组
var set = new Set(arr);  

//使用扩展运算符Set结构转为数组
var  newArr=[...set];  
// 或者使用Array.from方法将Set结构转为数组
var  newArr=Array.from(set);

newArr        //  [1, 2, 3, 4]

向Set加入值的时候,不会发生类型转换,所以5和"5"是两个不同的值。

var  newArr=new Set([5,"5"])
newArr    // Set { 5, '5' }

Set内部判断两个值是否不同,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。

另外,Set中两个对象总是不相等的,即便它们是空对象。

var  newArr=new Set([{},{}])
newArr    //  Set { {}, {} }
  • Set实例的属性和方法

Set结构的实例有以下属性。

  • Set.prototype.constructor:构造函数,默认就是Set函数。
  • Set.prototype.size:返回Set实例的成员总数。

 

Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

  • add(value):添加某个值,返回Set结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。

 

使用方法如下

var s=new Set();        // 定义s 数据类型为Set
s.add(1).add(2).add(2);        // 使用add方法添加值,重复值不会被添加
s.size             // 2      注意2被加入了两次,但是去重了一个,所以s的成员数是2
s.has(1)         // true       使用has方法判断是否有该值,有所以返回true
s.has(2)         // true
s.has(3)         // false        没有该值返回false
s.delete(2);        // 使用delete删除该值
s.has(2)        // false    因为2被上面删除了,所以没该值,返回false

 

  • 遍历操作

Set结构的实例有四个遍历方法,可以用于遍历成员。Set的遍历顺序就是插入顺序。

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器,可以省略。
  • entries():返回键值对的遍历器。
  • forEach():使用回调函数遍历每个成员,它的参数是函数。
var set = new Set(['red', 'green', 'blue']);        // 定义一个Set对象
for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
set.forEach(function(key,value){

    console.log(key,value)

})

// red red

// green green

// blue blue
  • Map结构的目的和基本用法

JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。

为了解决这个问题,ES6提供了Map数据结构。

它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

var m = new Map();
var o = {p: 'welcome to w3cschool'};    // 使用对象做键
m.set(o, 'content')
m.get(o)     // "content"
m.has(o)     // true
m.delete(o)     // true
m.has(o)     // false

上面代码使用set方法,将对象o当作m的一个键,然后又使用get方法读取这个键,接着使用delete方法删除了这个键。

 

作为构造函数,Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。代码如下:

var map = new Map([
  ['name', 'jack'],
  ['age', 12]
]);
map.size 	    // 2
map.has('name') 	    // true
map.get('name')     	// "jack"
map.has('age')     	// true
map.get('age') 	    // "12"

如果对同一个键多次赋值,后面的值将覆盖前面的值。

map .set(1, 'aaa') .set(1, 'bbb');        // 结果是 bbb的值

 

  • 实例的属性和操作方法

Map结构的实例属性和操作方法如下:

(1)size属性

    size属性返回Map结构的成员总数。

(2)set(key, value)

    set方法设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。

(3)get(key)

    get方法读取key对应的键值,如果找不到key,返回undefined。

(4)has(key)

    has方法返回一个布尔值,表示某个键是否在Map数据结构中。

(5)delete(key)

    delete方法删除某个键,返回true。如果删除失败,返回false。

(6)clear()

    clear方法清除所有成员,没有返回值。

使用方法如下:

var map=new Map();

map.set('foo', true);    	// 设置
map.size;     // 1
map.get('foo');     // true
map.has('foo')	    	// true
map.delete('foo');       // 删除map对象的foo键,删除后使用has返回false
map.clear()        // 删除map对象所有的键
  • Map其他方法

Map原生提供三个遍历器生成函数和一个遍历方法

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回所有成员的遍历器。
  • forEach():遍历Map的所有成员。

遍历方法和Set的差不多。

 

数据结构的互相转换

(1)Map转为数组

前面已经提过,Map转为数组最方便的方法,就是使用扩展运算符(...)。

[...myMap]        //  myMap表示Map数据

(2)数组转为Map

将数组转入Map构造函数,就可以转为Map。

new Map(数组)

(3)Map转为对象

如果所有Map的键都是字符串,它可以转为对象。

// Map转对象函数
function cMapToObj(strMap) {

  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }

  return obj;
}

cMapToObj(myMap)

(4)对象转为Map

function objToMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}
objToMap(对象)

5)Map转为JSON

Map转为JSON要区分两种情况。一种情况是Map的键名都是字符串,这时可以选择转为对象JSON。

JSON.stringify(cMapToObj(myMap))    // cMapToObj是上面定义的函数

另一种情况是Map的键名有非字符串,这时可以选择转为数组JSON。

JSON.stringify([...myMap])

(6)JSON转为Map

JSON转为Map,正常情况下,所有键名都是字符串。

objToMap(JSON.parse( json数据 ))        // objToMap是上面定义的函数

第十二章:ES6看完必会第十二章------ Proxy和Reflect (可私信解惑,不会来捶我)