ES6為ECMA（European Computer Manufactures Association 歐洲計算機制造聯合會） Script6的簡寫，推出于2015年。而ES5在IE8以下版本是不支持的，如trim（）截取前后字符串的方法就不支持。

1、let

在ES6推出后，我們可以使用let聲明一個變量，像var那樣。不過兩者也有不同之處。首先，let聲明沒有變量提升，并且變量不能重復聲明:

console.log(a);
let a = "zhar";

let c = 10;
let c = 20;
console.log(c);

所以，上面兩種情況都會報錯。
let在for循環中聲明的變量為局部變量，只存在于這個塊級作用域中，循環之外不存在這個變量，所以可以用來避免了for循環那個經典的BUG：

for (let i = 0;i < 5;i++) {
    arr[i] = function () {
        console.log(i);
    }
}
//console.log(i);
arr[3]();

let聲明的變量為塊級變量（塊級作用域），和外部聲明的同名變量互不影響，稱為暫時性死區

var e = 100;
function fun() {    
    let e;
    e = 200;    
    console.log(e);//200
}
fun();
console.log(e);//100

2、const

const為constant（常量）的縮寫，用來聲明一個常量。常量為一個固定值，如：PI，并且通常用全大寫的字母來表示這是一個常量。一旦聲明必須賦值，并不可更改，其它和let一致。如:

var PI = 3.14;

3、arrow箭頭函數

函數的新寫法
代碼如下:

var fun = function() {
    return 10;
}
fun();

let foo = ()=>10;
console.log(foo());

let bar = (a,b)=>a*b;
console.log(bar(10,20));

let a = (a,b)=>{
    return a+b;
}
console.log(a(33,44));

function b (callback) {
    callback();
}
b(function () {
    console.log(1111);
})

b(()=>{console.log(222)});

箭頭函數能保留當前的作用域

使用箭頭函數聲明的函數，其作用域為聲明時所在的位置(作用域);
箭頭函數沒有自己的this,沒有自己的作用域，作用域來自于所在的作用域
不能使用new關鍵字
不能使用arguments

我們可以利用這些屬性，在函數里的定時器中使用函數中的this：
之前的寫法為

let obj = {
    name : "zhar",
    say : function () {
        console.log(this.name);
        var _this = this;
        setTimeout(function () {
            console.log(_this.name);
        },0);       
    }
}
obj.say();

現在的寫法

let obj = {
    name : "zhar",
    say : function () {
        console.log(this.name);
        var _this = this;
        setTimeout(()=>console.log(this.name),0);
    }
}
obj.say();

4、template模板字符串

我們可以使用template來方便的書寫一個便簽和字符串等。如:

let name = "zhar";
var str = `
    <div>
        <span>${name}</span>
    </div>
    abc
    def
`;
console.log(str);

5、object

為聲明變量提供了更加方便的方法，直接上代碼:

//var name = "zhar";

//var obj = {
//  name : name
//}
//
//console.log(obj);
//
////解構
//let age = 30;
//
//let obj2 = {name,age};
//
//console.log(obj2);
//
//let n = "nnn"
//let obj3 = {n,age};
//console.log(obj3);
//
//let obj4 = {nn:"2n",n,age}
//console.log(obj4);

//let obj5 = {name:"zhar",age:30};
////let{name,age} = obj5;
//let{name} = obj5;// === let name = obj5.name;
//console.log(name);


var obj6 = {name:"liu",age:30,address:"北京"}
function fun ({name,age,address}) {
    //var name = obj.name;var age = obj.name;var address = obj.address;
    console.log(name,age,address)
}
fun(obj6);

為對象添加某個之前聲明了的屬性，只需將屬性名寫在花括號里就可以啦

6、Set&Map

Set和Map分別用來聲明一個數組和對象。
Set和Array類似，不過沒有重復的元素，并且無length屬性：

let s = new Set([2,2,3,3,4,4,5]);
console.log(s);

let s2 = new Set();
s2.add(1);

add() 添加元素
delete() 刪除元素
has() 是否包含元素
size 得到集合長度
clear() 清空集合

Map用法和Set類似，并且以上方法也存在：

let m = new Map();
m.set("name","zhar");
console.log(m);
console.log(m.get("name"));

//Map  可以使用任意類型做鍵，哪怕時候函數對象都行
let a = 10;
m.set(a,"abc");
console.log(m);
//$("div").length;
//$("div").size;

7、Array.from() 方法

之前我們要將類數組（如：arguments，string，NodeList--querySelectAll選擇的內容）轉為數組需要用的方法為Array.prototype.slice.call(arguments);，而現在只需用**Array.from() **方法將arguments轉為數組：

function fun () {   
    console.log(arguments); s   
    let a = Array.from(arguments);
    a.push("d");
    console.log(a);//[a,b,c,d]
    
    
}
fun("a","b","c");

let b = Array.from("hello");
console.log(b)//[h,e,l,l,0]

8、default默認參數

函數需要接收一個參數，而沒有傳參時需要給設置一個默認值時的方便寫法。

