【前端】面试题挑战 Day3 ES6 有哪些新特性？ - 编程导航 (code-nav.cn)

本文用示例来展现一些新特性的方便用法

1. 模板字符串（Template Literals）

const data = [1,2,3,4,5]
const result = `
{
  code: 200,
  data: [${data}]
}
`

模板字符串中所以类似于"${}"的字符串都将视为可执行的js语句。并且也会被语句中的实际值给替换。

像上面的示例，若没有模板化字符串这个特性，就得手动用一堆加号来拼接了。

2. 解构赋值（Destructuring）

假设示例1是后端返回的数据，用解构赋值可以快速解构出对象中的变量。

const {code,data} = Api.getData()

函数传参时也可以快速解构参数

const res = Api.getData()
const resolveData = ({data})=>{
  return data;
}
const data = resolveData(res);

3. 箭头函数（Arrow Functions）

箭头函数表面上看是function的替换，但是他有一个非常实用的特性，那就是自动绑定定义时上下文的this指针。

在一些特殊场景中，我们需要使用this指针，而对于function定义的函数，this的指向是令人迷惑的，常常要分析代码。

而箭头函数定义的函数则会自动将它的this和定义它时的上下文中的this绑定。

比如，以下代码，调用getThis时，会返回当前模块中的app变量(只是个演示)

this = app;
const getThis = ()=>this;

其实可以把它看做是以下代码的语法糖，省事儿了不少。

/// Error
function a()
{
  return this; // unknown this
}
/// Right
var a =  (function (){return this}).bind(this)
/// ES6
const a = ()=>this

4. 对象字面量增强（Object Literal Enhancements）

以下示例可以展现这个语法特性的方便之处

/// Old
let a = {
  type:"Object", 
  funcProp: function(){return "result"}
}
let DynamicProp = Math.random();
a[DynamicProp] = "test";

/// ES6
const DynamicProp = Math.random();
const a = {
  type:"Object", 
  funcProp() {return "result"},
  [DynamicProp]: "test"
}

5. Promise 对象

这个特性可以让我们用.then链替换掉以前的地狱嵌套式callback写法。

getData()
  .then(/* Do something */)
  .then(/* Do something */)
  .catch(/* Catch error */)

6. async/await

这个特性可以很方便的将同步函数变为异步函数。

不过我经常使用这个特性做其他一些事儿。比如上面提到的Promise可以使用.then链解决多层callback的问题。但是，如果我需要顺序执行一系列返回Promise的异步函数，即后一个异步函数需要前一个函数的返回值作为参数或作为参考。这时如果继续用.then链，则还是会不可避免的形成多层嵌套。

解决办法就是在try语句中使用await关键字。

try{
  const ret1 = await asyncFunc1();
  if(!ret1)
  {
    return false;
  }
  const ret2 = await asyncFunc2(ret1)
  ...
}
catch(err)
{
  console.log(err);
  return false
}

之所以要用try是为了捕获原来需要用.catch链捕获的异常

...

剩下特性有的用得不多，有的要写的话篇幅太长了，就不写了。以后有空在写笔记。