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

news2025/11/4 18:04:01

一、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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/42023.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

为什么要申请实用新型专利呢？

为什么要申请实用新型专利呢？

问题一&#xff1a;实用新型专利从申请到拿证需要多长时间&#xff1f; 有三种申请通道。 1、普通申请通道&#xff1a;通常4-6个月就能获得授权&#xff1b; 2、优先审查通道&#xff1a;通常2-6个月就能拿证&#xff1b; 3、快速预审通道&#xff1a;通常不超过7个工作日…
阅读更多...
万字详解数据结构——树

万字详解数据结构——树

数据结构——树 &#x1f3d6;️专题&#xff1a;数据结构 &#x1f648;作者&#xff1a;暴躁小程序猿 ⛺简介&#xff1a;双非本科大二小菜鸡一枚&#xff0c;希望和大家一同进步~ 树知识点目录数据结构——树一、二叉树1.树概念及结构1.1树的概念1.2 树的相关概念1.3 树的表…
阅读更多...
数学建模论文六大获奖技巧总结（想得奖的进来看）

数学建模论文六大获奖技巧总结（想得奖的进来看）

目录 一&#xff0c;摘要一定要认真写 二&#xff0c;论文的排版一定要美观 三&#xff0c;模型假设一定要认真对待 ●模型假设的意义 四&#xff0c;问题分析推荐使用流程图 五&#xff0c;推荐使用改进或优化后的模型 六&#xff0c;建议增加模型检验模块 一&#xff0…
阅读更多...
什么是Java运算？Java运算好学吗？

什么是Java运算？Java运算好学吗？

提到运算&#xff0c;你可能会立即想到加、减、乘、除四则运算以及“九九乘法表”。Java 语言中有很多进行数据运算的方式&#xff0c;比如&#xff1a;算术运算、比较运算、逻辑运算、赋值运算、三目运算等。每一种运算方式&#xff0c;又都包含了很多的运算符&#xff0c;小编…
阅读更多...
【American English】美语口语，浊化，弱读，连读，省音

【American English】美语口语，浊化，弱读，连读，省音

1【American English】美式发音&#xff0c;英语发音&#xff0c;美国音音标列表及发音2【American English】美语的连读规则3【American English】美语口语中常见的 Gonna、wanna、gotta 含义及用法4【American English】美语口语&#xff0c;浊化&#xff0c;弱读&#xff0c…
阅读更多...
单片机---1MHz方波的产生(中断和查询方式)

单片机---1MHz方波的产生(中断和查询方式)

单片机—定时/计数器方式产生1MHz方波 要求: 使用定时器1&#xff0c;采用工作方式1&#xff0c;在输出口P2.0产生周期未1秒的方波&#xff1b; 定时计数基本流程 计算初值定义TMOD寄存器确定 T0 或 T1 为工作方式把计数器初值装入 THx 和 TLx (x0,1与上面确定的T0,T1保持一…
阅读更多...
Git Hooks简介及结合Husky和Commitlint检测提交代码规范

Git Hooks简介及结合Husky和Commitlint检测提交代码规范

文章目录一、Git Hooks1.1 目标1.2 常用hooks1.3 核心钩子二、Commitlint2.1 安装2.2 创建配置文件三、Husky3.1 安装3.2 启动3.3 生成指令并执行3.4 通过commit-msg规范化提交信息3.5 通过pre-commit检测提交代码规范四、验证测试4.1 验证提交规范4.2 验证代码规范五、再进一步…
阅读更多...
产品经理撰写需求文档

产品经理撰写需求文档

众所周知&#xff0c;需求文档的撰写是每位产品经理工作中必备的技能。 PRD文档没有标准的规范&#xff0c;也没有统一的模板&#xff0c;每个公司都不一样&#xff0c;并且每个人也不一样&#xff0c;这个取决于个人习惯和团队要求。 接下来主要讲作为一个入门的产品经理&…
阅读更多...
使用小程序实现AI动漫脸特效

使用小程序实现AI动漫脸特效

文章目录一、文章前言二、具体流程及准备三、开发步骤四、完整代码一、文章前言 最近在Dou音很火的AI绘画特效能够实现将人脸进行动漫化&#xff0c;让我们用小程序也制作一个吧。 二、具体流程及准备 2.1、注册百度开放平台及微信公众平台账号。 2.2、下载及安装微信Web开发者…
阅读更多...
代码源每日一题div1 平方计数

代码源每日一题div1 平方计数

平方计数 - 题目 - Daimayuan Online Judge 题意&#xff1a; 思路&#xff1a; 首先注意到暴力枚举一定超时&#xff0c;因此我们考虑只枚举一个指针&#xff0c;然后推一推式子降低另一个指针的复杂度 对于完全平方数这个条件&#xff0c;我们无法直接转换 即对于每一个a[…
阅读更多...
sCrypt 合约中的椭圆曲线算法：第一部分

