眾所周知，學習新語法是一件很怪異的事情。我們大多數人都選擇我們需要提高工作效率的最低限度，然後偶爾在觀看朋友/同事/導師程式碼時，我們偶爾也發現了一些讓我們想知道的事情. 如果沒有他們、我們自己該如何生存的新技巧。
下面羅列了5個這樣的小快捷方式，可以讓您編碼生活更快一些。
一如既往，如果這篇文章對您有用的話，請推薦並分享！
標記的模板文字
模板文字！確實很棒。我們不再會這樣做….
const concatenatedString = "I am the " + number + "person to recommend this article."
複製程式碼然而，當我們使用下面這種方式做的話：
const concatenatedString = `I am the ${number} person to recommend this article.`
複製程式碼是不是很棒！
標記的模板文字允許我們向前邁出一步 - 並使用字串呼叫函式。
我們再來看下面這個例子⬇：
const consoleLogAstring = (string) => {
console.log(string)
}
consoleLogAstring`I am the string to be logged!`
// I am the string to be logged!
複製程式碼換種方式， 看這個⬇：
consoleLogAstring('Here is the string!')
// Here is the string!
複製程式碼…與此相同的還有下面這種寫法⬇：
consoleLogAstring`Here is the string!`
複製程式碼標記模板文字還有一個額外的好處；向目標函式傳遞一個從字串生成的引數陣列。這些引數的排列方式如下：首先，一個字串陣列包圍內插值，然後是每個內插值。
我們來看一個例子：
function logOutValues(strings, value1, value2) {
console.log(strings, value1, value2)
}
logOutValues`Here is one value: ${1} and two: ${2}. Wow!`
// ["Here is one value: ", " and two: ", ". Wow!"] 1 2
複製程式碼您可以根據需要為儘可能多的內插值執行此操作，甚至可以像這樣操作字串⬇：
const person = {
name: "Scott",
age: 25
}
function experience(strings, name, age) {
const str0 = strings[0]; // "that "
const str1 = strings[1]; // " is a "
let ageStr = 'youngster';
if (age > 99){
ageStr = 'centenarian';
}
return str0 + name + str1 + ageStr;
}
const output = experience`that ${ person.name } is a ${ person.age }`;
console.log(output);
// that Scott is a youngster
複製程式碼(感謝 Domenico Matteo對本節的澄清。) 此功能還允許您使用轉義序列嵌入DSL（此處更多內容）
這有用嗎？ 使用字串呼叫函式是一種更簡潔的方法。它可以更容易地進行插值，並根據插值字串建立新的字串。 有關此方面的示例，請檢視React的樣式化元件庫styled-components
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
<Title>Hello World, this is my first styled component!</Title>
複製程式碼隱式的return語句
你寫了多少次返回值的函式？
const addOne = (num) => {
return num + 1
}
console.log(addOne(1))
// 2
複製程式碼答：幾乎每一次的編寫都是這樣操作,浪費了那麼多時間.
將那些大括號替換為普通的小括號，並利用隱式返回：
const addOne = (num) => （
num + 1
）
console.log(addOne(1))
// 2
複製程式碼接下來， 我們進一步進行操作！
const addOne = num => num + 1
console.log(addOne(1))
// 2
複製程式碼這有用嗎？
更少的程式碼, 更好的可讀性。 甚至可以鼓勵您編寫更小的函式，這樣您就可以避免寫多行程式碼了,程式碼給人的感覺也更乾淨清晰和整潔了。
對預設引數進行引數解構
const person = { name: 'Scott', attractiveness: 8.5 }
const consoleLogAttributes = ({ name, attractiveness }) => {
console.log(name, attractiveness)
}
consoleLogAttributes(person)
// 'Scott', 8.5
複製程式碼是不是太有用了，但是如果我們在沒有引數的情況下呼叫上面的函式呢？
consoleLogAttributes()
// TypeError: Cannot match against 'undefined' or 'null'.
複製程式碼讓我們通過設定空物件的預設引數來儲存此錯誤：
const consoleLogAttributes = ({ name, attractiveness } = {}) => {
console.log(name, attractiveness)
}
複製程式碼現在我們再來執行一下上面的程式：
consoleLogAttributes()
// undefined undefined
複製程式碼如果不使用任何引數呼叫consoleLogAttributes，就不會再出現錯誤！我們何不更進一步進行操作呢，看下面這段程式碼:
const consoleLogAttributes = ({
name = 'Default name',
attractiveness = '10'
} = {}) => {
console.log(name, attractiveness)
}
複製程式碼到處都是預設值, 這意味著以下兩種方法將產生相同的結果：
consoleLogAttributes()
// 'Default name', 10
consoleLogAttributes({})
// 'Default name', 10
複製程式碼這有用嗎？
您的函式將更具彈性，因為它們可以適應未被定義的引數傳遞。
缺點是上面函式宣告中的視覺混亂，但大多數情況下，這是一個小代價用來支援更優雅的回退。
屬性值簡寫（包括函式）
讓我們回到上面那個person物件。這是一個常見模式：
您有一個變數（例如，name），並且您希望將名為name的key設定為name的值。
const name = "Scott"
const person = { name: name }
// { name: "Scott" }
複製程式碼感謝ES6，您可以這樣做：
const name = "Scott"
const person = { name }
// { name: "Scott" }
複製程式碼當使用多個值執行操作時⬇:
const name = "Scott"
const programmingAbility = "poor"
const person = { name, programmingAbility }
// { name: "Scott", programmingAbility: "poor" }
複製程式碼甚至可以用函式操作⬇:
const name = "Scott"
const sayName = function() { console.log(this.name) }
const person = { name, sayName }
// { name: “Scott”, sayName: function() { console.log(this.name) } }
複製程式碼並且在物件宣告中執行函式宣告：
const name = "Scott"
const person = { name, sayName() { console.log(this.name) } }
// { name: “Scott”, sayName: function() { console.log(this.name) } }
複製程式碼這有用嗎？
編寫更少的程式碼，編寫更清晰的程式碼。
看到這裡，ES6 的解讀就結束了。感謝您抽時間閱讀這篇文章，希望對您有所幫助 ~