ES6,DAY5

最新推荐文章于 2024-03-17 09:33:14 发布

疯子的梦想＠

最新推荐文章于 2024-03-17 09:33:14 发布

阅读量404

点赞数 1

分类专栏：前端文章标签： javascript npm 前端

本文链接：https://blog.csdn.net/weixin_48681463/article/details/122107011

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

ES6

babel对ES6模块化代码转换
ES6模块化引入NPM包
ES7新特性
ES8新特性
async与await结合实践
async与await封装ajax请求
es8中的Object属性
ES9扩展运算符与rest参数
ES9正则扩展

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
评论
ES6,DAY5

ES6babel对ES6模块化代码转换ES6模块化引入NPM包ES7新特性ES8新特性async与await结合实践async与await封装ajax请求es8中的Object属性ES9扩展运算符与rest参数ES9正则扩展babel对ES6模块化代码转换安装相关工具，在vs code中打开终端命令行。输入npm init --yes(使用npm命令需要安装node.js)。然后输入npm i babel-cli babel-preset-env browserify -D进行安装工具。安装完成后
复制链接

扫一扫

专栏目录