1.var let const
var
(1). 在js中 通常使用 var会发生变量提升，即脚本开始运行时，变量已经存在了，但是没有值，所以会输出undefined。
let
而let不会发生变量提升,这表示在声明它之前，变量是不存在的，这时如果用到它，就会抛出一个错误。
(2).var 是函数级作用域，let是块级作用域{}：
(3) let不允许在相同作用域内，重复声明同一个变量
const
(4) const声明一个只读的常量 一旦声明，常量的值就不能改变
(5) const命令声明的常量也是不提升，只能在声明的位置后面使用
(6) const声明的常量，也与let一样不可重复声明
2.字符串模板
用一对反引号（模板字符串）标识 ，它可以当普通字符串使用（'普通字符串'），也可以用来定义多行字符串 ，在模板字符串中可以嵌入变量 ，js表达式或函数等 ，变量，js表达式或函数需要写在${}中
3.变量的解构赋值
Es6允许按照一定的模式 ，从数组和对象中提取值 ，对变量进行赋值 ，这被称作解构赋值 ，意思就是把 某个对象中的属性，当作变量，给解放出来，这样，今后就能够当作变量直接使用了；
数组
数组中的会自动解析到对应接收该值的变量中 ，数组的解构赋值要一一对应 ，否则就是undefined
对象
对象的与数组不同的是 ，对象不需要一一对应 ，但是变量必须和属性同名（不同名要把属性名赋值给变量 username:name） ，才能取到正确的值。
4.箭头函数
在es6中 ，提供了函数的简洁写法 ，我们称之为箭头函数 ，箭头函数，本质上就是一个匿名函数 ，箭头函数的特性： 箭头函数内部的 this, 永远和 箭头函数外部的 this 保持一致 ，例如this：
简写方法有三种变体：
- 变体1：如果箭头函数，左侧的形参列表中，只有一个参数，则，左侧小括号可以省略；
- 变体2：如果右侧函数体中，只有一行代码，则，右侧的{ }可以省略；
- 变体3：如果箭头函数左侧 只有一个 形参，而且右侧只有一行代码，则 两边的()和{}都可以省略注
注意： 如果我们省略了 右侧函数体的{ }，那么，默认会把 右侧函数体中代码的执行结果，当作箭头函数的调用结果 return 出去；
5.Promise (www.cnblogs.com/qianguyihao…)
异步
JavaScript的执行环境是单线程。
所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程。
异步模式可以一起执行多个任务。
常见的异步模式有以下几种：
-
定时器
-
接口调用
-
事件函数
接口调用的方式
js 中常见的接口调用方式，有以下几种：
- 原生ajax
- 基于jQuery的ajax
- Fetch
- Promise
- axios
Promise的优点
Promise是异步编程的一种解决方案
可以很好地解决回调地狱的问题（避免了层层嵌套的回调函数）。
Promise的基本用法
Promise 的常用API：实例方法【重要】
Promise 自带的API提供了如下实例方法：
-
promise.then()：获取异步任务的正常结果。
-
promise.catch()：获取异步任务的异常结果。
-
promise.finaly()：异步任务无论成功与否，都会执行。
代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
function queryData() {
return new Promise((resolve, reject) => {
setTimeout(function() {
var data = { retCode: 0, msg: 'qianguyihao' }; // 接口返回的数据
if (data.retCode == 0) {
// 接口请求成功时调用
resolve(data);
} else {
// 接口请求失败时调用
reject({ retCode: -1, msg: 'network error' });
}
}, 100);
});
}
queryData()
.then(data => {
// 从 resolve 获取正常结果
console.log('接口请求成功时，走这里');
console.log(data);
})
.catch(data => {
// 从 reject 获取异常结果
console.log('接口请求失败时，走这里');
console.log(data);
})
.finally(() => {
console.log('无论接口请求成功与否，都会走这里');
});
</script>
</body>
</html>
Promise 的常用API：对象方法【重要】
Promise 自带的API提供了如下对象方法：
-
Promise.all()：并发处理多个异步任务，所有任务都执行成功，才能得到结果。
-
Promise.race(): 并发处理多个异步任务，只要有一个任务执行成功，就能得到结果。
代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
封装 Promise 接口调用
*/
function queryData(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理正常结果
resolve(xhr.responseText);
} else {
// 处理异常结果
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
}
var promise1 = queryData('http://localhost:3000/a1');
var promise2 = queryData('http://localhost:3000/a2');
var promise3 = queryData('http://localhost:3000/a3');
Promise.all([promise1, promise2, promise3]).then(result => {
console.log(result);
});
Promise.race([promise1, promise2, promise3]).then(result => {
console.log(result);
});
</script>
</body>
</html>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！