ES6,DAY5

babel对ES6模块化代码转换

在这里插入图片描述

安装相关工具,在vs code中打开终端命令行。
在这里插入图片描述
输入npm init --yes(使用npm命令需要安装node.js)。然后输入npm i babel-cli babel-preset-env browserify -D进行安装工具。安装完成后如下
在这里插入图片描述
因为使用的是局部安装,所以输入npx babel src/js -d dist/js --presets=babel-preset-env如果是全局安装,就把npx换成npm。
运行完后的结果如下,多出一个dist文件夹。
在这里插入图片描述
对比dist文件夹下的app.js与src文件夹下的app.js。发现有改变。

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.teach = teach;
var school = exports.school = '尚硅谷';
function teach() {
    console.log("我可以教学");
}
export let school = '尚硅谷';
export function teach() {
    console.log("我可以教学");
}

然后输入命令npx browserify dist/js/app.js -o dist/bundle.js进行打包,最后引入。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 安装工具babel-cli、 babel-preset-env 、browserify(打包工具,项目中会使用webpack)
        通过npx babel命令进行转换
        打包 使用npx browserify dist/js/app.js -o dist/bundle.js

 -->
    <!-- 引入经过打包好的bundle.js -->
    <script src="dist/bundle.js">

    </script>
</body>

</html>

总结:使用babel对ES6模块进行转换,然后使用打包工具进行打包,最后在html文件里引入。

ES6模块化引入NPM包

首先在终端按照jQuery。输入命令npm i jquery
在这里插入图片描述
然后修改网页背景颜色。在app.js内修改代码

export let school = '尚硅谷';
export function teach() {
    console.log("我可以教学");
}

teach();
// 修改背景颜色
import $ from 'jquery'
$('body').css('background', 'pink');

然后终端命令行输入:npx babel src/js -d dist/js --presets=babel-preset-env转换、npx browserify dist/js/app.js -o dist/bundle.js打包。最后home.html引入。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 安装工具babel-cli、 babel-preset-env 、browserify(打包工具,项目中会使用webpack)
        通过npx babel命令进行转换 npx babel src/js -d dist/js --presets=babel-preset-env
        打包 使用npx browserify dist/js/app.js -o dist/bundle.js

 -->
    <!-- 引入经过打包好的bundle.js -->
    <script src="dist/bundle.js">

    </script>
</body>

</html>

在这里插入图片描述
最后效果。注意:要使用vs code内的一个插件live-server插件打开html网页。
在这里插入图片描述

ES7新特性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 演示array.prototype.includes
        const mingzhu = ['西游记', '红楼梦', '三国演义', '水浒传'];
        // 判断数组内是否包含某些值
        console.log(mingzhu.includes('西游记'));
        console.log(mingzhu.includes("精品班"));
        // 演示 **  幂运算
        console.log(2 ** 10);//2的10次方,等同于Math.pow(2,10)
    </script>
</body>

</html>

在这里插入图片描述

ES8新特性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- async函数 -->
    <script>
        // 返回的结果默认是一个promise对象,即使在函数内部写的代码是字符串
        async function fn() {
            return '哈哈哈'
        }
        const result = fn();
        console.log(result);
    </script>
</body>

</html>

在这里插入图片描述
注意:
1.返回的结果不是一个 Promise类型的对象,返回的结果就是成功Promise对像
2.抛出错误,返回的结果是一个失败的 Promisel
throw new Error('出错啦! ');
3.返回的结果如果是一个Promise对象,则后台打印出来的也是一个promise成功

return new Promise((resolve, reject)=>{f
resolve( '成功的数据');
});

await演示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- await表达式 -->
    <script>
        //创建 promise 对象
        const p = new Promise((resolve, reject) => {
            resolve("成功的值! ");
        })
        // await 要放在 async函数中.
        async function main() {
            let result = await p;
            console.log(result);
        }
        //调用函数
        main();

    </script>
</body>

</html>

在这里插入图片描述

async与await结合实践

新建如下文件
在这里插入图片描述
在打油诗.md文件里随意输入内容后保存。

// 1.引入fs模块
const fs = require("fs")
// 封装读取文件内容的这个任务
function readtxt() {
    return new Promise((resolve, reject) => {
        fs.readFile('./resource/打油诗.md', (err, data) => {
            if (err) {
                // 如果失败
                reject(err)
            } else {
                // 如果成功
                resolve(data)
            }
        })
    })
}
// 声明async函数
async function main() {
    // 因为我们封装的任务是一个promise,那么就需要用到await
    let result = await readtxt();
    console.log(result);
}
// 调用函数
main();

