[鼠年全马] W23 - ES6有你真好

来到了连假最后一Po
我是个说到做到的男人!!!

今天主题不是Vue
而是非常好用的ES6
让他来将连假做个完美的Ending吧~

#万用起手式

这里就不讲它的历史了, 有兴趣的人可以去参观维基百科
今天只带我个人在实务上常用到的方法~
自从学了ES6语法后, 原本的写法都被我放生

#const & let宣告变数

首先介绍这两个宣告变数的方法
-let:
let跟原本的var很像, 但也不能把他想成是var就好(不然干嘛多一个新的东西xD)
let去改进了var宣告时产生出的问题
像是以往我们使用var来宣告变数时

var a = 1;

宣告之后来呼叫window看看

console.log(window);//或是直接在console页面下window

可以看到这个变数被宣告到全域变数了

那这个有什么问题呢?
问题可大了!!
当今天你的共同开发者, 他们也有宣告到a这个变数
那呼叫时, 到底会叫到哪一个呢?

这时候如果用let来宣告

let a = 1;

已经宣告a变数后, 假设共同开发者再宣告一次a

let a = 2;

这时候浏览器就跳错给他看

跟他说这个变数已经有人用了你不能再用

同样的const也有这个判断机制!!

#区块内宣告变数

首先先讲一下区块是什么

//区块就是 { }//例如if(true) {    //这是区块内}

以往我们在区块内宣告var变数时

if(true) {    var a = 0;}

因为**提升(Hoisting)**的特性, 变数会被拆分成这样

//先把变数宣告出来var a;if(true) {    //后面才赋予值    a = 0;}

这样就跟上面一样了, 当有共同使用者也用到a的状况
这时候如果区块内用let来宣告, 再用console去找a

if(true) {    let a = 0;}console.log(a); //

会发现找不到

原因是let宣告的变数仅在区块内有效

PS. window可以想像成是一个大区块

#const特性

宣告变数的部分, 最后来讲讲const的特性
最大的不同点就是const只能读
也就是说, 宣告了之后谁也别想改变它
相反的let是可以改的

const宣告就很适合用在怕被别人动到的变数上
例如网页的Logo路径不会改变且不能被改变的话就可以使用它

#字串组成

ES6还有一个也是非常好用的字串组成功能
以往我们在组合字串时, 都要用非常多的++++++++++去组合它
例如昨天我在format时间时就用得很痛苦(所以赶快把这篇补上以后就可以偷懒用ES6来写)
那就用昨天的例子来说明吧~

var datetime = '20200626104030';var formatdatetime = datetime.substr(0, 4) +              "/" +              datetime.substr(4, 2) +              "/" +              datetime.substr(6, 2) +              " " +              datetime.substr(8, 2) +              ":" +              datetime.substr(10, 2) +              ":" +              datetime.substr(12, 2)

这写法写的人很痛苦, 看的人也很痛苦阿

换成ES6写法

var formatdatetime = `${datetime.substr(0, 4)}/${datetime.substr(4, 2)}/${datetime.substr(6, 2)} ${datetime.substr(8, 2)}:${datetime.substr(10, 2)}:${datetime.substr(12, 2)}`

抱歉这个例子举的不好
不过可以看到它的使用方式是用两个反引号` `包住字串, 字串内变数一律用${ }来包

这里我举个更明显我最常跟同事说明的例子
以往组合ul li时

var items = ['item 1', 'item 2', 'item 3'];var list = '<ul>' +                 '<li>' + items[0] + '</li>' +                '<li>' + items[1] + '</li>' +                '<li>' + items[2] + '</li>' +           '</ul>';

写得好长这样, 写不好挤一团

用ES6的话

var list = `<ul>                <li>${items[0]}</li>                <li>${items[1]}</li>                <li>${items[2]}</li>            </ul>`;

浅显易懂, 写的人爽看的人也爽

大概就是这样了, 实务上超常用到的就是这些, 其它的部分有机会我再写个番外篇
那么今天就发布这篇文, 结束这个连假吧~~

PS. 明天开始又要上班了...