之前的寫法

function fun(a) {
    //a=a或0,不傳參數為0
    a = a || 0;
    return a/5;
}
console.log(fun(3));
console.log(fun());

現在的寫法

//參數默認值,不傳參數時，執行等于0
function bar (a=0) {
    return a/5;
}
console.log(bar());
console.log(bar(10));

只需寫成 a=0 即可

9、class聲明構造函數

ES6中，聲明到構造函數本身的屬性只需聲明在constructor中，而聲明到原型上的屬性直接寫在花括號里即可，并且提供了繼承的方法：

class Person{
    constructor () {
        this.age = 30;
        this.name1 = "jack";
    }
    say(name){//Person.prototype.say
        console.log("你好:"+name+this.age);
    }
    say1() {
        
    }
}
//var p = new Person();
//p.say("Tom");

//繼承時，是沒有this的，沒有執行環境的，必須調用super()來繼承父級的this
class Student extends Person {
    constructor (age) {     
        super();
        this.age = age;
    }
}

let s = new Student(300);
s.say("小明");

10、reset運算符

為了替換arguments而出現的方法。
可以使用... 來獲取剩余參數，如：

function fun(d,e,...a) {
    //可以使用arguments接收
    console.log(d,e,a)
}
fun(1,2,3,4,5,6);

... 擴展運算符

let arr = [2,3,4,5];
let arr2 = [6,7,8]
console.log(...arr);//2 3 4 5

連接兩個數組

let arr = [2,3,4,5];
let arr2 = [6,7,8];
//原生的寫法
//console.log(arr.concat(arr2));
console.log([...arr,...arr2]);

擴展運算符將arguments轉為數組

function foo (x,y,z) {  
    console.log([...arguments]);
}

11、Promise

在ES6中，使用Promise模塊來模擬異步請求時，函數層層嵌套的情況：

//promise 承諾

//ES5
//function fun (callback) {
//  //用 setTimeout 替代一個異步執行的內容  ajax
//  //異步: 不可預估返回結果時間
//  setTimeout(function () {
//      console.log("異步--執行完成");
//      callback("異步--給你的結果");
//  },1000)
//}
////回調函數
//fun(function (res) {
//  console.log(res);
//});


//promise語法:
//let promise = new Promise(function (resolve,reject) {
//  if (true) {//異步操作成功
//      resolve();
//  }else {
//      reject();
//  }
//});
//
//promise.then(function () {
//  console.log("成功");
//},function () {
//  console.log("失敗");
//});

function sync1 () {
    return new Promise(function (resolve,reject) {
        setTimeout(function () {
            if (5 > 4) {
                resolve("異步一: 大于");
            }else {
                reject("異步一: 小于");
            }
        },1000)
    })
}
function sync2 (result) {
    return new Promise (function (resolve,reject) {
        setTimeout(function () {
            if (true) {
                resolve("異步二: true");
            }else {
                reject("異步二: false");
            }
        },2000)
    })
}
function sync3 () {
    return new Promise (function (resolve,reject) {
        setTimeout(function () {
            if (true) {
                resolve("異步三: true");
            }else {
                reject("異步三: false");
            }
        },4000)
    })
}
//sync1().then(function (res) {
//  //console.log(abc);
//  console.log(res);
//  return sync2(res);
//},function (err) {
//  console.log(err);
//}).then(function (r2) {
//  //拋出錯誤
//  //throw new Error("錯誤啦！")
//  console.log(r2);
//  return sync3();
//}).catch(function () {
//  //e為錯誤信息
//  console.log("catch異常",e);
//}).then(function (r3) {
//  console.log(r3);
//  return "abc";
//}).then(function (r4) {
//  console.log(r4);
//  return "def"
//}).then(function (r5) {
//  console.log(r5);
//}).catch(function () {
//  console.log("異常");
//});

//Promise.all([promise1,promise2,promise3,...])  全部異步函數執行完成后調用  result
//以最慢者為準

//Promise.all([sync1(),sync2(),sync3()]).then(function (res) {
//  console.log(res);
//});

//Promise.race()  競賽模式  以最快者為準   只返回最快的結果
Promise.race([sync1(),sync2(),sync3()]).then(function (res) {
    console.log(res);
});


//箭頭函數的寫法
//sync1().then((res) => sync2(res)).then((r2) =>console.log(r2));

//有錯誤時直接進入到catch塊，后面代碼還會執行
//try{
//  
//}catch(e){
//  //TODO handle the exception
//}

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

ES6新屬性

ES6新屬性

1、let

2、const

3、arrow箭頭函數

4、template模板字符串

5、object

6、Set&Map

7、Array.from() 方法

8、default默認參數

9、class聲明構造函數

10、reset運算符

11、Promise

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

ES6新屬性

1、let

2、const

3、arrow箭頭函數

4、template模板字符串

5、object

6、Set&Map

7、Array.from() 方法

8、default默認參數

9、class聲明構造函數

10、reset運算符

11、Promise

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频