ES6实用属性--解放双手下篇

本篇文章接着上面的文章介绍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还是很有意思的，大家可以好好挖掘一下