文章摘要
【前端】面试题挑战 Day3 ES6 有哪些新特性？ - 编程导航 (code-nav.cn) 本文用示例来展现一些新特性的方便用法 1. 模板字符串（Template Literals） const data = 1,2,3,4,5] const result = ` { code: 200, data: ${data}] } ` 模板字符串中所以类似于" ${} "的字符串都将视为可执行的js…
【前端】面试题挑战 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 链捕获的异常 ... 剩下特性有的用得不多，有的要写的话篇幅太长了，就不写了。以后有空在写笔记。本文用示例来展现一些新特性的方便用法
1. 模板字符串（Template Literals）
模板字符串中所以类似于"${}"的字符串都将视为可执行的js语句。并且也会被语句中的实际值给替换。
像上面的示例，若没有模板化字符串这个特性，就得手动用一堆加号来拼接了。
2. 解构赋值（Destructuring）
假设示例1是后端返回的数据，用解构赋值可以快速解构出对象中的变量。
函数传参时也可以快速解构参数
3. 箭头函数（Arrow Functions）
箭头函数表面上看是function的替换，但是他有一个非常实用的特性，那就是自动绑定定义时上下文的this指针。
在一些特殊场景中，我们需要使用this指针，而对于function定义的函数，this的指向是令人迷惑的，常常要分析代码。
而箭头函数定义的函数则会自动将它的this和定义它时的上下文中的this绑定。
比如，以下代码，调用getThis时，会返回当前模块中的app变量(只是个演示)
其实可以把它看做是以下代码的语法糖，省事儿了不少。
4. 对象字面量增强（Object Literal Enhancements）
以下示例可以展现这个语法特性的方便之处
5. Promise 对象
这个特性可以让我们用.then链替换掉以前的地狱嵌套式callback写法。
6. async/await
这个特性可以很方便的将同步函数变为异步函数。
不过我经常使用这个特性做其他一些事儿。比如上面提到的Promise可以使用.then链解决多层callback的问题。但是，如果我需要顺序执行一系列返回Promise的异步函数，即后一个异步函数需要前一个函数的返回值作为参数或作为参考。这时如果继续用.then链，则还是会不可避免的形成多层嵌套。
解决办法就是在try语句中使用await关键字。
之所以要用try是为了捕获原来需要用.catch链捕获的异常
...
剩下特性有的用得不多，有的要写的话篇幅太长了，就不写了。以后有空在写笔记。
本文采用 CC BY-NC-SA 4.0 协议进行授权，如无注明均为原创，转载请注明出处。
标题：[星球打卡] ES6 有哪些新特性？作者：九仞之行链接：http://dev.styunlen.cn/archives/post-1627.html
还没有评论呢 ~ 快来抢沙发吧 🛋️