ES6相关操作(2)

一.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>
相关推荐
菜鸟学Python几秒前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者22 分钟前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er25 分钟前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping32 分钟前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗1 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸2 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest
姑苏洛言2 小时前
答题抽奖活动小程序技术复盘
前端