【学习笔记51】ES6的新增属性Set和Map

最新推荐文章于 2023-08-24 22:25:59 发布
最新推荐文章于 2023-08-24 22:25:59 发布
阅读量762 收藏 1
点赞数
分类专栏： JavaScript 文章标签： 学习 es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58190023/article/details/128074135
版权

一、Set

  • set类似于数组的一种数据结构，内部按照索引排序(但是不能通过索引取值)
  • 语法：let s = new Set([数据1, 数据2, 数据3])
  • 特点: 天生不支持重复数据
        let arr = [1, 2, 2, 3, 4, 4, 4, 3];
        let s = new Set(arr);
        console.log('原数组：',arr);
        console.log('set数据结构', s);
        console.log(s[0]);    // undefined

在这里插入图片描述

1. size (类似数组的length);

  • 作用: 获取到当前数据结构中数据的数量
        let s = new Set([2, 3, 4, 5, 5, 5, 4, 4, 3])
        console.log('原始数据结构', s);
        console.log(s.size);

在这里插入图片描述

2. add方法;

  • 作用: 向当前数据结构中新增数据
        let s = new Set([2, 3, 4, 5, 5, 5, 4, 4, 3])
        console.log('原始数据结构', s);

        s.add(100);
        s.add(5);
        console.log('add后的数据结构', s);

在这里插入图片描述

3. has();

  • 作用: 查询当前数据结构中是否拥有该数据; 找到的时候, 返回true, 否则返回false
        let s = new Set([2, 3, 4, 5, 5, 5, 4, 4, 3])
        console.log('原始数据结构', s);

        s.delete(5);
        console.log('delete后的数据结构', s);

在这里插入图片描述

5. clear()

  • 作用: 清空当前数据结构
        let s = new Set([2, 3, 4, 5, 5, 5, 4, 4, 3])
        console.log('原始数据结构', s);

        s.clear();
        console.log('清空后的数据结构 ', s);

在这里插入图片描述

6. forEach

  • 作用: 遍历数据结构, 拿到数据结构的每一项
        let s = new Set([2, 3, 4, 5, 5, 5, 4, 4, 3])
        console.log('原始数据结构', s);

        s.forEach(function (item, key, origin) {
            // set数据结构是没有key, 所以item和key打印出来的值都一样
            console.log(item, key, origin);
        })

在这里插入图片描述

二、Map

  • Map: ES6推出的一种数据结构, 和set一样, 也不支持重复数据
  • 类似于对象的一种数据结构,但是map的key可以是任意类型的值
  • 语法: var m = new Map([key, value])
  • 在实际开发中, 我们使用map的场景一般为想要将对象的key用于字符串之外的数据时使用
        var obj = {
            a: 1,
            b: 2
        }
        console.log(obj);
        console.log(obj.a);      // 点语法, 将a当成一个字符串去对象中查找
        console.log(obj["a"]);   // 中括号语法, 去对象的key中查找一个 'a'

1. 语法

        var arr = [1, 2, 3];
        var arr1 = [4, 5, 6];
        var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
        console.log('原始数据结构: ', m);

在这里插入图片描述

2. size;

  • 作用: 返回当前数据结构的 数据长度(多少个)
        var arr = [1, 2, 3];
        var arr1 = [4, 5, 6];
        var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
        console.log('原始数据结构: ', m);

        console.log(m.size);

在这里插入图片描述

3. set()

  • 作用: 向当前数据结构中, 新增数据
        var arr = [1, 2, 3];
        var arr1 = [4, 5, 6];
        var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
        console.log('原始数据结构: ', m);

        m.set('newKey', [1, 2, 3, 4, 5]);
        console.log('set 新增数据后的数据结构: ', m);

在这里插入图片描述

4. get(key)

  • 作用: 获取到指定key对应的value
        var arr = [1, 2, 3];
        var arr1 = [4, 5, 6];
        var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
        console.log('原始数据结构: ', m);

        console.log(m.get(arr));
        console.log(m.get('arr123'));

在这里插入图片描述

5. has(key)

  • 作用: 查询数据结构中是否存在当前key; 存在返回一个true ,否则返回一个false
        var arr = [1, 2, 3];
        var arr1 = [4, 5, 6];
        var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
        console.log('原始数据结构: ', m);

        console.log(m.has('12345'));
        console.log(m.has(arr));

在这里插入图片描述

5. delete

  • 作用: 删除当前数据结构对应的 key
        var arr = [1, 2, 3];
        var arr1 = [4, 5, 6];
        var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
        console.log('原始数据结构: ', m);

        m.delete('arr123');
        console.log(m);

在这里插入图片描述

6. clear

  • 作用: 清空当前数据结构
        var arr = [1, 2, 3];
        var arr1 = [4, 5, 6];
        var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
        console.log('原始数据结构: ', m);

        m.clear();
        console.log(m);

在这里插入图片描述

