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

已于 2022-07-28 19:05:40 修改
阅读量366 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
于 2022-07-27 19:02:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62168050/article/details/126011361
版权

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函数

<script>
        // set集合
        var s = new Set();
        s.add("小明1")
        s.add("小明2")
        s.add("小明3")
        // 第一个参数和第二个参数都是set集合中的元素,第三个参数是set集合本身
        s.forEach(function (key, value, set) {
            console.log(key, value, set);
            // 小明1 小明1 
            // 小明2 小明2
            // 小明3 小明3
        })

        // map集合
        var m = new Map([
            ["xiaoming", "祖传中医"],
            [123, "清廷御用御医"],
            ["LIUQING", "新一代网红精神小妹余额过万"]
        ])
        // // 第一个参数是值，第二个参数是键,第三个参数是map集合本身
        m.forEach(function (value, key, map) {
            console.log(value, key, set);
            //祖传中医 xiaoming
            // 清廷御用御医 123
            //新一代网红精神小妹余额过万 LIUQING
        })
    </script>

练习：

 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] ]

m0_62168050
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6 —— 1、扩展、Set
weixin_45042569的博客
06-28 197
扩展 （1）字符串扩展 ES5字符串常用方法 charAt(); 返回指定索引位置的字符 indexOf(); 返回字符串中检索指定字符第一次出现的位置 lastIndexOf(); 返回字符串中检索指定字符最后一次出现的位置 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分 split() 把字符串分割为子字符串数组 toLowerCase() 把字符串转换为小写 toUpperCa...
ES6---扩展运算符和rest‘...’(三点运算符)，在数组、函数、set/map等中的应用
Wbiokr的博客
03-28 4107
ES6新增的三点运算符，是由三个点表示，在数组中扮演着重要的角色，可以对数组进行合并与分解、可以对set等数据结构进行转换、可以对函数参数进行简化表示，接下来，我们一起揭开其神秘面纱…●三点—rest参数:let fun1=function(...args){ for(let arg of args){ console.log(arg); }; console
扩展运算符(...) 和 set对象的使用
zmj blog的博客
10-13 550
扩展运算符(…) 扩展运算符 (...) 用于取出参数对象中的所有可遍历属性 set () 对象
扩展运算符（...）+map配合，给数组的每个元素加内容、map说明(ES5)
JEFF_xieyuzhi的博客
07-05 1065
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
ES6新增数据结构Map的用法（转载）
友人C君的博客
12-04 367
ES6，新增数据结构Map的用法 Javascript的Object本身就是键值对的数据结构，但实际上属性和值构成的是”字符串-值“对，属性只能是字符串，如果传个对象字面量作为属性名，那么会默认把对象转换成字符串，结果这个属性名就变成”[object Object]“。 ES6提供了”值-值“对的数据结构，键名不仅可以是字符串，也可以是对象。它是一个更完善的Hash结构。 特性 1....
ES6新特性五：Set与Map的数据结构实例分析
08-30
ES6新特性五：Set与Map的数据结构实例分析 Set数据结构是ES6中的一种新特性，它类似于数组，但是成员的值都是唯一的，没有重复的值。Set结构是一个构造函数，用来生成Set数据结构。 Set结构的定义和属性 Set结构...
ES6新增数据类型set和map
01-20
Set和Map的引入极大地丰富了JavaScript的数据结构，使我们在处理数据时有了更多选择。Set适用于去重或收集唯一值的场景，而Map则适用于存储键值对，尤其是当键不是字符串时。理解并熟练运用这两种数据类型，能帮助...
ES6新数据结构Map功能与用法示例
08-30
在ES6（ECMAScript 2015）中，Map是一种新的数据结构，它解决了JavaScript对象作为键值对集合时，键只能是字符串的限制。Map允许任何类型的值（包括对象）作为键，这极大地扩展了键的使用范围，使得存储和检索复杂...
ES6新数据结构Set与WeakSet用法分析
08-30
在ES6中，引入了两种新的数据结构：Set和WeakSet。它们都提供了存储不重复元素的能力，但各自有其特点和应用场景。 1. **Set** Set是一种类似数组的数据结构，但其成员的值都是唯一的，不允许重复。创建一个Set...
ES6中Symbol、Set和Map用法详解
10-16
在ES6中，JavaScript引入了三个新的数据结构：Symbol、Set和Map，它们为编程提供了更多的灵活性和便利性。下面将详细阐述这三个概念及其用法。 ### 1. Symbol **Symbol** 是一种全新的原始数据类型，它的值是...
ES6语法扩展（剩余参数与扩展运算符、set和map、遍历器、es6新增方法）
ailsa_csdn的博客
03-30 1581
ES6 新特性之语法扩展，包含剩余参数和扩展运算符、set和map、for...of方法、以及ES6新增的字符串方法、数组方法、对象方法等内容
[JavaScript] for...in、Object.keys 和 for...of 的区别
iChangebaobao的博客
03-12 630
1 遍历数组通常用for循环 ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。 Array.prototype.method=function(){ 　　console....
ES6中的 Set、Map 、扩展运算符（三个点）、rest运算符（三个点）
那木炫 _
08-21 4669
偶然看到某大厂的一个面试题，于是有了本次学习笔记 原题大概是这样的：用一行代码实现数组去重 比如：var arr1 = [1,2,4,2,3,5,1,3]; 数组去重有多种实现方式，但用一行代码能搞定？ 是的，查阅资料真有答案！ // 方法一： var arr1 = [1,2,4,2,3,5,1,3]; var arr2 = [...new Set(arr1)]; console.log...
for···in和for···of的区别
田兴的博客
10-26 5891
for···in和for···of的区别：(for···in取key，for··of取value) ①从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)； var arr = [99,88,66,77]; for(let i in arr){ console.log(i); //0,1,2,3 } for(let i of arr){ consoel.log(i); //99,88,66,77 } ②从遍历字符串的
可枚举属性、可迭代对象、迭代器(iterator)、for-in、for-of
jjjh968的博客
09-26 1899
可枚举属性 可枚举对象的一个定义特征是，当我们通过赋值运算符将属性赋值给对象时，我们将内部可枚举标志（enumerable）设置为 true。这是默认值。 但是，我们可以通过将其设置为 false 来更改此行为。 经验法则是，可枚举属性总是出现在 for...in 循环中。 可枚举属性和不可枚举属性是什么 所谓的可枚举就是可遍历的意思，也就是说对象的属性是否能够通过遍历得到。即通过for...in循环遍历到。 怎么判断属性是否可枚举 对象的属性是否具有可枚举属性是由enumerabl
es6的Object.keys()和map()组合使用的案例
热门推荐
安妮的博客
08-21 1万+
今儿上班学了个新东西，ES6语法，把对象转化为对象数组。{k1:v1.k2:v2,k3:v3}转化成[{key:k1,value:v1},{key:k2,value:v2},{key:k3,value:v3}]。把对象的key取出来作为对象数组里对象的key的值，把对象的value取出来，作为对象数组伦理对象的value值。怎么做呢？代码入下： const p={width:30,heig
常用的数组的for for in for Each map filter some every reduce
qq_45657154的博客
01-09 884
数组常用的高阶函数：for Each、map、some、every、for、for in、filter等
数组去重Set(),以及Array.from和扩展运算符(...)的使用
weixin_43540912的博客
11-28 1805
// ------------------------------Set---------------------------------------- // Set()是ES6提供的新的数据结构，类似于数组 但不会有重复的值 // Set是一个构造函数 所以生成的是set数据结构 var s = new Set(); // 添加 s.add(5); s.add('666'); s.a...
ES6中的 扩展运算符(...) 和 Set()数据结构（可以称为集合）
weixin_47075145的博客
07-11 581
扩展运算符是三个点（...）。用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。 2.用于合并两个对象 注意点：合并时，如果自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。 2. 数组的扩展运算符 （三个点相当于数组展开） 1.复制数组 扩展运算符提供了复制数组的简便写法。 2.合并数组 3.字符串变数组 2.Set()对象里面存数据方式 01. 调用add()方法 ，里面参数为要存的数据 02. 写到Set()括号里面：
ECMAScript6入门：JSON转Map与Set和Map数据结构
此外，提到了ES6中的Set和Map数据结构，以及ECMAScript6的一些核心特性，如let和const命令、解构赋值、字符串和正则的扩展等。" 在JavaScript中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值