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) }  }

 请各路 大牛，指教。