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

    set 数据结构

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

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

    属性和方法：

    size:数据的长度

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

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

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

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

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

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

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

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

    1.  // clear 清除所有成员，没有返回值
    2.         var s = new Set([1, 2, 2, 3, 4, 4, 5, 6])
    3.         console.log(s.clear()); // undefined
    4.         console.log(s); //Set(0) {size: 0}
    1.         var obj = { name: "zhangsan", age: 30 };
    2.         console.log(Object.keys(obj));// ['name', 'age']
    3.         console.log(Object.values(obj));//  ['zhangsan', 30]
    4.         console.log(Object.entries(obj));// [[name,zhangsan],[age,30] ]

    解构赋值：

     数组的解构赋值

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

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

    对象的解构赋值

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

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

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

    1.  let obj = {
    2.             name: "张三",
    3.             age: 30,
    4.             data: {
    5.                 msg: "成功",
    6.                 status: 200
    7.             }
    8.         }
    9. // 给解构出来的变量修改名字
    10.         let { name: username, age: userage, data: { msg: usermsg, status: userstatus } } = obj
    11.         console.log(username, userage, usermsg, userstatus);// 张三 30 成功 200

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

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

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

    拓展运算符：

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

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

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

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

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

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

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

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

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

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

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

    只传一个参数

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

    不传参数

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

    map集合

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

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

    1、属性：size

    返回map的元素数

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

    2.基本方法

    （1）set()

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

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

    （2）get()

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

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

    （3）has()

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

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

    （4）delete()

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

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

    （5）clear()

    清除所有的值，返回undefined

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

    3、遍历方式

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

    （1）keys()

    获取map的所有key

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

    （2）values()

    获取map的所有值

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

    （3）entries()

    获取map的所有成员

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

    （4）for (va i of  aa)

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

    1.         var m = new Map();
    2.         m.set("name", "张三")
    3.         m.set("5", "李四")
    4.         m.set(5, "王老五")
    5.         for (var key of m.keys()) {
    6.             console.log(key);// name "5" 5
    7.         }
    8.         for (var key of m.values()) {
    9.             console.log(key);// 张三 李四   王五
    10.         }
    11.         // ☆ 此处key是一个数组，数组的第一项是key,第二项是value
    12.         for (var key of m.entries()) {
    13.             console.log(key);
    14.              // 返回
    15.             //  ['name', '张三']
    16.             //  ['5', '李四']
    17.             //  [5, '王老五']
    18.          }

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

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

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

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

    （5）foreach函数

    练习：

    1.  let map1 = new Map([
    2.             [1, 'One'],
    3.             [2, 'Two'],
    4.             [3, 'Three']
    5.         ])
    6.  
    7.         console.log([...map1.keys()]); //  [ 1, 2, 3 ]
    8.         console.log([...map1.entries()]); // [ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ]
    9.         console.log(...map1.entries()); //  [ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ]
    1.         var obj = { name: "zhangsan", age: 30 };
    2.         console.log(Object.keys(obj));// ['name', 'age']
    3.         console.log(Object.values(obj));//  ['zhangsan', 30]
    4.         console.log(Object.entries(obj));// [[name,zhangsan],[age,30] ]

  • 相关阅读:
    Linux oracle 数据导出导入步骤：
    【wpf】 当用了数据模板之后如何获取控件的Item？
    基金｜最新“情绪领域”项目情报分享，速看
    掌握Golang匿名函数
    前端实现菜单&按钮级权限
    不通外网服务器文件如何自动化传到我电脑
    数组去重的六种方法
    大数据-Storm流式框架（二）--wordcount案例
    原创: 重构证据定义以消解贝叶斯确证逻辑的内在矛盾
    用C语言解决三个整数比大小,x,y,z三个整数求最小整数，从键盘上输入3个不同的整数×，y,Z,请设计一个算法找出其中最小的数，并画出流程图。
  • 原文地址：https://blog.csdn.net/m0_62168050/article/details/126011361