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>
相关推荐
m0_738120723 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
Liu.7745 小时前
uniappx鸿蒙适配
前端
山有木兮木有枝_6 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
ZXT6 小时前
js基础重点复习
javascript
言兴6 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra7 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋8 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴8 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农9 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan9 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron