JavaScript“ES6S”yntax大集合

在目前版本Chrome与Node都是可以执行的,但在旧版浏览器可能无法执行,

但在文章中不会详细叙述他们的差异,

只要的目的是希望大家在之后的文章,不会看不懂文法。

本篇重点

如果以下这段都看得懂,那可以轻松看过。

在开始之前

本章的代码都是可以在Console执行的,为了不要让变数宣告互相干扰,建议你用立即函数(IIFE),或在JS Bin上执行。

Function是一种物件

究竟一等公民(first class)是什么意思?

Function能够被当作参数传递,你可以像对待任何型别一样对待他,而在JS中Function被视为一种物件。

这些操作在JS中是相当常见也相当基本的,称之为λ(lambda),在FP中这个特性是必要的,用以表示一个运算的过程,有着input与output。

Function的Function

如何区分是把Function当参数传递,还是执行他呢?

你只需要注意Function后面是否有加上括号,如果有括号,那就是在执行它,当然你也可以藉由其他方式执行Function,像是apply与call。

Arrow Function

在JS的Syntax中,用上述的语法宣告一个function,

function没什么不好,一个小缺点就是它太过拢长了,

为了让code更整洁,我多半会选择使用Arrow function

另外为了让宣告的function不会意外被改写掉,我会选择用const做宣告。

Arrow Function与Function不同的点是Arrow Function会自动绑定this,而且无法rebind,如果没有使用到this,那种用法则没有不同。

对于JavaScript中this究竟是什么?

我推荐各位参考这篇What's THIS in JavaScript?,非常非常详细。

唉这篇文章的作者也是Kuro耶!Kuro太神啦!

Default Parameters

你可以为参数设定初值,这在ES5中也是可以办到的,但ES6的语法明显好看很多。

Rest Operator

有時候,Function 接受的參數數量不固定,

Rest Operator

會把多的參數併成一個 Array。

Spread Operator

Spread Operator用作解构Array或Object,长的跟Rest Operator长的很像。

Destructuring Assignment

在ES5中从Object或是Array取出值的写法。

在ES6中你可以使用解构赋值(Destructuring Assignment)

刚刚的Default Parameters与Rest Operator也是可以使用的。

Enhanced Object Properties

Enhanced Object Properties是用来缩短创造Object的写法。

Template Literals

Template Literals在串接字串时特别好用,而且可以换行。

看过就忘怎么办?

其实各位只要对语法有一点印象就好,需要用的时候,在ECMAScript 6—New Features: Overview & Comparison或是MDN都可以找到,并请搭配Google,今年铁人赛也有很多针对ES6语法的文章。

后记

在参赛之前,我多次请室友先听看看,但很常他的心得都是:「你打这些是什么鬼,JS可以这样写喔?!」

Hmm…,当然可以呀,这是ES6的某个Feature,但对很多JavaScript新手对ES6是相当陌生的(或许是因为w3school完全没有提到),其实我对为什么会有这样的断层有很大的疑问。

如果你成功看完整篇文章(Hooray!),你可以卷回本日重点,试试看能不能看懂。

今天很任性的把所有Syntax全写在同一篇,毕竟主题又不是要做JS教学,明天来讲讲一些有bug的程序,来从错误中学习吧。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180523A115A700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券