WHY ES6JS每年都有更新,以ES6為一個小分水嶺,經歷了較大的更新 目錄: 1 ) Let & Var & Const 2 ) String Template 3 ) Arrow Function 4 ) Destructure assignment 5 ) Spread operator 6 ) Inheritance 1 ) Let & Var & Constlet vs var 差異:let在函式(或條件式)內外,變數不會受到影響 Ex: var a = 5; for(var a =1;a<10;a++){ var b = 10; console.log(a); } console.log('a',a); console.log('b',b); output==>a 10 (被迴圈內給改變) output==>b 10 如果用let就可以避免此情形發生 let a = 5; for(let a =1;a<10;a++){ let b = 10; console.log(a); } console.log('a',a); console.log('b',b); output==>a 5 output==>b X =>會有error 因外部沒有宣告 Ex2: for(let a = 1;a<10;a++){ setTimeout(function(){ console.log(a); },a*1000); } output==>1..2..3..4....9(皆間隔一秒) let VS const 宣告的變數若為const則後面不可再做更改,但let可以 Ex: let a = 1; const b = 1; a=2; b=2; output==>Assignment to constant variable 但...還是有意外! Ex: //如果是物件的話就可以 const a = [1,2,3,4,5]; a[5] = 6; console.log(a); output=>[1,2,3,4,5,6] //因為這邊的a是by reference非by value(不是單純數字、文字) Ex2: const person={ name:'David' } person.age = 20; output=>{name:"David",age:20} //同理如上 2 ) String TemplateEx: //非ES6 var david = 'David'; function hello(name){ console.log('Hello'+name); } hello(david); //ES6 注意內部的要改為`號 var david = 'David'; function hello(name){ console.log(`Hello ${name}`); } hello(david); *感覺會變得比較直觀(?) 倘若是字串相接的話會方便許多! Ex: //非ES6 var paragraph = 'abc bcd\n'; paragraph += 'efg hij\n'; paragraph += 'klm nop\n'; console.log(paragraph); output=> abc bcd efg hij klm nop Ex2: //ES6 const paragraph = ` abc bcd efg hij klm nop ` console.log(paragraph); output=> abc bcd efg hij klm nop //會發現結果相同哦!! 3 ) Arrow Function//一般寫法 const add = function(a,b){ console.log(a+b); } //使用Arrow function const Arrowadd = function(a,b) =>{ console.log(a+b); } output=>結果相同 Arrow function一行!! Ex: const david = 'David'; const print = (name) => console.log(name); print(david); //如果是只有一個變數,不一定要括弧 const print = name => console.log(name); output==>David Arrow function綁定this Ex: const person = { name:'David', hobbies:['eat','play','sleep'], printname:function(){ console.log(this.name); }, showhobbies:function(){ return this.hobbies.map(funciton(hobby){ return `${this.name} likes to ${hobby}` }); } } person.printname(); output==>David person.showhobbies(); output==>["likes to eat","likes to play","likes to sleep"] *發現showhobbies會把name吃掉 法1 : this改成self 法2 : return this.hobbies.map((hobby) => { 因為用arrow function裡面的this會綁定person 4 ) Destructure assignment定義:將在宣告變數的時候,從物件或者是陣列,直接把宣告的變數抽出來 Ex: const person ={ name:'David', age:20, gender:'male' }; const name = person.name; const age = person.age; const gender = person.gender; console.log(name.age.gender); output==>David 20 male //麻煩的是每個都要分別在宣告取出 ES6提供的方法 const person ={ name:'David', age:20, gender:'male' }; //不用管順序 const{age,name,gender} = person; console.log(name.age.gender); Ex2: 變數為陣列一樣可以! const people = ['David','Dy','Kc']; const person = people[0]; const person1 = people[1]; const person2 = people[2]; console.log(person,person1,person2); output==>David Dy Kc 使用Destructure assignment const people = ['David','Dy','Kc']; const[person1,person2,person3]=people; console.log(person1,person2,person3); output==>David Dy Kc *Destructure後帶入函式 Ex: const person ={ name:'David', age:20, gender:'male' }; function printname({name}){ console.log(name); } printname(person); output==>David 5 ) Spread operator主要用於將Array做組合 (過去如果想要組合成新Array=>使用concat) Ex: var array1 = [1,2,3,4,5]; var array2 = [6,7,8]; var array3 = array1.concat(array2); console.log(array3); output==>[1,2,3,4,5,6,7,8] 使用Spread operator可以省去很多時間 var array4 = [...array2,9,10,...array1]; console.log(array3); output==>[6,7,8,9,10,1,2,3,4,5] *優點在於順序調整比concat方便太多 將陣列內容獨立成參數 var array = [3,4,5]; function sumarr(a,b,c){ console.log(a+b+c); } sumarr(array[0],array[1],array[2]); output==>12 使用Spread operator var array = [3,4,5]; function sumarr(a,b,c){ console.log(a+b+c); } sumarr(...array); output==>12 6 ) Inheritance想在JS中寫的跟物件語言(ex:c++)一樣,沒問題
Ex: class Vehicle{ constructor(name){ this.name = name; } showaction(){ console.log(`$(this.name) is moving`); } } class Car extend Vehicle{ sound(){ console.log(`$(this.name) bababa `}; } const DY = new Car(); console.log(DY.name); output==>DY DY.showaction(); output==>DY is moving DY.sound(); output==>DY bababa
0 評論
|
Author一位平凡大學生,熱愛手語、擔任志工、工作努力賺錢、科技新知。 |