站長資訊網(wǎng)
es6語法是一種標準。ES6全稱是ECMAScript 6，是正式發(fā)布的JavaScript語言的一種標準，該標準的目標是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。ECMAScript和JavaScript的關(guān)系是：前者是后者的規(guī)格，后者是前者的一種實現(xiàn)。
前端（vue）入門到精通課程：進入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
ES6全稱是ECMAScript 6，是正式發(fā)布的JavaScript語言的一種標準，該標準的目標是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。
ES6是繼ES5之后發(fā)布的JavaScript語言的新一代標準，加入了很多新的特性和語法，該標準于2015年6月17日發(fā)布了正式版本，并被正式命名為ES2015。
ECMAScript 和 JavaScript 的關(guān)系是，前者是后者的規(guī)格，后者是前者的一種實現(xiàn)（另外的 ECMAScript 方言還有 JScript 和 ActionScript）
2011 年，ECMAScript 5.1 版發(fā)布后，就開始制定 6.0 版了。因此，ES6 這個詞的原意，就是指 JavaScript 語言的下一個版本。 ES6 的第一個版本，在 2015 年 6 月發(fā)布，正式名稱是《ECMAScript 2015 標準》（簡稱 ES2015）。 2016 年 6 月，小幅修訂的《ECMAScript 2016 標準》（簡稱 ES2016）如期發(fā)布，這個版本可以看作是 ES6.1 版，因為兩者的差異非常小，基本上是同一個標準。根據(jù)計劃，2017 年 6 月發(fā)布 ES2017 標準。
因此，ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017 等等，而 ES2015 則是正式名稱，特指該年發(fā)布的正式版本的語言標準。我 們說 ES6 的地方，一般是指 ES2015 標準，但有時也是泛指“下一代 JavaScript 語言”。
一、塊作用域構(gòu)造let和const
塊作用域存在于：函數(shù)內(nèi)部、塊中（即：字符 “ { ” 與 “ } ” 之間的區(qū)域）
1.let聲明
- 通過var聲明的變量存在變量提升機制，而let聲明的變量不會被提升，可將變量的作用域限制在當前代碼塊中
//通過var聲明的變量 //函數(shù)內(nèi)部 function changeState(flag) { if (flag) { var color = "red" } else { console.log(color); return null; } } changeState(false); //塊中 { var a = 1; } console.log("a=" + a); //for循環(huán)中 for (var i = 0; i < 10; i++) {} console.log("i=" + i);
//通過let聲明的變量 //函數(shù)內(nèi)部 function changeState(flag) { if (flag) { let color = "red" } else { console.log(color); return null; } } changeState(false); //塊中 { let a = 1; } console.log("a=" + a); //for循環(huán)中 for (let i = 0; i < 10; i++) {} console.log("i=" + i);
- 在同一作用域下，不能使用let重復(fù)聲明已經(jīng)存在的標識符，但如果在不同的作用域下，則是可以的。
// 在同一作用域下，不能使用let重復(fù)聲明已經(jīng)存在的標識符，但如果在不同的作用域下，則是可以的 var a=0; var b=0; { let a=0; } let b=0;
- 使用let聲明變量，可以防止變量的重復(fù)聲明
var a=0; var a=10;//ok var b=1 let b=100;
2.const聲明
- 每個通過const關(guān)鍵字聲明的變量必須在聲明的同時進行初始化
- 在同一作用域下用const聲明已經(jīng)存在的標識符也會導(dǎo)致語法錯誤
- 使用const聲明對象，對象本身的綁定不能修改，但對象的屬性和值是可以修改的
const person={ name:"zhangSan" }; person.name="lisi"; //ok person.age=19; //ok person={ name:"wangwu" };
3.全局塊作用域綁定
- 在全局作用域中使用var聲明的變量或?qū)ο?，將作為瀏覽器環(huán)境中的window對象的屬性（使用var很可能會無意中覆蓋一個已經(jīng)存在的全局屬性）
var greeting="welcome"; console.log(window.greeting); console.log(window.Screen); var Screen="liquid crystal"; console.log(window.Screen);
- 使用let或const聲明變量和常量，避免覆蓋window對象的屬性
let greeting="welcome"; console.log(window.greeting); console.log(window.Screen); const Screen="liquid crystal"; console.log(window.Screen==Screen);
總結(jié)
- 通過var聲明的變量存在變量提升機制，而let聲明的變量不會被提升，可將變量的作用域限制在當前代碼塊中
- 在同一作用域下，不能使用let重復(fù)聲明已經(jīng)存在的標識符，但如果在不同的作用域下，則是可以的
- 使用let聲明變量，可以防止變量的重復(fù)聲明
- 每個通過const關(guān)鍵字聲明的變量必須在聲明的同時進行初始化
- 在同一作用域下用const聲明已經(jīng)存在的標識符也會導(dǎo)致語法錯誤
- 使用const聲明對象，對象本身的綁定不能修改，但對象的屬性和值是可以修改的
- 在全局作用域中使用var聲明的變量或?qū)ο?，將作為瀏覽器環(huán)境中的window對象的屬性（使用var很可能會無意中覆蓋一個已經(jīng)存在的全局屬性）
- 使用let或const聲明變量和常量，避免覆蓋window對象的屬性
二、解構(gòu)賦值
解構(gòu)賦值是對賦值運算符的擴展。
他是一種針對數(shù)組或者對象進行模式匹配，然后對其中的變量進行賦值。
在代碼書寫上簡潔且易讀，語義更加清晰明了；
也方便了復(fù)雜對象中數(shù)據(jù)字段獲取。
//1、數(shù)組解構(gòu) // 傳統(tǒng) let a = 1, b = 2, c = 3 console.log(a, b, c) // ES6 let [x, y, z] = [1, 2, 3] console.log(x, y, z) /*********************************************************************************************************/ /*********************************************************************************************************/ //2、對象解構(gòu) let user = {name: 'Johon', age: 18} // 傳統(tǒng) let name1 = user.name let age1 = user.age console.log(name1, age1) // ES6 let { name, age } = user//注意：解構(gòu)的變量必須和user中的屬性同名 console.log(name, age)
三、模板字符串
模板字符串相當于加強版的字符串，用反引號 `,除了作為普通字符串，還可以用來定義多行字符串，
還可以在字符串中加入變量和表達式。
// 字符串插入變量和表達式。變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達式。 let name = 'Kuangshen' let age = 27 let info = `My Name is ${name},I am ${age+1} years old next year.` console.log(info) // My Name is Kuangshen,I am 28 years old next year.
四、聲明對象簡寫
const age = 12 const name = '小王' // 傳統(tǒng) const person1 = {age: age, name: name} console.log(person1) // ES6 const person2 = {age, name} console.log(person2) //{age: 12, name: '小王'}
五、定義方法簡寫
// 傳統(tǒng) const person1 = { sayHi:function(){ console.log('Hi') } } person1.sayHi();//'Hi' // ES6 const person2 = { sayHi(){ console.log('Hi') } } person2.sayHi() //'Hi'
六、對象拓展運算符
符號 (…)
let person = {nameL:"oAk",age:23} let someone1 = persion // 引用賦值 let someone2 = { ...person } // 對象拷貝 someone1.name = 'oAk_OLD' someone2.name = 'oAk_NEW' console.log(persion) // {name:'oAk_OLD', age:23} console.log(someone1) // {name:'oAk_OLD', age:23} console.log(someone2) // {name:'oAk_NEW', age:23}
【
