JS拓展：解構指派，預設參數(Default) + 不定參數(Rest) + 擴充運算符(Spread)，箭頭函數

解構指派

在ES5我們提取對象中的資訊形式如下：

//定義對象
    const people = {
        name: 'lux',
        age: 20
}
//取出對象的屬性
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)
           

在es6中，解構能讓我們從對象或者數組裡快速的取出資料存為變量，例如：

//對象,對象解構時前面要用變量聲明，鍵名也要一樣, 按照名字指派
const people = {
    name: 'lux',
    age: 20
}
const { name, age } = people //類型應該是對象
console.log(`${name} --- ${age}`)

//數組 按照下标位置指派
const color = ['red', 'blue']
const [first, second] = color //類型應該是數組
console.log(first) //'red'
console.log(second) //'blue'
           

預設參數(Default) + 不定參數(Rest) + 擴充運算符(Spread)

預設參數(default)的功能是在函數被調用時對參數做自動估值(若沒被指派，則自動指派)，擴充運算符(spread)則可以将數組轉換為連續的函數參數，不定參數(rest)用在參數末尾，将最末尾的參數轉換為數組。不定參數(rest)讓我們不再需要arguments，更直接地解決了一些常見的問題

function f(x, y=12) {
  // 如果沒有傳入y或傳入了undefined，y的預設值為12
  return x + y;
}
f(3) == 15
           

function f(x, ...y) {
  // y是一個數組
  return x * y.length;
}
f(3, "hello", true) == 6
           

function f(x, y, z) {
  return x + y + z;
}
// 将數組中的每個元素展開為函數參數
f(...[1,2,3]) == 6
           

預設參數

不定參數 (用于接收不定數量的參數)

展開運算符 (用于指派時直接展開所有元素)

箭頭函數與this文法

文法：函數的參數=>函數體

=>前的部分是函數的參數部分，主要有以下幾種情況：

1. 參數為空(寫一個空括号即可)

()=>
           

1. 隻有一個參數a（隻寫a或者在a外加一個括号）

(a)=> 或者 a=>
           

1. 有多個參數a,b,c,d(必須寫在括号裡)

（a,b,c,d)=>
           

1. 含有預設值的參數(直接給參數指派就可以了，同以前一樣)

（a=1,b=2,c=3,d=4)=>
           

1. 含有不定參數(直接寫就行，同以前一樣)

(a,b,…c)=>
           

1. 另外，箭頭函數參數也支援解構指派

   

=>後的部分也就是函數體主，要有以下幾種情況：

1. 當函數體隻有一條語句時，可以不加花括号，直接将這條語句寫在箭頭後面即可
2. 然後如果這條語句是一個return value這種的話，請去掉return，直接寫那個值value即可。在箭頭函數執行時，會自動将其作為傳回值傳回。
3. 當然，如果這個值是一個對象，請在他的外面加上一個括号如({value})因為如果不加的話，{會被認為是函數體的開始,而不會被認為是一個對象的開始
4. 有多條語句(要加上花括号，寫法和以前一樣)有多條語句(要加上花括号，寫法和以前一樣)

=>{
	語句1;
	語句2;
	語句3;
	}
           

箭頭函數中的this