概念:
1.ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準蠕蚜。
????????
??2.因為當前版本的ES6是在2015年發(fā)布的状囱，所以又稱ECMAScript 2015扔嵌。
????????
??3.雖然目前不是所有瀏覽器都兼容,但是很多程序員實際項目當中已經開始使用ES6開發(fā)了;
依賴:
npm(包管理工具)
-v查看版本
-g全局安裝???
????在mac的終端里,需要添加 sudo 前綴,輸入密碼,才能全局安裝;
npm init 初始化
????會創(chuàng)建一個 package.json 文件 (包管理文件)
npm install jquery????????
????安裝jquery(等工具)
--save?????
????將配置,保存到 package.json 文件的依賴中去;?????
????(依賴:項目所需要的工具,當項目初始化(npm install)的時候,會主動幫我們安裝依賴里面的工具)
npm install jquery@1.12.4 --save
????可以使用 @ 來安裝指定版本
Babel轉碼器
Babel是一個廣泛使用的ES6轉碼器般贼，可以將ES6代碼轉為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行靴庆。
????????
??使用方法:???????
??依賴:?Node.js????
?????npm install -g babel-cli (全局安裝一個命令行工具)
1.項目初始化???
????npm init
???????
??2.全局安裝babel????
????npm install --save-dev babel-cli babel-preset-env
??
??3.在項目目錄下創(chuàng)建一個文件????
????后綴名為 .babelrc???????
????內容為:
presets(預設)
{
"presets": ["env"]
}
???
4.命令行操作,執(zhí)行轉碼????????
????babel 01.js -o 01babel.js
??????將 01.js 進行轉碼,新建一個 01babel.js 承接;
????babel-node 01.js?????
??????轉碼運行,但是不會生成新文件;
webpack腳手架工具
可以將 js css 等文件,打包生成一個文件;??
??使用方法:????
??依賴:?npm install -g webpack (webpack腳手架工具)
??
??1.項目初始化????
????npm init
?????
??2.打包,生成新文件;?????
????webpack 01.js 02.js
??????將01.js進行打包,生成02.js
?????? 01.js 中,引入的文件也會被打包進來;
使用方法2: (配置文件打包)???????
????webpack.config.js
最常用的ES6特性
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
聲明變量:
let
用途類似于 var 都是用來聲明變量的,但是又有很大的區(qū)別;
????1. let 為JavaScript新增了 塊級作用域 ,使用 let 聲明的變量,只在 let 命令所在的代碼塊內有效;
????
??例如:
let name = 'zach'
while (true) {
let name = 'obama'
console.log(name) //obama
break
}
console.log(name) //zach
外面的 let 并不會影響里面的內容;
2. let 可以避免變量泄露為全局變量
例如:
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10?
用 var 聲明的 i 作用域是全局,所以每一次循環(huán)新的i值都會覆蓋舊值,導致即使 a[6] 會出現(xiàn)最終的值 10;
?????
??而用 let 則不會出現(xiàn)這樣的問題:
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
3.let 不可以提前聲明(變量提升),也不可以重復聲明
const
同樣是聲明變量,但是聲明的是 常量.(常量的值不能改變)
原型:
ES6提供了更接近傳統(tǒng)語言的寫法褪贵，引入了Class（類）這個概念掂之。
新的class寫法讓對象原型的寫法更加清晰、更像面向對象編程的語法脆丁，也更加通俗易懂世舰。
例如:
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
console.log(this.type + ' says ' + say)
}
}
let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal {
constructor(){
super()
this.type = 'cat'
}
}
let cat = new Cat()
cat.says('hello') //cat says hello
上面代碼首先用class定義了一個“類”，可以看到里面有一個constructor方法槽卫，這就是構造方法跟压，而this關鍵字則代表實例對象。
簡單地說歼培，constructor內定義的方法和屬性是實例對象自己的裆馒，而constructor外定義的方法和屬性則是所有實力對象可以共享的。??
?
????Class之間可以通過extends關鍵字實現(xiàn)繼承丐怯，這比ES5的通過修改原型鏈實現(xiàn)繼承，要清晰和方便很多翔横。
上面定義了一個Cat類读跷，該類通過extends關鍵字，繼承了Animal類的所有屬性和方法禾唁。
super關鍵字效览，它指代父類的實例（即父類的this對象）
子類必須在constructor方法中調用super方法，否則新建實例時會報錯荡短。這是因為子類沒有自己的this對象丐枉，而是繼承父類的this對象，然后對其進行加工掘托。如果不調用super方法瘦锹，子類就得不到this對象。
ES6的繼承機制，實質是先創(chuàng)造父類的實例對象this（所以必須先調用super方法）弯院，然后再用子類的構造函數(shù)修改this辱士。
箭頭函數(shù)(arrow function)
例如:
function(i){ return i + 1; } //
(i) => i + 1 //ES6
特性:箭頭函數(shù)里面的this指向父級;
模板字符串 `` (反引號)
在模板字符串中,可以回車換行,拼接也很方便,把變量放在 ${} 里面就行;
解構
ES6允許按照一定模式，從數(shù)組和對象中提取值听绳，對變量進行賦值颂碘，這被稱為解構
????????
??例如:
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo) //Object {cat: "ken", dog: "lili"}
聲明了2個變量,cat dog,再聲明 zoo = {cat,dog} 就可以把這兩個合并;
???????
??數(shù)組的解構:
let [a,b,c] = [1,2,3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
對象的解構:
let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many) //animal 2
參數(shù)默認值
在ES6中有函數(shù)參數(shù)默認值,當你沒有給函數(shù)傳遞參數(shù)的時候,就會使用默認值
例如:
function animal(type = 'cat'){
console.log(type)
}
animal()
type = 'cat' //此時, cat 就是函數(shù)的默認參數(shù)
????在調用函數(shù)時,如果不寫參數(shù),就會默認有一個參數(shù) cat,如果寫了,就會替換它;
總結
以上就是ES6最常用的一些語法，可以說這20%的語法椅挣，在ES6的日常使用中占了80%...
