[星球打卡] ES6 有哪些新特性?
本文发布于422天前,最后更新于 422 天前,其中的信息可能已经有所发展或是发生改变。

【前端】面试题挑战 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链捕获的异常

...

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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
颜文字
Emoji
小恐龙
花!
滑稽大佬
演奏
程序员专属
上一篇
下一篇