当前位置：首页 > news >正文

ES6相关操作(2)

news 来源：原创 2025/6/8 9:16:16

一.Promise

Promise是ES6引入的异步编程工具。

语法上Promise是一个构造函数,用于封装异步操作并可以获取操作成功或失败的结果

Promise构造函数:Promise(excutor){}

Promise的常用函数:then,catch

实例化Promise对象(创建Promise工具)

let data="请求数据"//该数据为服务器的数据

reject(data)

})

调用Promise的then方法

p.then(function(value){

编写响应值

})

二.集合

什么是集合:用于存放很多数据的容器,在集合中提供了大量的功能方法，可以快速的操作数据

1.Set集合:成员的值必须是唯一的，实现了iterator(迭代器)的接口,可以使用for......of...... 等进行遍历

集合中常用功能方法：size-返回集合元素的个数，add向集合中添加数据，delete-删除数据，返回的是boolean(布尔类型的值)。has检查集合中是否包含某个元素

声明Set集合

2.Map集合:

Map集合:以键值对的方式存储数据

常用的属性和方法:

size 元素的个数

set 增加数据

get根据键获取数据

has 判断是否包含

clear 清空，undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集合</title>
</head>
<body>
    <script>
        //什么是集合:用于存放很多数据的容器,在集合中提供了大量的功能方法，可以快速的操作数据
        //Set集合:成员的值必须是唯一的，实现了iterator(迭代器)的接口,可以使用for......of......等进行遍历
        //集合中常用功能方法：size-返回集合元素的个数，add向集合中添加数据，delete-删除数据，返回的是boolean(布尔类型的值)。has检查集合中是否包含某个元素
        //声明Set集合
        let s1 =new Set();
        let s2=new Set(['小沈阳','赵四','刘能','宋小宝'])
        console.log(s2)
        //获得集合元素的个数
        console.log(s2.size)
        //添加元素
        s2.add('赵本山')
        console.log(s2)
        //删除元素
        s2.delete('小沈阳')
        //set集合值唯一
        s2.add('赵四')
        //元素检查是否存在
        let a=s2.has('刘能')
        console.log(a)
        //清空
        s2.clear()
        console.log(s2)
        //Map集合:以键值对的方式存储数据
        /*常用的属性和方法:
        size 元素的个数
        set 增加数据
        get根据键获取数据
        has 判断是否包含
        clear 清空，undefined
        */
       //声明Map集合
       let m=new Map()
       //添加数据
       m.set('name','刘德华')
       m.set('message',function(){
           console.log('演员,歌手')
       })
       let key={
        sayHi:'我的能力有'
       }
       m.set(key,['唱歌','跳舞','演员'])
       //获取元素个数
       console.log(m.size)
       console.log(m)
       //获得数据
       console.log(m.get('name'))
       //删除数据
       m.delete('name')
       //清空数据
       m.clear()
       console.log(m)
    </script>
</body>
</html>

三.模块化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块化</title>
</head>
<body>
    <script type="module">
        //模块化
        //将一个大的程序文件拆分许多小的文件，将小的文件组合起来实现业务功能
        //模块化的好处：
        //1.防止命名冲突
        //2.代码复用
        //3.高维护
        //模块化的命令
        //export 用于规定模块化对外接口
        //import 用于导入其他模块化提供的功能
        //引入m1.js模块内容
        // import *as m1 from "./m1.js"
        // console.log(m1)
        //import * as m2 from 'm2.js'
        // import * as m3 from 'm3.js'
        //m3.goodsMessage() 

        //2.解构模块数据
        // import {goods,goodsMessage} from "m1.js"
        // console.log(m1)
        // import {goods as g,goodsMessage as gm} from "m2.js"
        // import {default as m3} from "m3.js"
        //3.简化写法
        // import m3 from "m3.js"
    </script>
    <script type="module" src="./app.js"></script>
</body>
</html>