JS新增对象Map和Set

参考个人博客:http://www.zhuzhuman.com/nav-1/type-1/article/22.html

JS新增对象Map、Set

Map

Map映射是ES6里面新增的一个对象,是一组键值对的结构,具有极快的查找速度。

<script type="text/javascript">
    // 初始化Map需要一个二维数组,或者直接初始化一个空Map
    var m1 = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]);
    var m11 = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]);
    var m2 = new Map();
	
    console.log(m1);			// 返回Map  {"a" => "a1", "b" => "b2", "c" => "c3"}
    console.log(typeof(m1));	// object, Map仍属于 object
    console.log(m1 == m11)		// flase  虽然两个Map里面的值一样,但是是属于不同的object

    // 1. size属性,返回 Map的元素数
    console.log(m1.size);		// 3

    // 2. keys()	获取Map的所有key
    console.log(m1.keys());		// 返回 MapIterator {"a", "b", "c"}

    // 3. values()	获取Map的所有value
    console.log(m1.values());	// 返回 MapIterator {"a1", "b2", "c3"}

    // 4. entries()	获取Map所有成员  
    console.log(m1.entries());	// 返回 MapIterator {"a" => "a1", "b" => "b2", "c" => "c3"}

    // 5. forEach()	循环操作映射元素
    m1.forEach(function(value, key, map) {
  	  // value:  key对应的值,  
	  // key: Map的key,(map参数已省略情况下,key可省略)
	  // map:  Map本身,(该参数是可省略参数)
	  console.log(value);			// key对应的值   a1  b2  c3
	  console.log(key);			// key 			a   b   c
	  console.log(map);			// Map本身      Map Map Map
    });

    // 6. set()		给Map添加数据,  返回添加后的Map
    console.log(m2.set('a', 1));	// 返回Map  {"a" => 1}
    console.log(m2.set('b', 2));	// {"a" => 1, "b" => 2}
    console.log(m2.set('a', 11));	// {"a" => 11, "b" => 2} 给已存在的键赋值会覆盖掉之前的值,  

    // 7. has()		检测是否存在某个key, 返回布尔值,有:true; 没有:false
    console.log(m2.has('a'));		// true
    console.log(m2.has('c'));		// false

    // 8. get()		获取某个key的值,返回key对应的值,没有则返回undefined	
    console.log(m2.get('a')); 		// 11
    console.log(m2.get('c'));		// undefined

    // 9. delete()	删除某个key及其对应的value,返回布尔值,成功:true; 失败:false
    console.log(m2.delete('b'));	// true
    console.log(m2.delete('d'));	// false
	
    console.log(m2.get('b'));		// undefined, 因为b已经删除

    // 10. clear()	清除所有的值,返回 undefined
    console.log(m1.clear());		// undefined
    console.log(m1);				// {} 
</script>

Set

Set也是ES6新增的对象,Set是一组key的集合,但不存储value, 而且key不重复,可自动排重

<script type="text/javascript">
    // 初始化Map需要提供一个Array作为输入,或者直接创建一个空Set
    var s1 = new Set(['a', 'b', 'c']);
    var s11 = new Set(['a', 'b', 'c']);
    var s2 = new Set(['a', 'a', 'b', 'b', 'c', 'c']);
    var s3 = new Set();
	
    console.log(s1);				// 返回 Set(3) {"a", "b", "c"}
    console.log(s2);				// 返回 Set(3) {"a", "b", "c"}
    console.log(typeof(s1));		// object
    console.log(s1 == s11);		// false
    console.log(s1 == s2);		// false
	
    // 1. size属性  返回Set的元素数
    console.log(s1.size);			// 3
	
    // 2. keys() 获取Set的所有key	
    console.log(s1.keys());		// 返回 SetIterator {"a", "b", "c"}
	
    // 3. values()  获取Set的值,返回结果和 keys()一样
    console.log(s1.values());		// 返回 SetIterator {"a", "b", "c"}
	
    // 4. entries() 获取Set所有成员,返回同keys()
    console.log(s1.entries());	// 返回 SetIterator {"a", "b", "c"}
	
    // 5. forEach() 循环操作集合元素	
    s1.forEach(function(v, k, s){	// v、k是集合的键,s是集合本身
	  console.log(v);				//  a   b   c
	  console.log(k);				//  a   b   c
	  console.log(s);				// Set Set Set
    });
    // 6. add()   给集合添加数据	返回添加后的Set
    console.log(s3.add('aa'));		// Set(1) {"aa"}
    console.log(s3.add('bb'));		// Set(2) {"aa", "bb"}
    console.log(s3.add('aa'));		// Set(2) {"aa", "bb"}	添加重复的值,会被排重掉,
	
    // 7. has() 查询集合中是否包含某个元素  返回布尔值 有:true; 没有:false
    console.log(s3.has('aa'));		// true
    console.log(s3.has('ff'));		// false	

    // 8. delete() 删除集合中的某个元素  返回布尔值
    console.log(s3.delete('aa'));	// true
    console.log(s3.delete('ee'));	// false

    console.log(s3);				// Set(1) {"bb"}
	
    // 9. clear()  清除集合的所有值	返回undefined
    console.log(s1.clear());		// undefined
	
    console.log(s1);				// Set(0) {}
</script>
  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值