【譯】五個ES6功能，讓你編寫代碼更容易

原文地址: Five ES6 features to make your life easie

原文做者: Scott Domes

譯者: vonmo

衆所周知，學習新語法是一件很怪異的事情。咱們大多數人都選擇咱們須要提升工做效率的最低限度，而後偶爾在觀看朋友/同事/導師代碼時，咱們偶爾也發現了一些讓咱們想知道的事情. 若是沒有他們、咱們本身該如何生存的新技巧。

下面羅列了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 的解讀就結束了。感謝您抽時間閱讀這篇文章，但願對您有所幫助 ~