iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
2

昨天介紹完

  1. Let & Var & Const
  2. String Template

很高興有邦友補充 var, let, const 背後 TDZ 機制
我自己也是受益良多XDD
補充:https://segmentfault.com/a/1190000008213835

今天繼續囉~
3. Arrow Function
4. Destructure assignment

Arrow Function => 讓函式更簡單

聽說是最受歡迎的ES6特性,有幾個優點:

  • 語法簡單,省時省力
  • 可以綁定 this
  • 看起來比較厲害 ( 有嗎 ? )

先來個比較感受一下

//一般寫法

const add = function(a,b){
console.log(a+b);
}

以上可用來簡單add想要的值
那上面改成arrow function怎麼寫呢

//使用Arrow function

const arrowadd = (a,b) => a + b

結果相同,Arrow function一行!!

這邊還有兩點小補充:

  1. 如果是只有一個變數,不一定要括弧

    const print = name => console.log(name);
    output => David
    
  2. { } 其實有意義,當function有多行就要用,但如果只有單一傳入參數可以不需要哦 ~

    const print = num => num+10
    const print2 = num => { num+10 } 
    

請先測試看看是否兩個會得到一樣的結果


答案是 X

  • 因為沒用 { } 時,會自動有return的功能,就像我第一個a+b
  • 可是當有 { } 時,他就會將return功能取消以免搞混

Arrow function 綁定 this

不僅僅可以縮寫原本的函式,還有什麼其他的功能呢?
取代原有使用var self = this.bind方法

讓我們來看個範例
假設有一個人

  • 名字叫做:I ( 我 )
  • 有些 Hobbies:吃、玩、睡
  • 有個屬性可以印出名字
  • 有個屬性可以說我愛吃、玩、睡
const person = {
name:'I',
hobbies:['eat','play','sleep'],
printname:function(){
    console.log(this.name);
   },
printhobbies:function(){
   return this.hobbies.map(function(hobby){
        return `${this.name} likes to ${hobby}` 
      });
   }
}
  • printname的function很清楚直接印名字是沒問題的,因為這個this可以直接直到person
  • printhobbies就有問題了,因為在 function 中的 function,JS 可能會把他搞丟

那我們印印看吧

person.printname();
output==> I

person.printhobbies();
output==>["likes to eat","likes to play","likes to sleep"]

如圖:

這時候過去有兩種方法可以解決

  • 法1 : 用一個self撈this
    printhobbies:function(){
       const self = this;
       return this.hobbies.map(function(hobby){
            return `${self.name} likes to ${hobby}` 
          });
    
    我們把上面的this抓下來帶到self,在讓裡面return self 的 name
  • 法2 : 使用bind( )
    Definition:bind會建立一新函式,被呼叫時會將 this 設為給定的參數,並在呼叫時帶有提供之前給定順序的參數。
    因此我們可以在這綁定this,對prithobbies做.bind ( this )

- - - - 總之以上兩種方法在這邊都不太重要 - - - -

  • 法3 : 使用Arrow function !
    因為用arrow function裡面的this仍然會綁定person
    const person = {
    name:'I',
    hobbies:['eat ',' play ',' sleep'],
    printname:function(){
        return this.name;
       },
    printhobbies:function(){
       return this.hobbies.map((hobby) =>{
            return ` ${this.name} likes to ${hobby}`
          });
       }
    }
    

如圖:

Destructure assignment

Definition:宣告變數的時候,從物件/陣列,直接把宣告的變數抽出來

先想想平常怎麼抽

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);

簡直太方便了阿,連複製貼上都可以少按了!
除此之外,呼叫裡面的順序也不用管哦 ( 有發現我的age、name反過來了嗎? )

想再多看些嗎? 再來一個變數也可以!

Original :

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

還有呢 ? 函式也來一下 !

const person ={
name:'David',
age:20,
gender:'male'
};

function printname({name}){
console.log(name);
}

printname(person);

output==>David

是不是很容易呢!!

最後檢視今天學了什麼

  • Arrow function 簡化函式
  • Arrow function 綁定this
  • Destructure assignment 抽出

下課囉 ~ 請鎖定 柚子放學後的網頁生活


上一篇
[Day5] 柚子放學後的網頁生活 - ES6
下一篇
[Day7] 柚子放學後的網頁生活 - ES6 #3
系列文
🍐放學後的網頁開發30

尚未有邦友留言

立即登入留言