目录
ES6新特性
什么是ES6
ECMA
->ECMAScript
->ES6
->javaScript
ECMA
ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制
造商协会,这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该
组织改名为 Ecma 国际(简单来说这个组织就是来认可和制定标准的)
ECMAScript
ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言(简单的说就是一种标准语言)
ECMA-262 标准
Ecma 国际制定了许多标准,而 ECMA-262 只是其中的一个;ECMA-262标准几乎每个几年就会发布一个新的版本更新了一些新的特性(ES6就是2015年发布的ECMA-262标准新的版本)
JavaScript
JavaScript语言是ECMAScript标准语言的一种实现方式
关键字
let
关键字和var
关键字
-
let
关键字一般用来声明局部变量 -
var
关键字一般用来声明全局变量
const
关键字
解构赋值
对声明的变量进行快速赋值
//数组解构赋值
const arr = ['关羽','花木兰','马超','夏侯惇']
let [a,b,c,d] = arr
console.log(a);
console.log(b);
console.log(c);
console.log(d);
//对象的解构赋值
const obj = {
name:'张三',
age:'22',
hobbys:['学习','打游戏','看综艺']
}
let {myName,myAge,myHobbys} = obj
模板字符串
模板字符串是增强版的字符串,用反引号(`)标识
特性:
- 拼接html解构字符串可以直接换行,省略了“+”号
- 可以获取字符串中的变量
//原来的拼接方式
let str1 = "<ul>" +
"<li>关羽</li>" +
"<li>张飞</li>" +
"<li>刘备</li>" +
"</ul>"
//es6新加的模板字符串
let str2 = `<ul>
<li>于禁</li>
<li>典韦</li>
<li>夏侯惇</li>
<li>夏侯渊</li>
</ul>`
//变量拼接
let hero = '关羽';
let str3 = `${hero}是我最擅长的英雄!`
声明对象简写形式
es6允许在声明对象时,在大括号里面直接写入变量和函数
let name = '张三';
let change = function(){
console.log('我是傻子!!');
}
const school = {
name,
change,
improve(){
console.log("你也是!");
}
}
箭头函数
//原来定义函数的方式
let fn = function () {
}
//使用箭头函数定义函数
let fn = (a,b) => {
}
注意:使用箭头定义函数
rest
参数
Promise
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数,
用来封装异步操作并可以获取其成功或失败的结果。
使用Promise构造函数创建实例对象时,该构造函数需要接收一个函数(函数里面执行异步操作)作为参数,接收的函数带有两个函数类型的形参,并且能够通过调用这两个函数类型(形参)的方法来改变实例化的Promise对象的状态
之后用实例化后的对象调用
Promise
对象封装的then
方法,该方法根据实例化对象的状态来返回对应的结果;then
方法需要两个函数作为形参,每个函数也有一个形参,每个函数的形参就是返回的结果。
基本语法
<script>
//实例化 Promise 对象
//resolve
//reject
const p = new Promise(function(resolve, reject){
setTimeout(function(){
// let data = '数据库中的用户数据';
// resolve
// resolve(data);
let err = '数据读取失败';
reject(err);
}, 1000);
});
//调用 promise 对象的 then 方法
p.then(function(value){
console.log(value);
}, function(reason){
console.error(reason);
})
//Promise实例化对象,对象状态为失败时,也可以通过catch捕获失败信息
p.catch(function(reason){
console.warn(reason);
});
</script>
Promise
封装ajax
封装原生ajax
<script>
// 接口地址: https://api.apiopen.top/getJoke
const p = new Promise((resolve, reject) => {
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化
xhr.open("GET", "https://api.apiopen.top/getJ");
//3. 发送
xhr.send();
//4. 绑定事件, 处理响应结果
xhr.onreadystatechange = function () {
//判断
if (xhr.readyState === 4) {
//判断响应状态码 200-299
if (xhr.status >= 200 && xhr.status < 300) {
//表示成功
resolve(xhr.response);
} else {
//如果失败
reject(xhr.status);
}
}
}
})
//指定回调
p.then(function(value){
console.log(value);
}, function(reason){
console.error(reason);
});
</script>
模块化
模块化语法
模块功能主要由两个命令构成:export 和 import
- export:用户规定模块的对外接口
- import:用于导入其他模块
export对外暴露接口的方式有三种:
-
分别暴露
//a.js //分别暴露 export let school = 'aynu'; export function teach() { console.log("我在b站学习!"); }
-
统一暴露
//b.js //统一暴露 let school = 'aynu'; function findJob(){ console.log("我准备去实习!!"); } export {school, findJob};
-
默认暴露
//c.js //默认暴露 export default { school: 'aynu', change: function(){ console.log("我凉了!!"); } }
import引入其他外部模块
-
万能导入方式
<script type="module"> //1. 通用的导入方式 import * as a from "./src/js/a.js"; import * as b from "./src/js/b.js"; import * as c from "./src/js/c.js"; </script>
-
解构赋值形式
<script type="module"> //2. 解构赋值形式 import {school, teach} from "./src/js/a.js"; //重名的可以引入后取别名 import {school as mtf, findJob} from "./src/js/b.js"; import {default as c} from "./src/js/c.js"; </script>
-
简便形式(注意:这里的简便形式只适用于通过默认方式暴露接口的模块)
<script type="module"> //3. 简便形式 针对默认暴露 import c from "./src/js/c.js"; </script>
ES8新特性
async
函数
<script>
//async 函数
async function fn(){
// 返回一个字符串
// return 'aynu';
// 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
// return;
//抛出错误, 返回的结果是一个失败的 Promise
// throw new Error('出错啦!');
//返回的结果如果是一个 Promise 对象
return new Promise((resolve, reject)=>{
resolve('成功的数据');
// reject("失败的错误");
});
}
const result = fn();
//调用 then 方法
result.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
})
</script>
await
函数
- await 必须写在 async 函数中
- await 右侧的表达式一般为 promise 对象
- await 返回的是 promise 成功的值
- await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理
- await取代了
Promise
对象中的then方法
<script>
//创建 promise 对象
const p = new Promise((resolve, reject) => {
// resolve("用户数据");
reject("失败啦!");
})
// await 要放在 async 函数中.
async function main() {
try {
let result = await p;
//
console.log(result);
} catch (e) {
console.log(e);
}
}
//调用函数
main();
</script>
async
和await
封装ajax
<script>
// 发送 AJAX 请求, 返回的结果是 Promise 对象
function sendAJAX(url) {
return new Promise((resolve, reject) => {
//1. 创建对象
const x = new XMLHttpRequest();
//2. 初始化
x.open('GET', url);
//3. 发送
x.send();
//4. 事件绑定
x.onreadystatechange = function () {
if (x.readyState === 4) {
if (x.status >= 200 && x.status < 300) {
//成功啦
resolve(x.response);
}else{
//如果失败
reject(x.status);
}
}
}
})
}
//promise then 方法测试
// sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
// console.log(value);
// }, reason=>{})
// async 与 await 测试 axios
async function main(){
//发送 AJAX 请求
let result = await sendAJAX("https://api.apiopen.top/getJoke");
//再次测试
let tianqi = await sendAJAX('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')
//注意:上述写法会打破操作的“并行”,效率不高()
let [a,b] = await Promise.all([result,tianqi])
console.log(tianqi);
}
main();
</script>
注意:
原文地址:https://www.jb51.cc/wenti/3284365.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。