es6学习之map和set

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了es6学习之map和set脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Map和Set

Map 定义:一组键值对的集合

它是一组键值对的数据结构,由于之前javascript的键(key)必须是字符串。为了使键可以是多种类型的于是在最新的es6中引入了map这种数据结构,这样可以加快查询速度,类似于查字典

方法和属性

VAR m = map() //空map
m.set('学生年龄',6 ) //添加一对新的key-value
m.has('学生年龄') //是否存在key学生年龄 true
m.get('学生年龄') //拿到值 6
m.delete('学生年龄') // 删除key学生年龄
m.clear()    //清除所有成员 没有返回值
m.size() // 返回map结构的成员总数 1

需要注意的是如果多次对相同key值插入value,前一次的value值会被覆盖

map中的键实际是对内存地址的引用,举例说明

var k1 = 222var k2 = 222;
map
.set(k1, 123);
.set(k2, 222);

map.get(k1); // 123    
map.get(k2); // 222

因此如果键值是对象的话就算值相同也是两个不同的键,如果是简单类型的话(number,boolean,string),只要值相等,就是同一个键,0和-0也被map视为同一键,NaN也是同一键

遍历map的方法

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

map遍历的顺序就是插入的顺序

使用实例

var m = new map(
    ['F', 'no'],
    ['t', 'yes']
);

for(let key of map.keys()) {
    console.log(key);
}
// f,t

for(let key of map.values()) {
    console.log(key);
}
// no, yes

for(let key of map) {
    console.log(key[0], key[1]);
}
// f no
// t yes

map.forEach( res => {
    console.log(res[0], res[1]);
});
// f no
// t yes

forEach方法还可以接受第二个参数,用来绑定this

类型转换

运用扩展运算符可以很方便的转换

var m = map;
m.set('a', 1);
m.set('b', 2);

[...map];
// [['a',1], ['b',2]];
new Map([[true, 7], [{foo: 3}, ['abc']]])
// Map {true => 7, Object {foo: 3} => ['abc']}
  • [ ] map转化为对象

如果键都是字符串

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

let map = new Map().set('yes',111);
mapToObj(map);
// {yes: 111};
  • [ ] 对象转为map
function objToMap(obj) {
    let map = new Map();
    for(let k of obj.keys()) {
        map.set(k.obj[k]);
    }
    return map;
}

objToStrMap({yes: true, no: false});
// [ [ 'yes', true ], [ 'no', false ] ]
  • [ ] map转化为json

如果map键名都是字符串的话,可以转化为对象json

function mapToJson(strMap) {
    return JSON.stringify(mapToObj(strMap)); // map转化为对象在转化为JSON    
}

let map = new Map().set('yes', 111);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

如果键名时非字符串的话,转化为数组json

function mapToJson1(strMap) {
    return JSON.stringify([...strMap]); //map转化为数组在转化为数组json
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

json转化为map同理只是return的是JSON.parse()方法 也分为键名是字符串和非字符串

Set

特点

类型于数组。但是它的成员值都是唯一的,可以用来做数组去重

构造函数

var a = new Set([1,2,2,3,4,555,5,5,6]);
[...a];
// [1,2,3,4,555,6];

这是一个数组去重的例子在set内部如果有两个NAN会去掉一个

方法

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

数组去重的两种方法

var arr = [1,2,3,4,4,5];
var aSet = new Set(arr);
[...aSet];
//[1,2,3,4,5] 

var bSet = new Set(arr);
arr = Array.From(bSet); // [1,2,3,4,5]

由于set的keys()和values()完全一样所以无法通过set[xxx]的方式找到其内部的值,

遍历set的方法

  • keys(): 返回键名和遍历器
  • values(): 返回键值和遍历器
  • entires(): 返回键值对的遍历器
  • forEach(): 使用回调函数遍历每个成员
  let set = new Set(['red', 'green', 'blue']);
  
  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"]

forEach对空数组不会执行回调函数

脚本宝典总结

以上是脚本宝典为你收集整理的es6学习之map和set全部内容,希望文章能够帮你解决es6学习之map和set所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。