es6简单入门

这几天在学习vue，会发现现在的框架都需要有一定的es6基础，所以也快速的了解了一下es6语法的新特性，看的不多，只能简单的分享一下。

1.声明变量 `let` `const`

let的三个特性
1.不允许重复声明
2.不存在变量提升
3.块级作用域暂时性死区

  let num = 1;
  let num = 2;
  console.log(num)
//此时会报错
//Uncaught SyntaxError: Identifier 'num' has already been declared

console.log(name)
let name = "xiaoming"
//此时也会报错
//Uncaught ReferenceError: num is not defined

if(false){
  let per = 1;
}
console.log(per)
//此时会报错
// Uncaught ReferenceError: per is not defined

const的特性跟let相同，同时它还有一个特性：

声明一个只读的常量，一旦声明，常量的值就不能更改

需要注意

var 声明的变量是由函数来划分作用域的
let 声明的变量是由代码块划分作用域的（块级作用域）

2.解构赋值

ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这就被称之为解构赋值

数组的解构赋值

  let [a,b] = [1,2]
  let[c,d,e=5] = [3,4]

  //此时a,b,c,d,e 的值分别对应1,2,3,4,5

对象的解构赋值

 let{name,age} = {name:"小明",age:23}

//此时变量name的值为“小明” ，变量age的值为23

函数参数的解构赋值

function fn({a,b,c}){
  console.log(a)
  console.log(b)
  console.log(c)
}

fn({
  a:1,
  b:2,
  c:3
})

3.模板字符串

以前开发的时候经常会运用到字符串拼接，拼接起来很麻烦而且容易出错，例如：

 var str =  '<div class="record">' +
              '<div class="header clearfix">'+
                '<span class="fl"></span>'+
                '<h3 class="fl">备案信息</h3>'+
              '</div>'+
             '</div>'

//这是常规的字符串拼接 容易出错

ES6提供了模板字符串，这是一种增强的字符串，用反引号（`）来标识。

`<div class="record">
        <div class="header clearfix">
            <span class="fl"></span>
            <h3 class="fl">备案信息</h3>
        </div>
</div>`
//只需要用反引号  ` 将需要拼接的字符串包裹起来就可以了

同时可以在占位符${}中直接写入表达式以及变量

   var name = "xiaoming"; 
   var str = `helloWorld ${name}`
   console.log(str)
  //helloWorld  xiaoming

4.箭头函数

ES6中提供了箭头函数，使用( => )来定义函数

var f = (a,b) = > a + b
console.log(f(1,2))
//打印出来的是3

箭头函数不用手动提取返回值，箭头函数会自动返回 返回值

 document.onclick = function () { 
           setTimeout(function () {
                console.log(this)
             },1000)
         }
//此时 点击事件触发时，一秒钟以后会打印window对象

document.onclick = function(){
        setTimeout(() => {
            console.log(this)
        },1000)
    }
//用箭头函数  此时打印出来的是document对象

上面两个例子表明：用箭头函数定义的函数，函数内this是在定义时就已经确定了指向，而正常定义的函数，函数内this是在调用的时候才能确定this指向

5.promise对象

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件更合理和更强大。
Primise对象有两个特性：

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

es6简单入门