【学习笔记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. 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