ES6 set 数据结构及拓展运算符及map集合

set 数据结构

set 数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数。

 // 去重
        var s = new Set([1, 2, 2, 3, 4, 4, 5, 6])
        console.log(s);
        //返回 Set(6) {1, 2, 3, 4, 5, …}
        // [[Entries]]
        // 0: 1
        // 1: 2
        // 2: 3
        // 3: 4
        // 4: 5
        // 5: 6
        // size: 6
        // [[Prototype]]: Set
 // 转成真的的数组
        console.log(Array.from(s));   // [1, 2, 3, 4, 5, 6]

属性和方法：

size:数据的长度

 // 获取set集合长度
        var s = new Set([1, 2, 2, 3, 4, 4, 5, 6])
        console.log(s.size);  //6

add():添加某个值，返回set结构本身，改变原数组

 // // 使用add方法添加值 返回set集合本身，改变原数组
        var s = new Set([1, 2, 2, 3, 4, 4, 5, 6])
        console.log(s.add(7));
        console.log(s);
       // 返回的都是
        // Set(6) {1, 2, 3, 4, 5, …}
        // [[Entries]]
        // 0: 1
        // 1: 2
        // 2: 3
        // 3: 4
        // 4: 5
        // 5: 6
        // 6: 7
        // size: 7
        // [[Prototype]]: Set

delete()删除某个值，返回一个布尔值，表示删除是否成功，改变原数组

 // delete 删除某个值返回布尔值,改变原数组
        var s = new Set([1, 2, 2, 3, 4, 4, 5, 6])
        console.log(s.delete(1)); // true
        console.log(s);
        //返回 Set(5) { 2, 3, 4, 5, …}
        // [[Entries]]
        // 0: 2
        // 1: 3
        // 2: 4
        // 3: 5
        // 4: 6
        // size: 5
        // [[Prototype]]: Set

has()查找某条数据，返回一个布尔值

// has 查找某个值，返回布尔值
        var s = new Set([1, 2, 2, 3, 4, 4, 5, 6])
        console.log(s.has(9)); //false

clear() 清除所有成员，没有返回值

 // clear 清除所有成员，没有返回值
        var s = new Set([1, 2, 2, 3, 4, 4, 5, 6])
        console.log(s.clear()); // undefined
        console.log(s); //Set(0) {size: 0}

        var obj = { name: "zhangsan", age: 30 };
        console.log(Object.keys(obj));// ['name', 'age']
        console.log(Object.values(obj));//  ['zhangsan', 30]
        console.log(Object.entries(obj));// [[name,zhangsan],[age,30] ]

解构赋值：

 数组的解构赋值

    数组中的值会自动解析到对应接收该值的变量中，数组的解构赋值要一一对应，如果有对应不上的就是undefined

 // 数组的解构赋值
        // 赋值和顺序有关
        let arr = ["前端", "后端", "大数据"]
        let [qianduan, houduan, dashuju] = arr
        console.log(qianduan, houduan, dashuju);
        // 前端 后端 大数据

对象的解构赋值

     对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值有他的位置决定的；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

 // 对象的解构赋值
        // 赋值和顺序无关，属性名和变量名是必须一致，否则返回undefined
        let obj = {
            name: "张三",
            age: 30,
            data: {
                msg: "成功",
                status: 200
            }
        }
        let { name, age, data: { msg, status } } = obj
        console.log(name, age, msg, status); // 张三 30 成功 200

给解构出来的变量修改名字

 let obj = {
            name: "张三",
            age: 30,
            data: {
                msg: "成功",
                status: 200
            }
        }
// 给解构出来的变量修改名字
        let { name: username, age: userage, data: { msg: usermsg, status: userstatus } } = obj
        console.log(username, userage, usermsg, userstatus);// 张三 30 成功 200

可以给解构出来的变量设置默认值

 ☆当对象里面的属性值是undefined,或者压根就没有这个属性，这时候就会给变量赋值成默认值

//可以给解构出来的变量设置默认值
        // ☆当对象里面的属性值是undefined,或者压根就没有这个属性，这时候就会给变量赋值成默认值
        let obj = {
            name: undefined,
            age: 30,
            data: {
                msg: "成功",
                status: 200
            }
        }
        let { name: username = "李四", age: userage, data: { msg: usermsg, status: userstatus } } = obj
        console.log(username, userage, usermsg, userstatus); // 李四 30 成功 200

拓展运算符：

1.利用es6 拓展运算符来实现字符串转数组

 var str = "abcdefg"
        // 字符串转数组
        console.log(str.split("")); // ['a', 'b', 'c', 'd', 'e', 'f', 'g']
        // 利用es6 拓展运算符来实现字符串转数组
        console.log([...str]); //['a', 'b', 'c', 'd', 'e', 'f', 'g']

2.利用es6 拓展运算符实现set集合转成真数组

不可以使用Array.prototype.slice.call(s) 把Set集合转数组，这种方式适合把函数中的参数集合（例：arguments）转成真正的数组

let arr = [1, 22, 22, 33, 3, 4, 44, 5]
        let s = new Set(arr)
        // 转化成真数组
        console.log(Array.from(s)); //[1, 22, 33, 3, 4, 44, 5]

        // 利用es6 拓展运算符实现set集合转成真数组
        let narr = [...s]
console.log(narr); // [1, 22, 33, 3, 4, 44, 5]
        // 不可以使用下面的方法 把Set集合转数组，这种方式适合把函数中的参数集合（例：arguments）转成真正的数组
        console.log(Array.prototype.slice.call(s)); // []

