標籤：extends his 字串 end 匿名 表示 asc ssi test
一 什麼是ES6?
ECMAScript 6 簡稱ES6, 在2015年6月正式發布!!!
二 常用文法
1.聲明變數 const/let/var
ES6以前用var來聲明變數，存在變數提升現象---會提前建立變數
範圍也只有全域範圍和函數範圍---所以變數提升會在函數頂部或者全域範圍頂部
**********************************************************************************************************************
let 關鍵字表示變數，const 表示常量，都是塊級範圍，比如一個函數內部，或一個{}內部。
varvar定義的變數可以修改，如果不初始化會輸出undefined，不會報錯
1 var a = 1;2 // var a;//不會報錯3 console.log(‘函數外var定義a:‘ + a);//可以輸出a=14 function change(){ 5 a = 4;6 console.log(‘函數內var定義a:‘ + a);//可以輸出a=47 }8 change();9 console.log(‘函數調用後var定義a為函數內部修改值：‘ + a);//可以輸出a=4 const
const定義的變數不可以修改，而且必須初始化
1 const b = 1; //正確2 const b; //錯誤，必須初始化3 console.log(‘函數外const定義b：‘ + ｂ);/有輸出值4 //b = 5;5 //console.log(‘函數外修改const定義b:‘ + b);//無法輸出let
let是塊級範圍，函數內部使用let定義後，對函數外部無影響
1 let c = 3;2 console.log(‘函數外let定義c：‘ + c);//輸出c=33 funcion change(){ 4 let c = 6;5 console.log(‘函數內let定義c：‘ + c);//輸出c=66 }7 change();8 console.log(‘函數調用後let定義c不受函數內部定義影響：‘ + c);//輸出c=3 let、const 和var的區別
let和var的一個明顯的區別就是沒有變數提升：
1 function fun1(){ 2 for(var i = 0; i <= 10;i++){ 3 4 } 5 console.log(i);//11;--------var變數提升 6 }; 7 fun1(); 8 function fun2(){ 9 for(let i = 0; i <= 10;i++){10 11 }12 console.log(i);//i is not defined;--------let沒有變數提升13 };14 fun2();
const和var的明顯區別是，const聲明的是常量，不可被後面的代碼賦值改變：
1 var x = 1;2 x = 2;3 console.log(x);//2;-----var聲明的是變數，可被賦值替換4 5 const y = 1;6 y = 2;7 console.log(y);//Assignment to constant variable.;------const聲明的是常量，不可改變
2.模板字串
1 <body> 2 <div id="head"> 3 </div> 4 <script> 5 let ele=` 6 <div id="head"> 7 <h1>模板字串</h1> 8 <p>動態添加</p> 9 </div>10 `;11 let ele_div=document.getElementById(‘head‘);12 ele_div.innerHTML=ele13 </script>
14 </body>
3.函數
箭頭函數，是函數的快捷寫法，類比Python的匿名函數 lambda。
最直觀的三個特點
-- 不需要function關鍵字來建立函數
-- 省略return關鍵字
-- 繼承當前內容相關的this關鍵字（因為箭頭函數的調用者是當前上下文，跟普通函數區別開
1 // 函數在哪裡調用了 才決定this到底引用的是誰~~~ 2 // 最後一個調用函數的對象才是傳到函數裡的內容物件this~~~ 3 4 console.log(this) 5 6 function test() { 7 console.log(this) 8 }; 9 10 let obj = {11 a: 1,12 test: test,13 };14 15 let obj2 = {16 b: 3,17 obj: obj,18 };19 20 obj.test();21 test();22 obj2.obj.test();
4.import 和 export
略
5.資料解構
1 const people = { 2 name: "提莫", 3 age: 2, 4 }; 5 const {name, age} = people; 6 console.log(name); 7 console.log(age); 8 9 const person = ["瑞文", "刀妹"];10 const [name1, name2] = person;11 console.log(name1);12 console.log(name2)
6.class / extends / super
ES6 引入了關鍵字class來定義一個類，constructor是構造方法，this代表執行個體對象。
類之間通過extends繼承，繼承父類的所有屬性和方法。
super關鍵字，它代指父類的this對象，子類必須在constructor中調用super()方法，
否則建立執行個體時會報錯，因為子類沒有自己的this對象。調用super()得到this，才能進行修改。
1 class Animal{ 2 constructor(){ 3 this.type = "animal" 4 } 5 says(say){ 6 console.log(this.type + "says" + say ) 7 } 8 } 9 10 let animal = new Animal()11 12 animal.says("hello")13 14 class Dog extends Animal{15 constructor(){16 super();17 this.type = "dog";18 }19 }20 21 let dog = new Dog()22 dog.says("hello")
ES6 常用文法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
