ES6之前的函數定義：
通過聲明
通過關鍵詞 function 定義 ，這是最早也是最經典的function定義方式。
function hello (firstname) {
return `Hello ${firstname}`;
}
這個函數有一個名稱 "hello", 所以我們稱這個函數為命名函數。
通過表達式
這是比較現代化的定義方式了。這種定義方式也說明了函數也是對象，因此可以把函數賦值給變量。
const hello = function (firstname) {
return `Hello ${firstname}`;
};
仔細看，你會發現這個函數是沒有名稱的，因此它是匿名函數。
它在創建時，沒有名稱 (形如 "function (...) { ... }")。即便我們把這個函數賦值給一個名稱為hello的變量， 它依然是一個匿名函數。
注意: 這既然是一個賦值語句，那么在結尾處有分號就很自然了。 就像其他普通的賦值語句一樣: const pi = 3.14; 。
ES6的函數定義：
通過箭頭語法
箭頭語法是ES6中出新的新語法，可以用在通過表達式定義函數的情境中:
去除關鍵詞 function 添加箭頭符號 => 到參數右側的位置.
const hello = (firstname, lastname) => {
return `Hello ${firstname} ${lastname}`;
};
這種寫法已經很簡潔明了。如果滿足以下情況，寫法還可以更簡單：
1、當只有一個參數時，參數外面可以不要圓括號；
2、當函數體內只有一行代碼時，函數體可以不需要花括號"{ ... }"包裹 ；
3、當函數體內只有一行代碼時，關鍵詞return 可以省略。
const hello3 = firstname => `Hello ${firstname}`;
ES6增強了對象字面量，可以簡寫方式定義
const obj = {
hello4(firstname) {
return `Hello ${firstname}`;
}
}
關於ES6增強對象字面量
相對於ES5, ES6的對象字面量得到了很大程度的增強。這些改進我們可以輸入更少的代碼，同時語法更易於理解。
那就一起來看看對象增強的功能。增強功能包括：對象字面量簡寫(Object Literal Shorthand)、對象方法簡寫(Object Method Shorthand)、計算對象鍵(Object key)、對象解構(Object Destructuring)。
ES5對象字面量
var type = 'rock';
var heat = '50%';
var music = {
type: type,
heat: heat
};
ES6對象字面量
在ES6中如果你的對象屬性名和當前作用域中的變量名相同，那么現在不必在把這個type或heat書寫兩次。ES6的對象會自動的幫你完成鍵到值的賦值。
var type = 'rock';
var heat = '50%';
var music = {
type,
heat
};
ES5返回一個對象
function getMusic() {
var type = 'rock';
var heat = '50%';
// 一些運算
return { type: type, heat: heat };
}
ES6返回一個對象
function getMusic() {
var type = 'rock';
var heat = '50%';
// 一些運算
return { type, heat };
}
ES5對象方法
var type = 'rock';
var heat = '50%';
var music = {
type: type,
heat: heat,
description: function() {
return '當前音樂風格為' + this.type + ',' + this.heat + '都喜歡';
}
}
ES6對象方法
使用ES6語法重寫上面的music對象，不必寫上對象鍵然后還要寫上function關鍵字。只需要方法名和圓括號再跟上花括號即可。代碼如下：
var type = 'rock';
var heat = '50%';
var music = {
type,
heat,
description() {
return '當前音樂風格為' + this.type + ',' + this.heat + '都喜歡';
}
}
ES6計算對象鍵
在ES5中對象可以理解為一個關聯數組或一個hashmaps。在ES5中創建對象的鍵就三種object.xx、object[‘xx’]、Object.defineProperty可以用來構建對象的鍵。
var heat = '50%';
var music = {
rock: heat
};
ES6計算對象鍵
在ES6中可以使用變量作為對象鍵，比如field作為我們對象的鍵，heat作為這個鍵的值。代碼如下：
var heat = '50%';
var field = 'rock';
var music = {
[field]: heat
}
ES6對象鍵計算表達式
在ES6中可以使用變量作為對象鍵，這個變量還可以是表達式，因為[]方式是返回[]里面表達式的結果作為對象鍵
var heat = '50%';
var field = 'Rock and Roll';
var music = {
[field.toLowerCase()]: heat
}
還可以使用不同的數組方法為我們的對象鍵賦值，使用[]將會計算對象的鍵值。代碼如下：
let people = [20, 25, 30];
let music = {
people,
[people]: 'They all love rock and roll',
[people.length]: 'object key is 3',
[{}]: 'empty object'
}
console.log(music); // Object {3: "object key is 3", people: Array[3], 20,25,30: "They all love rock and roll", [object Object]: "empty object"}
console.log(music.people); // [20, 25, 30]
console.log(music['people']); // [20, 25, 30]
console.log(music[people]); // They all love rock and roll
console.log(music[people.length]); // object key is 3
console.log(music['[object Object]']); // empty object
ES6對象解構
把對象或者數組中的數據取出使用是我們經常要使用的功能，ES6有新的功能讓我們快捷拆分對象和數組中的值。在=號右邊是要解構的對象或數組，=號左邊是要接收創建的變量。代碼如下：
對象解構
=號左邊的類型要和右邊對應，比如右邊是一個對象類型則左邊也需要使用對象字面量包裹。右邊是數組則左邊也需要使用數組包裹。
let music = {
type: 'rock',
heat: '50%'
};
let { type, heat } = music;
console.log(type, heat); // rock 50%
數組解構
let people = [20, 25, 30]
let [young, oldYoung] = people;
console.log(young, oldYoung) // 20 25
對象解構重命名
有時候我們不想使用解構對象中的鍵來新創建變量，需要解構后重命名為新的變量名。這是可以使用重命名解構語法
let music = {
type: 'rock',
heat: '50%'
}
let { type: newType, heat: newHeat } = music;
console.log(newType, newHeat); // rock 50%
解構其他類型
如果在一個對象中的值包含其他的數據類型同樣是可以解構出來的。比如值是數組，代碼如下：
let music = {
type: ['rock', 'pop', 'jazz'],
heat: '50%',
}
let { type, heat } = music;
console.log(type, heat); // ["rock", "pop", "jazz"] "50%"
解構函數參數
這是一個非常實用的功能，可以將傳遞進來的函數對象參數直接解構為變量，在函數中可以方便調用。這只需要簡單的對象解構函數即可完成。代碼如下：
function getMusic({ type, heat }) {
console.log(type, heat);
}
getMusic({ type: ‘rock’, heat: ‘80%’}); // rock 80%