es6 --- 功能

標記的模板文字

1.模板文字！確實很棒。咱們再也不會這樣作….

const concatenatedString = "I am the " + number + "person to recommend this article."

然而，當咱們使用下面這種方式作的話：

const concatenatedString = `I am the ${number} person to recommend this article.`

 

2.標記的模板文字容許咱們向前邁出一步 - 並使用字符串調用函數。

const consoleLogAstring = (string) => {
    console.log(string)
}
consoleLogAstring`I am the string to be logged!`
// I am the string to be logged!

　　標記模板文字還有一個額外的好處；向目標函數傳遞一個從字符串生成的參數數組。這些參數的排列方式以下：首先，一個字符串數組包圍內插值，而後是每一個內插值。

　　咱們來看一個例子：

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

隱式的return語句

1.你寫了多少次返回值的函數？

const addOne = (num) => {
  return num + 1
}
console.log(addOne(1))
// 2

答：幾乎每一次的編寫都是這樣操做,浪費了那麼多時間.

2.將那些大括號替換爲普通的小括號，並利用隱式返回：

const addOne = (num) => （
    num + 1
）
console.log(addOne(1)) 
// 2

3.接下來， 咱們進一步進行操做！

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

1 是否是太有用了，可是若是咱們在沒有參數的狀況下調用上面的函數呢？

consoleLogAttributes()
// TypeError: Cannot match against 'undefined' or 'null'.

2 讓咱們經過設置空對象的默認參數來保存此錯誤：

const consoleLogAttributes = ({ name, attractiveness } = {}) => {
  console.log(name, attractiveness)
}

3 如今咱們再來執行一下上面的程序：

consoleLogAttributes()
// undefined undefined

4 若是不使用任何參數調用consoleLogAttributes，就不會再出現錯誤！咱們何不更進一步進行操做呢，看下面這段代碼:

const consoleLogAttributes = ({ 
  name = 'Default name', 
  attractiveness = '10' 
} = {}) => {
  console.log(name, attractiveness)
}

5 處處都是默認值, 這意味着如下兩種方法將產生相同的結果：

consoleLogAttributes()
// 'Default name', 10
consoleLogAttributes({})
// 'Default name', 10

您的函數將更具彈性，由於它們能夠適應未被定義的參數傳遞。

屬性值簡寫（包括函數）

1 讓咱們回到上面那個person對象。這是一個常見模式： 您有一個變量（例如，name），而且您但願將名爲name的key設置爲name的值。

const name = "Scott"
const person = { name: name }
// { name: "Scott" }

2.感謝ES6，您能夠這樣作：

const name = "Scott"
const person = { name }
// { name: "Scott" } 

3 當使用多個值執行操做時⬇:

const name = "Scott"
const programmingAbility = "poor"
const person = { name, programmingAbility }
// { name: "Scott", programmingAbility: "poor" }

4.甚至能夠用函數操做⬇:

const name = "Scott"
const sayName = function() { console.log(this.name) }
const person = { name, sayName }
// { name: 「Scott」, sayName: function() { console.log(this.name) }  

5.而且在對象聲明中執行函數聲明：

const name = "Scott"
const person = { name, sayName() { console.log(this.name) } }
// { name: 「Scott」, sayName: function() { console.log(this.name) }  }

 請各路 大牛，指教。