本篇文章接着上面的文章介绍ES6新增的一些好用的属性-函数参数默认值 、模板字符串、解构赋值、…运算符、箭头函数
本篇文章将会从下面五个小点来叙述:
- Promise
- Let与Const
- 类
- 对象属性简写
1. Promise
说到Promise,我们用简短的概念描述一下它:Promise 是一个对象,它可以解决异步(回调地狱)的问题,但是promise本身不是异步的,一个 promise 会有 3 种可能的状态:fulfilled(已完成)、rejected(已拒绝)、pending(等待中),Promise的状态具有不受外界影响和不可逆两个特点
不使用ES6的promise时
setTimeout(function()
{
console.log('Hello'); // 1秒后输出"Hello"
setTimeout(function()
{
console.log('yannnnnm'); // 2秒后输出"yannnnnm"
}, 1000);
}, 1000);
这里只是简单的模仿一下过程
使用ES6的promise
function delayDo(time, content) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(content)
}, time)
})
}
//通过ansync异步 以及 await等待来实现过程
async function text() {
var r1 = await delayDo(1000, "1")
console.log(r1);
var r2 = await delayDo(2000, "2")
console.log(r2);
var r3 = await delayDo(1000, "3")
console.log(r3);
}
text()
这样看起来是不是比前面清晰了很多,是的 ,我知道!那么我们来看下一个
2. let和const
在ES6之前我们利用var声明变量,
我们看下他们的区别
- 在变量提升来看
用var声明的变量会提升,但是const和let不会,
console.log(a); //undefined
var a = 10;
console.log(b);
// 报错 Uncaught ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(c);
//报错 Uncaught ReferenceError: Cannot access 'c' before initialization
const c = 10;
- 暂时性死区
概述:如果在代码块中存在 let 或 const 命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错
var tmp = 123;
if (true) {
tmp = 'abc';//报错,Uncaught ReferenceError: tmp is not defined
let tmp;
}
这段代码的原意是在 if 内定义外部的 tmp 为 ‘abc’。
但现实是,存在全局变量 tmp,但是块级作用域内 let 又声明了一个 tmp变量,导致后者被绑定在这个块级作用域中,所以在 let 声明变量前,对 tmp 赋值就报错了。
- 重复声明
var 允许重新声明那个,会覆盖上一个,但是let和const不允许重复声明,会报错 - 重复赋值
虽然let不允许重新声明,但是和var一样,可以重新赋值,但是const在声明时就已经不能改变值; - 作用域
在ES6之前只有全局作用域和函数作用域,但是在ES6中只要用let和const声明就会产生块级作用域
3 类
不使用ES6
使用构造函数创建对象:
function Stu(name, age) {
this.name = name;
this, age = age;
this.tro = function() {
console.log("我是" + this.name + ",你好呀");
}
}
var yannnnm = new Stu("yannnnm", 23);
yannnnm.tro()
使用ES6的类
使用Class定义类,更加规范,且你能够继承
class Stu1 {
constructor(name, age) {
this.name = name;
this.age = age;
}
tro() {
console.log(`我是${this.name},你好呀`);
}
}
var yannnnm1 = new Stu1("yannnnm", 23);
yannnnm1.tro()
4. 对象属性简写
不使用ES6对象属性简写
对象中必须包含属性和值,显得非常多余:
var name="yannnnm";
var sepci="cute";
var yannnnm={
name:name,
sepci:sepci,
}
使用ES6对象属性简写
var name="yannnnm";
var sepci="cute";
var yannnnm={
name,
sepci,
}
对象中直接写变量,非常简单:
总结
ES6实用属性yannnnnm篇到这里就结束拉,这仅仅是我认为比较实用的部分,有用的还有很多,ES6还是很有意思的,大家可以好好挖掘一下