在终端输入node命令运行该js文件。
在这里插入图片描述

async与await封装ajax请求

首先使用promise的then方法进行测试封装函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 封装发送ajax的任务
        function sendAJAX(url) {
            return new Promise((resolve, reject) => {
                // 创建对象
                const x = new XMLHttpRequest();
                // 初始化
                x.open('GET', url)
                // 发送
                x.send();
                // 事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            // 响应成功了
                            resolve(x.response)
                        } else {
                            // 响应失败
                            reject(x.status)
                        }
                    }
                }
            })
        }
        // promise的then方法测试
        const result = sendAJAX("https://api.apiopen.top/getJoke").then(value => {
            console.log(value);
        }, reason => { })

    </script>
</body>

</html>

在这里插入图片描述
使用async方法测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 封装发送ajax的任务
        function sendAJAX(url) {
            return new Promise((resolve, reject) => {
                // 创建对象
                const x = new XMLHttpRequest();
                // 初始化
                x.open('GET', url)
                // 发送
                x.send();
                // 事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            // 响应成功了
                            resolve(x.response)
                        } else {
                            // 响应失败
                            reject(x.status)
                        }
                    }
                }
            })
        }
        // // promise的then方法测试
        // const result = sendAJAX("https://api.apiopen.top/getJoke").then(value => {
        //     console.log(value);
        // }, reason => { })
        // async与await测试
        async function main() {
            let result = await sendAJAX("https://api.apiopen.top/getJoke")
            console.log(result);
        }
        main();
    </script>
</body>

</html>

在这里插入图片描述

es8中的Object属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 声明对象
        const school = {
            name: "尚硅谷",
            cities: ['北京', '上海', '深圳'],
            subject: ['数学', '语文', '英语']
        }
        // 获取对象所有的键
        console.log(Object.keys(school));
        // 获取对象所有的值
        console.log(Object.values(school));
        // entries 获取的是键和值,以数组的形式返回
        console.log(Object.entries(school));
        // 创建Map 然后使用get索引里边的内容
        const m = new Map(Object.entries(school));
        console.log(m.get('cities'));

        // 对象属性的描述对象,其中返回的writable表示是否可写,configurable表示是否可设置,enumerable表示是否可枚举
        console.log(Object.getOwnPropertyDescriptors(school));
    </script>
</body>

</html>

在这里插入图片描述

ES9扩展运算符与rest参数

未使用扩展运算符时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // Rest 参数与spread 扩展运算符在 ES6中已经引入,不过 ES6中只针对于数组,在ES9中为对象提供了像数组一样的 rest参数和扩展运算符
        function connect({ host, port, username, password }) {
            console.log(host);
            console.log(port);
            console.log(username);
            console.log(password);
        }
        connect({
            host: '127.0.0.1',
            port: 3306,
            username: "root",
            password: "root"
        })

    </script>
</body>

</html>

在这里插入图片描述
使用rest时,以下代码为例,表示除了host和port,其余的参数都存在user里

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // Rest 参数与spread 扩展运算符在 ES6中已经引入,不过 ES6中只针对于数组,在ES9中为对象提供了像数组一样的 rest参数和扩展运算符
        function connect({ host, port, ...user }) {
            console.log(host);
            console.log(port);
            console.log(user);
        }
        connect({
            host: '127.0.0.1',
            port: 3306,
            username: "root",
            password: "root"
        })

    </script>
</body>

</html>

在这里插入图片描述
扩展运算符演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // Rest 参数与spread 扩展运算符在 ES6中已经引入,不过 ES6中只针对于数组,在ES9中为对象提供了像数组一样的 rest参数和扩展运算符
        // 1.rest参数演示
        function connect({ host, port, ...user }) {
            console.log(host);
            console.log(port);
            console.log(user);
        }
        connect({
            host: '127.0.0.1',
            port: 3306,
            username: "root",
            password: "root"
        })
        // 2. 扩展运算符演示
        const skillOne = {
            q: '天音波'
        }
        const skillTwo = {
            w: '金钟罩'
        }
        const skillThree = {
            e: '天雷破'
        }
        const skillFour = {
            r: "猛龙摆尾"
        }
        // 把四个对象都添加在了一个里
        const person = { ...skillOne, ...skillTwo, ...skillThree, ...skillFour }
        console.log(person);
    </script>
