ES6
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>