es6 基础语法—set和map

原创 2018年04月16日 17:48:05

1、set 数据集合
这里写图片描述

//1、创建一个集合  
let set = new Set(['张三','李四','王五']);  
console.log(set);  

//2、一个属性  
//size属性求集合长度  
console.log(set.size);  

//3、四个方法  
//add  
console.log(set.add('henry').add('buck'));  

//delete  
set.delete('张三');  
console.log(set);  

//has 判断是否拥有某个元素  
console.log(set.has('henry'));  

//clear 清除集合里所有东西  
set.clear();  
console.log(set);

运行结果:
这里写图片描述

//keys values  
console.log(set.keys());  
console.log(set.values()); 

这里写图片描述

2、map 数据集合
这里写图片描述
① 对象“键”的局限性

<script>             
     let obj1 = {a:1}, obj2 = {b:2}, obj = {};  
     //给boj空对象添加东西  
     obj.name = "henry";  
     obj[obj1] = "buky";  
     console.log(obj);             
 </script>  

结果:
这里写图片描述

    //接着给obj对象添加东西  
    obj[obj2] = "jenny";  
    console.log(obj); 

结果覆盖了之前添加的东西:
这里写图片描述
这是因为对象“键”的是只局限于字符串的,无论键传入什么类型,都会通过 toString()方法转为字符串。

<script>
     // 验证:  
     console.log(obj1.toString());  
     console.log(obj2.toString());  
     console.log(obj1.toString() === obj2.toString());  
</script>

运行:
这里写图片描述
② map “键”的多样性

     //1、创建map  
     const map = new Map([  
                     ['name','henry'],  
                     ['age',25],  
                     ['sex','男']  
        ])  
    console.log(map); 

运行:
这里写图片描述
验证 map “键”的多样性:

        //1、创建map  
        let obj1 = {a:1}, obj2 = {b:2}  
        const map = new Map([  
            ['name','henry'],  
            ['age',25],  
            ['sex','男'],  
            [obj1,'map键可以是对象'],  
            [obj2,'因此不会覆盖上一个数据'],  
            [[1,2],'map键还可以是数组']  
        ])  
        console.log(map); 

运行:
这里写图片描述
因此, map 是一种更加完善的数据结构。

③ map的属性

size计算长度

console.log(map.size);  

这里写图片描述
去重:

let obj1 = {a:1}, obj2 = {b:2}  
        const map = new Map([  
            ['name','henry'],  
            ['age',25],  
            ['sex','男'],  
            [obj1,'map键可以是对象'],  
            [obj2,'因此不会覆盖上一个数据'],  
            [[1,2],'map键还可以是数组'],  
            ['name','buck'],  
            ['age',28]  
        ])  
        console.log(map);  
        console.log(map.size);  

运行:
这里写图片描述
④常用方法:

set设置、get获取:

let obj1 = {a:1}, obj2 = {b:2}  
    const map = new Map([  
        ['name','henry'],  
        ['age',25],  
        ['sex','男'],  
        [obj1,'map键可以是对象'],  
        [obj2,'因此不会覆盖上一个数据'],  
        [[1,2],'map键还可以是数组'],  
    ]);   
//set设置、get获取  
    map.set("friends",['eric','alice']).set(['foods'],'chocolete');  
    console.log(map);  
    console.log(map.get('name'));  
    console.log(map.get(obj1));   

运行:
这里写图片描述
delete、has、clear、keys(()、values()、entries()

        //delete  
        map.<span style="background-color:rgb(255,204,204);">delete(obj1)</span>;  
        console.log(map);  

这里写图片描述

        //has  
        console.log(map.has(obj2)); 

运行:
true

    //keys()、values()、entries()  
    console.log(map.keys());  
    console.log(map.values());  
    console.log(map.entries());  

这里写图片描述
这里写图片描述
这里写图片描述

        //clear  
        map.clear();  
        console.log(map);  

这里写图片描述
⑤遍历:

//遍历  
map.forEach(function(value,index){  
    console.log(index + ':' +value);  
})  

运行:
这里写图片描述
⑥注意事项

//注意事项  
map.set({},'我和你地址不一样');  
map.set({},'我和你地址也不一样,所以我也能被添加进集合里');  
console.log(map);  

这里写图片描述

版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/miss_zxm/article/details/79963912

ES6/7 + Babel 编译器

ES6/7 + Babel 编辑器
  • 2017年03月24日 15:40

ES6入门——Set和Map数据结构

SetES6提供了新的数据结构Set。类似于数组,只不过其成员值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成Set数据结构。 var s = new Set();// 通过add...
  • u014695532
  • u014695532
  • 2016-07-03 14:05:25
  • 6756

整理ES6中的Set和Map方法

本文参考阮一峰先生的《ECMAScript 6 入门》一书的set和map一章。 1. set ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set 本身...
  • ChauncyWu
  • ChauncyWu
  • 2017-06-15 21:03:09
  • 5215

ES6 MAP,SET性能测试

最近有空,为了接近标准,想用 ES6的MAP,SET替换现有代码,在经过测试和资料查询后断绝了念头。  MAP,SET 的性能在大多数情况下远逊于用 Object和Array实现的相关功能。  其它人...
  • Lava_sdb
  • Lava_sdb
  • 2017-06-12 09:14:00
  • 510

ES6新增数据类型Map、Set。

首先,先确定你的浏览器是否支持ECMAscript6,方法是执行以下代码: 'use strict'; var m = new Map(); var s = new Set(); alert('你的...
  • Timpor
  • Timpor
  • 2016-12-28 15:48:11
  • 2398

ES6标准Map和Set的用法

js默认的对象表达方式是{}可以视为其他语言中的 Map 和 Dictionary 的数据结构;即一组键值对key - value;(键值对)js有个问题:对象表达方式{}中的键 key 必须是字符串...
  • Neokekeke
  • Neokekeke
  • 2018-01-11 15:15:22
  • 91

ES6学习笔记(六)--set,map数据结构和for...of遍历

Set新的数据解构,成员值是唯一的//不能添加相同的值 var s = new Set();[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));for (let i of...
  • SirM2z
  • SirM2z
  • 2016-06-01 17:18:01
  • 3906

es6常见属性Set和Map数据结构

SetES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。const s = new Set();[2, 3...
  • qq_28008615
  • qq_28008615
  • 2017-04-11 15:33:21
  • 264

ES6的Set和Map

Set本身是一个构造函数 let set = new Set(); Set函数可以接受一个数组作为参数,用来初始化; 数组去重: a. let newArr = [...new Set([1,2,2...
  • qq_16515187
  • qq_16515187
  • 2017-10-28 17:33:45
  • 73
收藏助手
不良信息举报
您举报文章:es6 基础语法—set和map
举报原因:
原因补充:

(最多只允许输入30个字)