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

news/2024/5/2 20:38:38/文章来源: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)})

在这里插入图片描述

三、对象语法的简写

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

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 '文件路径'// 引入方式 1import headerFn from "./header.js"; // 这种引入方式, 只能引入 导出方式1(默认导出)// 引入方式 2import { obj, arr } from "./header.js"; // 这种引入方式, 只能引入 导出方式2import * 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 = {// 导出方式2name: "QF666",age: 18,};export const arr = [1, 2, 3, 4, 5];/***  默认导出一个JS文件 只能有一个*  导出方式2可以有多个*/

4. content.js

		// 拆分后的功能模块 2export 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