8. forEach

  • item: 对应的value
  • key: 对应的key
  • origin: 对应的原始数据结构
        var arr = [1, 2, 3];
        var arr1 = [4, 5, 6];
        var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
        console.log('原始数据结构: ', m);
        
        m.forEach(function (item, key, origin) {
            console.log(item, key, origin)
        })

在这里插入图片描述

三、对象语法的简写

  1. key 和 value 拼写一样
  2. 并且 value 写的是一个变量
  3. 满足这两个条件的情况, 可以少写 其中一个

1. 简写一

        let name = 'QF666'
        const obj = {
            name: name,
            age: 18,
        }
        console.log(obj);

在这里插入图片描述

        const obj = {
            name,
            age: 18,
        }
        console.log(obj);

2. 简写二

        let name = 'QF666'
        const obj = {
            name,
            age: 18,
            fn1: function () {
                console.log(1)
            },
            fn2() {
                console.log('222222')
            }
        }
        console.log(obj);
        
        obj.fn1()
        obj.fn2()

在这里插入图片描述

四、模块化开发

    /**
     *  模块化开发: 
     *      就是将功能拆分开, 每一个功能写到一个 JS 文件中 
     *      后续根据实际需求, 将不同的JS文件拼接到一起   
     * 
     *      将多个逻辑分别写道多个JS文件中
     *          每一个文件, 都只能使用当前文件内的变量
     *          每一个文件, 就是一个独立的作用域(文件作用域)
     * 
     *  ES6 使用  模块化开发的前提
     *      1. 页面必须使用服务器的形式打开
     *      2. script标签行内必须配置 type="module"
     * 
     * 
     *  如果想要拼接的话, 需要导入别的文件到自己文件内
     *      前提: 导入的文件, 必须有导出的内容
     * 
     *      导出: 向外部暴露出一些内容, 可以是变量, 也可以是函数
     *      导入: 引入别的文件向外部暴露出的那些内容
    */

在这里插入图片描述

1. index.html

    <script src="./index.js" type="module"></script>

2. index.js

		// 功能整合
		
		// 1. 引入文件
		// import XXX from '文件路径'
		// 引入方式 1
		import headerFn from "./header.js"; // 这种引入方式, 只能引入 导出方式1(默认导出)
		// 引入方式 2
		import { obj, arr } from "./header.js"; // 这种引入方式, 只能引入 导出方式2
		import * as color from "./content.js";  // 将 content.js 内 导出的内容, 全部存放到 变量 color
		
		// 2. 使用引入文件中暴露出来变量或方法
		console.log(headerFn);
		// headerFn()
		
		console.log(obj);
		console.log(arr);
		
		console.log(color);
		console.log(color.default);
		console.log(color.color1);
		console.log(color.color2);
		console.log(color.color3);
		console.log(color.color4);
		console.log(color.color5);

3.header.js

		// 拆分后的功能模块 1
		
		// 1. 向外暴露一些内容(导出)
		const fn = () => {
		    console.log("我是功能模块1 的 fn 函数");
		};
		
		export default fn; // 默认导出(导出方式1)
		
		export const obj = {
		    // 导出方式2
		    name: "QF666",
		    age: 18,
		};
		
		export const arr = [1, 2, 3, 4, 5];
		
		/**
		 *  默认导出一个JS文件 只能有一个
		 *  导出方式2可以有多个
		 */

4. content.js

		// 拆分后的功能模块 2
		
		export const color1 = '#asd1'
		export const color2 = '#asd2'
		export const color3 = '#asd3'
		export const color4 = '#asd4'
		export const color5 = '#asd5'
		
		const red = '#fff'
		export default red

5. footer.js

		// 拆分后的功能模块 3
