ES6中的 Map对象

目录

1.Map()

1.Map和Object的区别

Map对象存数据用 set()

Map对象取数据用 get() 

Map对象通过delete()来删除数据

Map对象通过clear()来清空数据

Map对象数据的遍历

 Map对象特性：

 Map对象与其它数据进行转换。。。

Map做个购物车（现在很困难，以后学深了再回来写）

---

浏览器提供的引用数据（内置方法）：document,window,Image

ES5中：JS语法提供的内置方法(前后端都能用)：Data  Math  Array  RegExp(正则表达式) Object等

ES6中：出的两个新的引用数据（数据容器）： Map  和 Set

1.Map()

利用Map()  生成的对象保存键值对，键（属性名）任何值类型都可以。

利用Object() 生成的对象保存键值对，属性名（键）只能是string类型，或者Symbol类型

1.Map和Object的区别

1.一个 Object 生成的对象的键只能是字符串类型或者 Symbol类型，但一个 Map生成对象 的键可以是任意值。

对于 一个 Object 生成的对象的键只能是字符串或者 Symbols的理解去到 以前写的这部分去看，这里就不在详讲了：http://t.csdn.cn/6LzF3

但一个 Map生成对象的键(属性名）可以是任意值：

eg：ES5中，通过 var obj = new Object();或者通过对象字面量 var obj = {}生成的对象，其属性名，只能是string和Symbol(ES6中)，其它类型都会报错或者被浏览器转成string和Symbol类型(但不能总是故意让浏览器帮我们转换，万一浏览器没找到问题，就会留下隐患)

<script>
    //ES5中，错误写法
    var obj = {
        0:100,
        length:2,
        [10,20,30]:90    
    }
</script>

例如上面这些就是错误写法：ES5中对象属性名还能是一个数组？字符串不加引号叫字符串length？数字你都给我跑来当属性名，是欺负我浏览器收拾不了你？所以上面这样写不行！！ 

注意点：let obj = Map();生成的对象 没有语法糖的简便写法，只能用let obj = Map();

不像let obj = new Object();有语法糖的简便写法  let obj = {}

但是通过let obj = new Map();生成的对象的属性名可以是任意类型的数据：

Map对象存数据用 set()

其给Map对象存数据，不是用 obj["x"] = 1；这种形式，是用的内置函数 set(键，值); 

<script>
    var m1 = new Map();
    m1.set('age',20); //给Map对象存值  属性名为字符串类型
    m1.set(21,18);    //给Map对象存值  属性名为数字类型
    m1.set([100,200],200);给Map对象存值  属性名为数组类型
    console.log(m1); //Map(3) {'age' => 20, 21 => 18, Array(2) => 200}
 </script>

分析：m1结果： Map(3) {'age' => 20, 21 => 18, Array(2) => 200} 这是一个对象，但是又与普通对象不同，普通对象{age: 20, B: false}，键值对之间是用冒号连起来，而Map对象它是用箭头符号 =>连接键值对。

分析：[[Entries]]  和 [[Prototype]] 这种属性，不能用JS来访问，要用底层API来访问,但Map对象的size属性确可以用JS访问。但如果要访问[[Entries]]，就用提供的API来访问，用get(),它里面的参数就是用set(键，值)存数据时的 键值

存数据也可以这样写：

<script>
     //Map()括号里面的参数就是 [[Entries]]里面的的值 类似一个二维数组
     var m2 = new Map([['age',20],[21,18],[[100,200],200],[null,1]]);
     console.log(m2);//Map(4) {'age' => 20, 21 => 18, Array(2) => 200, null => 1}
 </script>

分析： [['age',20],[21,18],[[100,200],200],[null,1]] 二维数组中，每一一个元素（每一个小数组）含义是：eg：['age',20]代表 Map对象的一个属性名(键)为 age,其值为20.其它小数组同理。 Map对象的属性名可以为任意类型数据。所以小数组[[100,200],200]代表 Map对象的一个属性名(键)为[100,200],其值为20。

Map对象取数据用 get() 

要访问[[Entries]]，就用提供的API来访问，用get(),它里面的参数就是用set(键，值)存数据时的 键值.

size属性的值代表键值对的个数

    <script>
        var m1 = new Map();
        //set() 给map对象存值
        m1.set('age',20); //给Map对象存值  属性名为字符串类型
        m1.set(21,18);    //给Map对象存值  属性名为数字类型
        m1.set([100,200],200);给Map对象存值  属性名为数组类型
        console.log(m1); //Map(3) {'age' => 20, 21 => 18, Array(2) => 200}
        
        //Map对象的size属性确可以用JS访问  size属性的值代表键值对的个数
        console.log(m1.size);    //3

        //get() 访问 Map对象
        console.log(m1.get('age'));    //20
        console.log(m1.get(21));       //18
        console.log(m1.get([100,200]));//undefined
     </script>

问题：为什么 console.log(m1.get([100,200])); 结果是 undefined 而不是 200呢？

这就是引用数据与基本数据的区别，引用数据 ，比如说：两个长得一样的 数组 [100,200] 和[100,200] 它们都因为内存空间不同而不同。所以，一般涉及引用数据，用一个变量保存起来，再进行操作

<script>
    console.log([100,200] == [100,200]);  //false
    var m1 = new Map();
    var a = [100,200];
    m1.set(a,200);给Map对象存值  属性名为数组类型
    console.log(m1.get(a));//200
 </script>

这就能理解了为什么  console.log(m1.get([100,200]));结果为undefined了，因为key值[100,200]都不是同一个.

再来一种特殊情况：

<script>
    console.log([100,200] == [100,200]);  //false
    var m1 = new Map();
    var a = [100,200];
    m1.set(a,200);     //后面get()能否取到set()存进去的200？
    a.push(200);    
    console.log(m1.get(a)); //200
 </script>

分析： a.push(200);   这里 数组a存的数据从 [100,200] 变为 [100,200,200] , console.log(m1.get(a));还能得到 200么？

答案是可以：a数组里面存的数据变了，但是a数组所在内存空间地址没有改变， console.log(m1.get(a)); 在意的是 内存空间，内存空间没变，所以也能得到200 

Map对象通过delete()来删除数据

 delete()返回值是false和true，删除成功返回true，删除失败为false

Map对象通过clear()来清空数据

Map对象数据的遍历

假如Map对象不知道里面的成员，不知道键key是什么，怎么取出来？把数据容器Map对象里面的数据全部取出来用什么方式？----- 遍历

所以Map对象数据如何遍历？

1.调用forEach(),注意，这里的forEach()并不是数组的内置方法forEach(),只是模拟了一个类似数组的forEach()方法(Map对象原型链上也有forEach()方法)，也就是说，Map对象，调用forEach()可以实现像数组调用其原型链上的方法forEach()一样，遍历其内部的所有数据。

2.for ... of...

    <script>
        var m1 = new Map();
        m1.set(1,200);
        m1.set("hello",300);
        m1.set(null,400);
        // 遍历Map对象，调用forEach()
        m1.forEach(function(el){     
            console.log(el);    //200  300  400
        });
     </script>

 Map对象特性：

1.只有对同一个对象（同一个引用地址）的引用，Map 结构才将其视为同一个键。同样形式的两个实例，引用空间不同，在 Map 结构中被视为两个键。eg：[100,200]和[100,200]就是两个不同的键（引用地址不同）

2.如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等(===)，Map 将其视为一个键：
比如:

0和-0就是一个键；
布尔值true和字符串"true"则是两个不同的键；
undefined和null也是两个不同的键；
虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

3.Map特点：有序、键值对（键可以是任意类型）、键名不能重复（如果重复，那么覆盖）

<script>
    console.log(-0 === +0);  //true
    let map = new Map();

    map.set(-0, 123);
    console.log(map.get(+0)); // 123
    
    map.set(true, 1);
    map.set('true', 2);
    console.log(map.get(true)); // 1
    
    map.set(undefined, 3);
    map.set(null, 4);
    console.log(map.get(undefined)); // 3
    
    map.set(NaN, 123);
    console.log(map.get(NaN)); // 123
 </script>

 Map对象与其它数据进行转换。。。

<script>
        var m1 = new Map();
        //set() 给map对象存值
        m1.set('age',20); //给Map对象存值  属性名为字符串类型
        m1.set(21,18);    //给Map对象存值  属性名为数字类型
        m1.set([100,200],200);给Map对象存值  属性名为数组类型
        console.log(m1); //Map(3) {'age' => 20, 21 => 18, Array(2) => 200}

        //Map()括号里面的参数就是 [[Entries]]里面的的值 类似一个二维数组
        var m2 = new Map([['age',20],[21,18],[[100,200],200]]);
        console.log(m2);
 </script>

Map做个购物车（现在很困难，以后学深了再回来写）