</body>

</html>

在这里插入图片描述

ES9正则扩展

命名捕获分组与传统正则化对比多老一个group属性,这样以后提取数据时,会方便很多。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 命名捕获分组演示
        // 1.使用传统方法
        //声明一个字符串
        let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
        //提取url 与『标签文本』
        // 第一个小括号表示url,第二个小括号表示标签文本
        const reg = /<a href="(.*)">(.*)<\/a>/;
        //执行
        const result = reg.exec(str);
        console.log(result);
        // 2.使用命名捕获分组功能
        let str1 = '<a href="http://www.atguigu.com">尚硅谷</a>';
        const regg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
        const result1 = regg.exec(str1);
        console.log(result1);
    </script>
</body>

</html>

在这里插入图片描述
反向断言演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 命名捕获分组演示
        // 1.使用传统方法
        //声明一个字符串
        let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
        //提取url 与『标签文本』
        // 第一个小括号表示url,第二个小括号表示标签文本
        const reg = /<a href="(.*)">(.*)<\/a>/;
        //执行
        const result = reg.exec(str);
        console.log(result);
        // 2.使用命名捕获分组功能
        let str1 = '<a href="http://www.atguigu.com">尚硅谷</a>';
        const regg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
        const result1 = regg.exec(str1);
        console.log(result1);
        // 反向断言,判断这次匹配的结果是否正确
        // 1.正向断言演示
        let str2 = '1245654554185红红的777哈哈';
        //   \d表示数字0-9,?=表示判断
        //   前向肯定(?=)  前向否定(?!=) 
        const reggg = /\d+(?=)/;
        const result2 = reggg.exec(str2);
        // 根据要获取内容的后边内容正则,此时获得的是“红”字前边的数字,根据的是"红"字
        console.log(result2);
        // 2.反向断言,根据要获取内容的前边内容正则,这里获取的是777,根据的是“的”字
        // (?<=) 表示开头的字符串是什么
        const regggg = /(?<=)\d+/;
        const result3 = regggg.exec(str2);
        console.log(result3);
    </script>
</body>

</html>

在这里插入图片描述
正则扩展的dotALL模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 一、命名捕获分组演示
        // 1.使用传统方法
        //声明一个字符串
        let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
        //提取url 与『标签文本』
        // 第一个小括号表示url,第二个小括号表示标签文本
        const reg = /<a href="(.*)">(.*)<\/a>/;
        //执行
        const result = reg.exec(str);
        console.log(result);
        // 2.使用命名捕获分组功能
        let str1 = '<a href="http://www.atguigu.com">尚硅谷</a>';
        const regg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
        const result1 = regg.exec(str1);
        console.log(result1);
        // 二、反向断言,判断这次匹配的结果是否正确
        // 1.正向断言演示
        let str2 = '1245654554185红红的777哈哈';
        //   \d表示数字0-9,?=表示判断
        //   前向肯定(?=)  前向否定(?!=) 
        const reggg = /\d+(?=)/;
        const result2 = reggg.exec(str2);
        // 根据要获取内容的后边内容正则,此时获得的是“红”字前边的数字,根据的是"红"字
        console.log(result2);
        // 2.反向断言,根据要获取内容的前边内容正则,这里获取的是777,根据的是“的”字
        // (?<=) 表示开头的字符串是什么
        const regggg = /(?<=)\d+/;
        const result3 = regggg.exec(str2);
        console.log(result3);
        // 三、dotALL模式,在最末尾加了字符s,就表示正则表达式里的.能匹配任何字符,表示除换行符以外的任意单个字符
        let str3 = `
        <ul>
            <li>
                <a>肖生克的救赎</a>
                <p>上映日期:1994-09-10</p>
            </li>
            <li>
                <a>阿甘正传</a>
                <p>上映日期:1994-07-06</p>
            </li>
        </ul>`;
        // 把str3中电影的名称和上映时间提取出来
        //声明正则,传统方式
        // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/ ;
        // 用dotALL模式,其中s是换行符,这里只匹配了一个
        // const xx = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s; //执行匹配
        // 匹配多个时,加个g,表示全局匹配
        const xx = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
        // 想要保存匹配到的内容
        let data = [];
        // 循环进行多个匹配
        while (cc = xx.exec(str3)) {
            console.log(cc);
            data.push({ title: cc[1], year: cc[2] });
        }
        // 输出保存的结果
        console.log(data);
    </script>
</body>

</html>

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值