0yizhiyang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解 ES6 新增的数据结构 Set 与 WeakSet
local_752的专栏
08-02 187
深入理解 ES6 新增的数据结构 Set 与 WeakSet
ES6中新增的Set、Map两种数据结构怎么理解以及操作方法
zhaojiaxing123的博客
12-16 334
ES6中新增的Set、Map两种数据结构怎么理解以及操作方法
ES6新特性。对象、数组新增方法
xxx
08-24 194
原文合集地址如下，有需要的朋友可以关注。
Js动态拼接对象、添加属性
CheneyChen27的博客
07-12 2419
放在点符号后面，我们可以动态地指定属性的名字，并将其赋值为变量value。方法将一个新对象和一个拥有动态键值的对象合并在一起。不同的是，我们使用方括号符号来包裹变量key。作为第一个参数，可以确保创建一个新的对象。来动态添加一个名为name。来动态添加一个名为name。，以动态地指定属性的名字。此方法也是使用变量key。二、动态添加对象属性。
ES6之Set用法
qq_45907365的博客
04-23 841
Set是ES6给开发者带来的一种新的数据结构，你可以理解为值的集合。我们平时见到的数组Array也是一种数据结构，但是Set跟其他数据结构不同的地方就在于：它的值不会有重复项。以上就是今天要讲的内容，有不足的地方欢迎补充。
ES6学习笔记之Set和Map数据结构详解
08-30
在ES6中，Set和Map是两种新的数据结构，它们为JavaScript程序员提供了更强大的工具来处理数据。下面我们将详细介绍这两个数据结构及其相关的属性和方法。 首先，Set是一种不允许重复值的数据结构。它类似于数组，但...
ES6学习笔记之map、set与数组、对象的对比
11-28
在ES6中，JavaScript引入了两种新的数据结构：Map和Set，这为开发者提供了更丰富的数据组织方式。本文将对比Map、Set与传统的Array和Object，探讨它们在增、查、改、删操作上的差异。 1. **Map与Array的对比** - *...
ES6学习笔记之新增数据类型实例解析
08-25
ES6学习笔记之新增数据类型实例解析 ES6中新增了多种数据类型，包括Symbol类型、Set集合、Map集合等，这些新增的数据类型对于JavaScript的发展具有重要的意义。下面将详细介绍这些新增的数据类型。 数据解构赋值 ...
js为数组的每一个对象添加新属性，遍历数组，前端重要功能
gjylalaland的博客
06-17 1万+
前端重要功能，js遍历数组，为数组的每一个对象添加/修改属性
JS中Object.create()的使用与实现
SCUhzs
09-17 2303
文章目录参数返回值异常用法用 `Object.create`实现类式继承使用 `Object.create` 的 `propertyObject`参数实现参考资料 参数 object.create方法有两个参数 proto 必须的 是新建对象的原型对象 propertiesObject 可选的 如果没有指定为 undefined，则是要添加到新创建对象的不可枚举（默认）属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defin
js为Object对象动态添加属性和值
热门推荐
天马3798
03-01 15万+
为Object对象动态添加属性和值 方式1： var obj = {}; //或者 var obj=new Object(); var key = "name"; var value = "张三丰" obj[key] = value; console.info(obj); 方式2，使用eval() 动态解析字符串表达式 var obj = {}; var key = "name"; var
ECMAScript6（ES6）标准之对象Object扩展方法及新特性
尐轩web前端网络日志
12-21 6551
ES6对于Object也扩增了几个方法 不过最重要的是 ES6扩展了一些语法 比如说允许直接写入变量和函数，作为对象的属性和方法 使我们的对象更加简洁 下面我就来详细说明一下语法扩展简写对象属性let name = 'payen'; let obj = { name, age: 19 } console.log(obj); //{"name":"payen","age":1
自学-ES6篇-对象的扩展
故事的小洋葱
10-07 1万+
1、属性的简洁表示法 ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 var foo = 'bar'; var baz = {foo}; baz // {foo: "bar"} // 等同于 var baz = {foo: foo}; 上面代码表明，ES6允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量。下面是另一个例子。
es6之assign用法（对象添加属性、方法、浅拷贝）
起风了
11-04 5603
assign使用注意点 //浅拷贝：Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。 const obj1={a:{b:1}}; const obj2=Object.assign({},obj1); obj1.a.b=2; console.log(obj2.a.b)//2 //遇到同名属性进行替换，而不是...
向一个对象数组里面添加新的属性 + 将一个对象数组数据拿出来变成另一个对象
马优晨
06-01 2万+
向一个对象数组里面添加新的属性 var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}]; var arry2=[]; arry.map(((item, index)=&gt; { arry2.push(Object.assign({},item,{mess1:item.c,mess2:i...
ES6新特性之Set和Map
Leon_Jinhai_Sun的博客
12-07 409
ES6提供了Set和Map的数据结构。 Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。和java中的Set集合非常相似。 <script> let set = new Set(); set.add(1); set.add(2); set.add(5); s...
es6新增的数据结构set
m0_68293816的博客
04-07 162
Set使用new关键字构建，里面如果需要传参，传入的参数为数组或ArrayLike set （里面存储的数据值不能重复 如果有重复会自动去除 数组去重）
ES6 新增数据类型 —— Set
qq_46099162的博客
03-01 407
Set方法： 该方法的特点是数据不允许重复，唯一性。可存储number、boolearn、string、object。 let s = new Set([1, 1, 2, true, true, 'test', { name: 'zhangsan', age: 14 }]) console.log(s); //Set(5){1, 2, true, 'test', {…}} 常用方法： size —— 返回该数据结构有多少条数据； let s = new Set([1,.
es6中 Set属性方法，以及遍历
ShunLu的博客
11-09 1383
 ---------------------  作者：黑色的咖啡Kenneth  来源：CSDN  原文：https://blog.csdn.net/a4561614/article/details/80818805  ---------------------  //Set 实例的属性和方法 //add(value)：添加某个值，返回 Set 结构本身。 //delete(valu...
es6中的set和map
最新发布
09-15
ES6中的Set和Map是两个新的数据结构，用于存储和操作数据。Set是一种无重复值的集合，而Map是一种键值对的映射。 Set类似于数组，但是它的值是唯一的，不允许有重复的元素。你可以使用Set来去除数组中的重复元素，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值