sCrypt 合约中的椭圆曲线算法：第一部分

我们提出了一种新颖有效的方法&#xff0c;用于在脚本中计算椭圆曲线上的点加法和标量乘法。对于点加法&#xff0c;我们将超过 1MB 的脚本大小减少到约 400 字节。 椭圆曲线点加法 对于每个 i&#xff0c;每个点 Pi 由两个坐标 (xi, yi) 表示。要计算 P3 P1 P2&#xff0c;…
阅读更多...
大数据培训教程Shuffle机制

大数据培训教程Shuffle机制

Shuffle机制 Map方法之后&#xff0c;Reduce方法之前的数据处理过程称之为Shuffle。如图4-14所示。 图4-14 Shuffle机制 2 Partition分区 1、问题引出 要求将统计结果按照条件输出到不同文件中(分区)。比如:将统充结果 按照手机归属地不同省份输出到不同文件中(分区) 2、默…
阅读更多...
环境土壤物理模型HYDRUS建模方法与多案例应用

环境土壤物理模型HYDRUS建模方法与多案例应用

HYDRUS是由著名土壤学家Rien van Genuchten和Jirka Simunek等人基于Windows系统界面开发的环境土壤物理模拟软件&#xff0c;是模拟一维和多维变饱和多孔介质的水流、溶质运移、根系吸水和溶质吸收、热量传输等的强有力工具。除基础功能以外&#xff0c;该模型还附有一系列扩展…
阅读更多...
C/C++：双重循环中的break

C/C++：双重循环中的break

break语句的执行只会导致其所在层的循环被中止。在一个嵌套的双重循环中&#xff0c;处于内层循环内的break被执行时&#xff0c;只会导致内层循环的中止&#xff0c;外层循环不受影响。 本文引用自作者编写的下述图书; 本文允许以个人学习、教学等目的引用、讲授或转载&#x…
阅读更多...
Android -- 每日一问：如何理解 Gradle？Gradle 在 Android 的构建过程中有什么作用？

Android -- 每日一问：如何理解 Gradle？Gradle 在 Android 的构建过程中有什么作用？

一、什么是 Gradle ? 一个像 Ant 一样的非常灵活的通用构建工具一种可切换的, 像 maven 一样的基于合约构建的框架支持强大的多工程构建支持强大的依赖管理(基于 ApacheIvy )支持已有的 maven 和 ivy 仓库支持传递性依赖管理, 而不需要远程仓库或者 pom.xml 或者 ivy 配置文件…
阅读更多...
深度学习如何具有人类智能实现论述假说

深度学习如何具有人类智能实现论述假说

&#x1f37f;*★,*:.☆欢迎您/$:*.★* &#x1f37f; 正文 如图一所示 目前深度学习缺少的是 红色大框的部分 智能没有自我意识 同时 训练的方法也是不对的 直到最近的扩散模型 才刚刚有了一点起色 具体的训练方法 类似图二所示 假设人类获取信息只是通过眼睛 那么眼睛每次…
阅读更多...
Redis数据库相关指令大合集

Redis数据库相关指令大合集

14天学习训练营导师课程&#xff1a; 郑为中《Vue和SpringBoot打造假日旅社管理系统》 努力是为了不平庸~ 学习有些时候是枯燥的&#xff0c;但收获的快乐是加倍的&#xff0c;欢迎记录下你的那些努力时刻&#xff08;学习知识点/题解/项目实操/遇到的bug/等等&#xff09;&am…
阅读更多...
C. Tree Infection(二分)

C. Tree Infection(二分)

Problem - 1665C - Codeforces 一棵树是一个没有循环的连接图。一棵有根的树有一个特殊的顶点&#xff0c;叫做根。一个顶点v&#xff08;不同于根&#xff09;的父顶点是指从根到顶点v的最短路径上的前一个顶点。 给你一棵有n个顶点的有根树。顶点1是根。最初&#xff0c;所有…
阅读更多...
vue3 antd项目实战 表格的增删改查（一）input输入框根据关键字模糊搜索【纯前端filter过滤】

vue3 antd项目实战 表格的增删改查（一）input输入框根据关键字模糊搜索【纯前端filter过滤】

input输入框——关键字模糊搜索引言铺垫场景复现解决方案筛选的实现重置筛选信息优化处理&#xff08;监听的实现&#xff09;功能实现可能要用到的知识&#xff1a;vue3数据变化侦测&&信息筛选过滤.filter() .map() .forEach(). find()&#x1f525;vue3【watch检测/监…
阅读更多...
10个实用的数据可视化的图表总结

10个实用的数据可视化的图表总结

用于深入了解数据的一些独特的数据可视化技术 可视化是一种方便的观察数据的方式&#xff0c;可以一目了然地了解数据块。我们经常使用柱状图、直方图、饼图、箱图、热图、散点图、线状图等。这些典型的图对于数据可视化是必不可少的。除了这些被广泛使用的图表外&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023