ES6之set与map

一丶Set

1.基本概念和用法

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

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

eg:

const set=new Set([1,2,3,4,5,5,5]);

console.log(set);

console.log(set.size);

控制台输出如图所示


1.jpg

向Set加入值时不会发生类型转换,所以5和"5"是两个不同的值。Set内部判断两个值是否相同时使用的算法叫做“Same-value equality”,它类似于精确相等运算符(===),主要的区别是NaN本身,而精确相等运算符

认为NaN不等于自身,但是在Set中,它认为两个NaN是相等的

eg:

let set=new Set();

let a=NaN;

let b=NaN;

if (a===b){

    console.log(true);

}

else {

    console.log(false);

}

set.add(a).add(b);

console.log(set);

console.log(set.size);

控制台输出如图所示


2.jpg

另外,两个对象总是不相等的,

let set=new Set();

set.add({})

console.log(set.size);

set.add({});

console.log(set.size);

控制台输出如图


3.jpg

2.属性和方法

属性:

1.Set.prototype.constructor:构造函数,默认就是Set函数

2.Set.prototype.size:返回Set实例的成员总数

eg:

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

console.log(set.size);

console.log(set.constructor);

控制台如下图

4.jpg

方法:

1.add():添加某个值

2.delete():删除某个值,返回一个布尔值,表示删除是否成功

3.has():返回一个布尔值,表示参数是否是Set结构的成员

4.clear():清除所有成员,没有返回值

3.遍历操作

Set结构的实例有四个遍历方法,可用于遍历成员

1.keys():返回键名的遍历器

2.values():返回键值的遍历器

3.entries():返回键值对的遍历器

4.foreach():使用回调函数遍历每个成员

keys(),values(),entries()返回的都是遍历器对象。Set结构没有键名,只有键值,所以keys()和values()方法的行为完全一致

eg:

let set=new Set(["red","green","blue"]);

for (let value of set.keys()){

    console.log(value);

}

for (let value of set.values()){

    console.log(value);

}

for (let value of set.entries()){

    console.log(value);

}

控制台输出如下图:


5.jpg

foreach方法:可以对每个成员都执行某种操作

eg:let set=new Set([1,2,3]);

console.log(set);

set.forEach(function (value, keys) {

    console.log(value * 2);

})   //控制台输出2,4,6;

二丶Map

1.基本概念和用法

javascript的对象(Object)本质上是键值对的集合(Hash)结构,但是只能用字符串作为键。这给它的使用带来了很大的限制。为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是键的范围不限于字符串,各种类型的值都可以当作键。也就是说,Object提供了“字符串——值”的对应,Map结构提供了“值——值”的对应,是一种更加完善的Hash结构的实现。

const map=new Map([

    ['name','张三'],

    ['title','Author']

])

console.log(map);

console.log(map.size);

控制台输出如下


6.jpg

Map的键实际上是和内存地址绑定的,只要内存地址不一样,就视为两个键。如果Map的键是一个简单类型的值(数字,字符串,布尔值),则只要两个值严格相等,Map就视为其为一个键,包括0和-0,还有NaN.

2.属性和方法

属性:size属性,返回map结构的成员总数

方法:

1.set(key,value): 此方法可以设置key所对应的键值,然后返回给整个Map结构。如果key已经有值,则键值会被更新,否则就生成新键

2.get(key):get方法可以读取key对应的键值,如果找不到key,则返回undefined。

3.has(key):has方法返回一个布尔值,表示某个键是否在Map数据结构中

4.delete(key):delete方法删除某个键,返回true,如果删除失败,则返回false

5.clear():clear方法清除所有成员,没有返回值。

3.遍历操作

大致和Set结构相同,Map原生提供了3个遍历器生成函数和1个遍历方法。

1.keys():返回键名的遍历器

2.values():返回键值的遍历器

3.entries():返回键值对的遍历器

4.foreach():遍历map的全部成员

const map=new Map([

    ['name','张三'],

    ['title','Author']

])

for (let key of map.keys()) {

    console.log(key);

}

for (let value of map.values()) {

    console.log(value);

}

for (let [key,value] of map.entries()) {

    console.log(key,value);

}

map.forEach(function (value, key) {

    console.log(key,value);

})

控制台结果如下(每两行分别为对应函数的输出)

7.jpg

4.与其他数据结构进行互相转换

1.Map转为数组

将Map转为数组的最方便方法就是使用拓展运算符(...)

eg:

const map=new Map([

    ['name','张三'],

    ['title','Author']

])

let arr=[...map];

console.log(arr);

控制台输出如下:


8.jpg

2.数组转为map

将数组传入Map的构造函数就可以转为Map

const map=new Map([

    ['name','张三'],

    ['title','Author']

])

控制台输出如下


9.jpg

3.Map转为对象

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

function strMapToObj(strMap) {

    let obj=Object.create(null);

    for (let [key,value] of strMap.entries()){

        obj[key]=value

    }

    return obj;

}

4.对象转为Map

function objToStrMap(obj) {

    let map=new Map();

    for (let k of obj){

        map.set(k,obj[k]);

}

    return map;

}

5.Map转JSON

Map转为JSON要区分两种情况

①Map的键名都是字符串,这时候可以选择转为对象JSON

let myMap=new Map().set('yes',true).set('no',false);

function strMapToJson(strMap) {

    return JSON.stringify(strMapToObj(strMap))           //strMapToObj在上面已经定义

}

console.log(strMapToJson(myMap));    //控制台输出{"yes":true,"no":false}

②Map的键名有非字符串

let myMap=new Map().set('yes',true).set({foo:3},false);

function mapToArryJson(map) {

    return JSON.stringify([...map]);

}

console.log(mapToArryJson(myMap));     //控制台输出[["yes",true],[{"foo":3},false]]

6.JSON转为Map

正常情况下,JSON中的所有键名都是字符串

function jsonToStrMap(jsonStr) {

    return objToStrMap(JSON.parse(jsonStr));

}

但是,有一种特殊情况:整个JSON就是一个数组,且每个数组成员本身又是一个具有两个成员的数组,这是后,它可以一一的转为Map

function jsonToMap(jsonstr) {

    return new Map(JSON.parse(jsonstr));

}

console.log(jsonToMap('[[true,7],[{"fool":1},["abc"]]]'));


10.jpg
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容