ES6常用语法总结

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。今天就来总结一下在工作中es6常用的属性方法

1、let

ES6新增了let命令，用来生命变量。它的用法类似于var,但是所声明的变量，只在let命令所在的代码块内有效。

for (let i = 0; i < 10; i++) {
 
 }
    console.log(i) //ReferenceError: i is not defined<br><br>for(var i=0;i<10;i++){<br><br>}<br>console.log(i) //10<br>

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。let具有块级作用域的。var不存在块级作用域问题，具有全局变量提示的问题存在

2、const

const a = 10；
    a = 20；
console.log(a)  //TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const a;
    console.log(a)

上面代码表示，对于const来说，只声明不赋值，就会报错。

let与const

　1.都不能重复声明

　2.都存在块级作用域问题

3.只在声明所在的块级作用域内有效。

3、模板字符串（反引号 ``）

模板字符串就是一种字符串的新的表现形式

（1）基本用法

let s1 = ` hello `
let s2 = ' hello '

(2) 字符串换行

var box =`<div>
            <p>
              <span>123</span>
            </p>
            <p>${a1}</p>
         </div>`;

（3）模板中传变量 ${变量}

    let obj = {
        name: 'jack',
        age: 20
    };
    console.log(`名称：${obj.name},年龄：${obj.age}`);  //名称：jack,年龄：20

4、for循环遍历

　　let str = "hello";

    //1.for遍历
    for (let i = 0; i < str.length; i++) {
        console.log(i, str[i]);     //i 索引    数值类型
    }
    
    //2.数组->for->for in
    let arr = [1, 2, 3];
    for (let i in arr) {
        console.log(i, arr[i]);     //i 索引    字符串类型
    }
    
    //3.for... of
    for(let i of str){
        console.log(i);     //数据
    }

5、箭头函数

基本用法：

　　//匿名函数
    div.onclick=function(){
        console.log("你好")
    }
    //箭头函数
    div.onclick=()=>{
        console.log("你好")
    }

有一个参数的箭头函数

var fn=(a)=>{
    console.log("abc");
}
//等价于：
 var fn=a=>{
    console.log("abc");
 }

有2个及更多参数的箭头函数

var f=(a,b,c)=>{
      console.log("abc")
}

6、Promise

Promise是异步编程一种解决方案(回调地狱)

在没有promise都是这样写的回调，一层一层的写，$.get("/getUser",function(res){
        $.get("/getUserDetail",function(){
            $.get("/getCart",function(){
                $.get("/getBooks",function(){
                    //...
                })
            })
        })
    })

promise的基本用法

new Promise((resolve,reject) => {
    setTimeout(() => {
       resolve()
    },1000)
}).then(() => {
    console.log("hellow world");
})

promise实现多层回调

new Promise((resolve,reject)=>{
        $.get("/getUser",res=>{
            resolve(res)
        })
    }).then(res=>{
        //用户基本信息
        return new Promise(resolve=>{
            $.get("/getUserDetail",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //用户详情
        return new Promise(resolve=>{
            $.get("/getCart",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //购物车信息
    })

promise实现错误处理

new Promise((resolve,reject)=>{
        $.ajax({
            url:"/getUser",
            type:"GET",
            success:res=>{
                resolve(res);
            },
            error:res=>{
                reject(res)
            }
        })
    }).then(resSuccess=>{
        //成功的返回值
    }.resError=>{
        //失败的返回值
    })