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

    一、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
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

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

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

    • 1
    • 2
    • 3

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    5. clear()

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    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);
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    二、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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    1. 语法

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

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    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'));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    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));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述

    三、对象语法的简写

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

    1. 简写一

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5

    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()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    四、模块化开发

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述

    1. index.html

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

    • 1

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    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可以有多个
		 */

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    5. footer.js

    		// 拆分后的功能模块 3

    • 1
  • 相关阅读:
    解锁Hutool魔法箱：Java开发者不可错过的神奇工具集
    短视频账号矩阵系统saas管理私信回复管理系统
    前端面试题总结（一）
    EventLoop
    服务状态巡检：
    perl use HTTP::Server::Simple 轻量级 http server
    Whisper 从0安装教程 windows
    ChatGPT 桌面客户端正式发布
    谷歌浏览器无法翻译已解决
    民安智库（第三方市场调研公司）保障性住房满意度调查流程
  • 原文地址：https://blog.csdn.net/m0_58190023/article/details/128074135