3.利用es6拓展运算符完成数组拼接

let arr1 = [1, 2, 3]
        let arr2 = [4, 5, 6]
        // 利用数组concat方法完成数组拼接
        let narr1 = arr1.concat(arr2)
        console.log(narr1); // [1, 2, 3, 4, 5, 6]
        // 利用es6拓展运算符完成数组拼接
        let narr2 = [...arr1, ...arr2]
        console.log(narr2); // [1, 2, 3, 4, 5, 6]

4.利用es6拓展运算符解决，把传过来的多个参数，组成数组

// 把传过来的多个参数，组成数组
        // 利用es6拓展运算符解决
        function fn(...rest) {
            console.log(rest); // [1, 2, 3, 4, 5]
        }
        fn(1, 2, 3, 4, 5)

传两个参数，第一个参数需要使用，其他的组成数组

function fn(a, ...b) {
            console.log(a, b); // 1 (4) [2, 3, 4, 5]
        }
        fn(1, 2, 3, 4, 5)

只传一个参数

 function fn(a, ...b) {
            console.log(a, b); // 1 []
        }
        fn(1)

不传参数

function fn(a, ...b) {
            console.log(a, b); // undefined []
        }
        fn()

map集合

JavaScript的对象（object），本质是上键值对的集合，但是传统上只能用字符串当做键值对。

为了解决这个问题，ES6提供了map数据结构。它列私语对象，也是键值对的集合。但是这个键的范围不限于字符串，各种类型的值（包括对象）都可以当做键。也就是说object结构提供了（字符串-值）的对应。

1、属性：size

返回map的元素数

 var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
        console.log(m.size); // 3
       

2.基本方法

（1）set()

给map添加数据，返回添加后的map（给已存在的键赋值后会覆盖掉之前的值）

  var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
        console.log(m.size); // 3
        console.log(m); // Map(3) {'name' => '张三', '5' => '李四', 5 => '王老五'}

（2）get()

获取某个key的值，返回key对应的值，没有则返回undefined

// get() 获取某个key的值，返回key对应的值，没有则返回undefined
        var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
        console.log(m.get("5")); // 李四
        console.log(m.get("")); // undefined

（3）has()

检测是否存在某个key，返回布尔值

 var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
 // has() 检测是否存在某个key，返回布尔值
        console.log(m.has("5")); // true

（4）delete()

删除某个key及其对应的value，返回布尔值，成功删除则为true

 var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
// delete() 删除某个key及其对应的value，返回布尔值，成功删除则为true
        console.log(m.delete("5"));// true
        console.log(m);// Map(2) {'name' => '张三', 5 => '王老五'}

（5）clear()

清除所有的值，返回undefined

 var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
 //  clear() 清除所有的值，返回undefined,括号里面的值可为任何数，同样可以清除所有
        console.log(m.clear()) // undefined
        console.log(m) // Map(0) {size: 0}

3、遍历方式

注意：map的遍历顺序就是插入顺序

（1）keys()

获取map的所有key

var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
        console.log(m.keys()); // MapIterator {'name', '5', 5}

（2）values()

获取map的所有值

 var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
 console.log(m.values());// MapIterator {'张三', '李四', '王老五'}

（3）entries()

获取map的所有成员

var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
console.log(m.entries());// MapIterator {'name' => '张三', '5' => '李四', 5 => '王老五'}

（4）for (va i of  aa)

如果是for（var key of m.entries()）,则此处的key表示是一个数组，数组的第一项是key,第二项是value

        var m = new Map();
        m.set("name", "张三")
        m.set("5", "李四")
        m.set(5, "王老五")
        for (var key of m.keys()) {
            console.log(key);// name "5" 5
        }
        for (var key of m.values()) {
            console.log(key);// 张三 李四   王五
        }
        // ☆ 此处key是一个数组，数组的第一项是key,第二项是value
        for (var key of m.entries()) {
            console.log(key);
             // 返回
            //  ['name', '张三']
            //  ['5', '李四']
            //  [5, '王老五']
         }

    使用for of 可以用来循环map迭代器（MapIterator）,遍历map的所有成员

    for of 不可以用来遍历对象，会提示对象不是一个迭代器 遍历对象只能遍历for in

     for of 可以用来遍历数组，里面的变量的值是数组的每一项

        // 使用for of 可以用来循环map迭代器,
        // for of 不可以用来遍历对象，会提示对象不是一个迭代器 遍历对象只能遍历for in 
        // for of 可以用来遍历数组，里面的变量的值是数组的每一项
        var arr = [{ name: "张三", age: 30 }, { name: "李四", age: 40 }]
        for (var item of arr) {
            console.log(item);
            // 返回
            // {name: '张三', age: 30}
            // {name: '李四', age: 40}
        }

（5）foreach函数

练习：

 let map1 = new Map([
            [1, 'One'],
            [2, 'Two'],
            [3, 'Three']
        ])

        console.log([...map1.keys()]); //  [ 1, 2, 3 ]
        console.log([...map1.entries()]); // [ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ]
        console.log(...map1.entries()); //  [ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ]

        var obj = { name: "zhangsan", age: 30 };
        console.log(Object.keys(obj));// ['name', 'age']
        console.log(Object.values(obj));//  ['zhangsan', 30]
        console.log(Object.entries(obj));// [[name,zhangsan],[age,30] ]