前言：這是一篇轉(zhuǎn)載文碍侦，小編覺得不錯(cuò)于是分享給大家粱坤，文中的我指原文作者

javaScript 通常被認(rèn)為是最容易入門的語(yǔ)言，也是最難掌握的語(yǔ)言瓷产，我完全同意站玄。這是因?yàn)?JavaScript 是一種非常古老且非常靈活的語(yǔ)言，它有著了神秘的語(yǔ)法和過(guò)時(shí)的特性濒旦。我已經(jīng)使用 JavaScript 很多年了株旷，直到現(xiàn)在，我偶爾會(huì)發(fā)現(xiàn)一些隱藏的語(yǔ)法或技巧疤估，這些是我以前不知道的灾常。雖然這些特性可能不太為人所知，但它們?nèi)匀皇潜娝苤摹?/p>

注意:這里沒有包括變量的提升铃拇、閉包钞瀑、代理、原型繼承慷荔、異步等待雕什、生成器等。

void操作符

JavaScript 有一個(gè)一元 void 操作符。你可能見過(guò)它被用作 void(0) 或 void 0贷岸。void的作用便是返回undefined壹士，在它右邊的操作數(shù)會(huì)正常計(jì)算，但是無(wú)論結(jié)果是什么偿警，void都會(huì)返回undefined躏救。使用“0”只是一種慣例。不必使用' 0 '螟蒸，它可以是任何有效的表達(dá)式盒使，如void <表達(dá)式>，它仍然返回未定義的七嫌。

為什么要?jiǎng)?chuàng)建一個(gè)特殊的關(guān)鍵字來(lái)返回undefined而不是僅僅返回undefined? 聽起來(lái)有點(diǎn)多余少办，不是嗎?

?? 有趣的事實(shí)

實(shí)際上，在ES5之前诵原，在大多數(shù)瀏覽器中英妓，可以為原始的 undefined = "abc"分配一個(gè)新值。所以绍赛，在那些日子里蔓纠，使用void是一種確保始終返回 undefine 的原始值的方法。

構(gòu)造函數(shù)括號(hào)是可選的

是的惹资，我們?cè)谡{(diào)用構(gòu)造函數(shù)時(shí)在類名后添加的括號(hào)——完全可選!??（前提是不需要將任何參數(shù)傳遞給構(gòu)造函數(shù)）

下面的兩種代碼風(fēng)格都被認(rèn)為是有效的 JS 語(yǔ)法而且結(jié)果都是一樣!

可以省略 IIFE（立即執(zhí)行函數(shù)）的括號(hào)

IIFE (立即調(diào)用的函數(shù)表達(dá)式)的語(yǔ)法對(duì)我來(lái)說(shuō)總是有點(diǎn)奇怪贺纲，為什么要有那么多的括號(hào)？

實(shí)際上褪测，這些額外的括號(hào)只是為了告訴JavaScript解析器猴誊，即將解析的的代碼是一個(gè)函數(shù)表達(dá)式，而不是函數(shù)侮措。知道了這一點(diǎn)懈叹，你可以想象，有很多方法可以省略那些額外的括號(hào)分扎，仍然可以使用 IIFE 有效的工作澄成。

void操作符告訴解析器代碼是函數(shù)表達(dá)式。因此畏吓，我們可以跳過(guò)函數(shù)定義周圍的括號(hào)墨状。你猜怎么著? 我們可以使用任何一元運(yùn)算符(void， +菲饼， !肾砂， -等等)，這仍然有效!

這是不是比原始的寫法簡(jiǎn)單而且 B 格多了呢宏悦？

但是镐确，如果你是一個(gè)敏銳的觀察者包吝，你可能會(huì)想，一元運(yùn)算符不會(huì)影響 IIFE 返回的結(jié)果嗎源葫？

它會(huì)影響結(jié)果诗越。但好消息是，如果你只要的返回的結(jié)果并將其存儲(chǔ)在某個(gè)變量中息堂，那么就不需要額外的括號(hào)嚷狞。

with 的聲明

JavaScript 有一個(gè)with語(yǔ)句塊， with 實(shí)際上是JS中的關(guān)鍵字储矩。 with 塊的語(yǔ)法如下：

with 語(yǔ)句可以方便地用來(lái)引用某個(gè)特定對(duì)象中已有的屬性感耙，但是不能用來(lái)給對(duì)象添加屬性。要給對(duì)象創(chuàng)建新的屬性持隧，必須明確地引用該對(duì)象。

?? 有趣的事實(shí)

with 塊看起來(lái)很酷逃片，對(duì)吧? 它甚至比對(duì)象銷毀更好屡拨。好吧,其實(shí)不是。

通常不鼓勵(lì)使用 with 語(yǔ)句褥实，因?yàn)樗驯粭売醚嚼牵趪?yán)格模式下完全禁止。事實(shí)證明损离，使用 with 塊會(huì)增加語(yǔ)言中的一些性能和安全性問題哥艇。

函數(shù)構(gòu)造器

函數(shù)語(yǔ)句不是定義新函數(shù)的唯一方法，可以使用function()構(gòu)造函數(shù)和new 操作符動(dòng)態(tài)定義函數(shù)僻澎。

?? 有趣的事實(shí)

Function 構(gòu)造函數(shù)是 JavaScript 中所有構(gòu)造函數(shù)的母親貌踏。甚至 Object 的構(gòu)造函數(shù)也是 Function 構(gòu)造函數(shù)。而 Function 自己的構(gòu)造函數(shù)也是 Function 本身窟勃。

因此祖乳，調(diào)用 object.constructor.constructor ...足夠多次將最終在 JavaScript 中的任何對(duì)象上返回Function構(gòu)造函數(shù)。

函數(shù)屬性

我們都知道函數(shù)是JavaScript中的第一類對(duì)象秉氧。因此眷昆，沒有人阻止我們向函數(shù)添加自定義屬性。在 JS 中這樣做是有效的汁咏，然而亚斋，它很少被使用。

那么我們什么時(shí)候要這樣做?

這里有一些很好的用例攘滩。例如,

可配置函數(shù)

假設(shè)我們有一個(gè)函數(shù)叫做 greet帅刊。我們希望函數(shù)根據(jù)不同的地區(qū)打印不同的問候消息，這個(gè)區(qū)域設(shè)置也應(yīng)該是可配置的轰驳。我們可以在某個(gè)地方維護(hù)全局 locale 變量厚掷，也可以使用如下所示的函數(shù)屬性實(shí)現(xiàn)該函數(shù)

具有靜態(tài)變量的函數(shù)

另一個(gè)類似的例子弟灼。比方說(shuō)匾荆，希望實(shí)現(xiàn)一個(gè)生成有序數(shù)字序列的數(shù)字生成器荤西。通常您將使用帶有靜態(tài)計(jì)數(shù)器變量的 Class 或 IIFE 來(lái)跟蹤最后一個(gè)值至扰。這樣我們就限制了對(duì)計(jì)數(shù)器的訪問李根，同時(shí)也避免了使用額外的變量污染全局空間涤浇。

但是风科，如果我們希望能夠靈活地讀取甚至修改計(jì)數(shù)器浅萧，而又不污染全局空間穿剖，該怎么辦呢?

我們?nèi)匀豢梢詣?chuàng)建一個(gè)類冬竟，有一個(gè)計(jì)數(shù)器變量和一些額外的方法來(lái)讀取它;或者我們可以偷懶欧穴，使用函數(shù)自定義的屬性。

Arguments 的屬性

我相信你們大多數(shù)人都知道函數(shù)中的arguments對(duì)象泵殴。它是一個(gè)類似數(shù)組的對(duì)象涮帘，可以在所有函數(shù)中使用。它具有在調(diào)用函數(shù)時(shí)傳遞給函數(shù)的參數(shù)列表笑诅。但它也有一些其他有趣的性質(zhì)：

arguments.callee： 當(dāng)前調(diào)用的函數(shù)

arguments.callee.caller：調(diào)用當(dāng)前函數(shù)的函數(shù)

注意:雖然ES5禁止在嚴(yán)格模式下使用callee & caller调缨，但在許多編譯后的庫(kù)中仍然很常見。所以吆你，學(xué)習(xí)它們是值得的弦叶。

標(biāo)記模板字符串

模板字符串文字是ES6中許多很酷的附加內(nèi)容之一，但是妇多，知道標(biāo)記模板字符串是比較少的?

標(biāo)記模板字符串允許你通過(guò)向模板字符串添加自定義標(biāo)記來(lái)更好地將模板文字解析為字符串伤哺。Tag只是一個(gè)解析器函數(shù)，它獲取字符串模板解釋的所有字符串和值的數(shù)組者祖，標(biāo)記函數(shù)應(yīng)返回最終字符串立莉。

在下面的例子中，我們的自定義標(biāo)記 ——?高亮顯示咸包，解釋模板文本的值桃序，并將解釋后的值包裝在結(jié)果字符串中，使用<mark>元素進(jìn)行高亮顯示烂瘫。

Getters & Setters

在大多數(shù)情況下媒熊，JavaScript對(duì)象是簡(jiǎn)單的。假設(shè)我們有一個(gè) user 對(duì)象坟比，我們?cè)噲D使用user訪問它的age屬性芦鳍。使用 user.age 得到年齡屬性的值，如果沒有定義葛账，我們得到未定義的值柠衅。

但是，并不一定要這么簡(jiǎn)單籍琳。JavaScript 對(duì)象具有 getter 和 setter 的概念菲宴。我們可以編寫自定義Getter函數(shù)來(lái)返回我們想要的任何東西贷祈，而不是直接返回對(duì)象上的值，設(shè)置一個(gè)值也是一樣喝峦。

這使我們可以在獲取或設(shè)置字段時(shí)擁有強(qiáng)大的能力势誊，如virtual fields，field validations谣蠢，side-effects粟耻。

逗號(hào)操作符

JavaScript有一個(gè)逗號(hào)操作符。它允許我們?cè)谝恍兄杏枚禾?hào)分隔多個(gè)表達(dá)式眉踱，并返回上一個(gè)表達(dá)式的結(jié)果挤忙。

在這里，所有表達(dá)式都將被求值谈喳，結(jié)果變量將被賦值給expressionN返回的值册烈。

我們經(jīng)常在for循環(huán)中使用了逗號(hào)操作符

+ 加號(hào)操作符號(hào)

想要快速地將字符串轉(zhuǎn)換為數(shù)字嗎?

只需在字符串前面加上+運(yùn)算符。加號(hào)運(yùn)算符也適用于負(fù)數(shù)婿禽、八進(jìn)制茄厘、十六進(jìn)制、指數(shù)值谈宛。更重要的是，它甚至可以轉(zhuǎn)換 Date 或者 Moment.js對(duì)象的時(shí)間戳!

!! 操作符

從技術(shù)上講胎署，它不是一個(gè)單獨(dú)的JavaScript操作符吆录。它只是兩次使用的 JavaScript 反運(yùn)算符。

如果表達(dá)式為true值琼牧，則返回true;否則返回false恢筝。

~ 非操作符

讓我們面對(duì)它——沒有人關(guān)心位操作符。我們什么時(shí)候才能使用它!

這里有一個(gè)日常用例是關(guān)于波浪號(hào)或位非運(yùn)算符的巨坊。

事實(shí)證明撬槽，當(dāng)與數(shù)字一起使用時(shí)，非運(yùn)算符是有效的 ~N => -(N+1)這個(gè)表達(dá)式只有在 N為-1時(shí)才計(jì)算為 “0”趾撵。

我們可以通過(guò)將~放在theindexOf(…)函數(shù)前面來(lái)利用這一點(diǎn)侄柔，如果項(xiàng)目存在于字符串或數(shù)組中，則執(zhí)行布爾檢查占调。

注意:ES6和ES7分別在字符串和數(shù)組中添加了一個(gè)新的 .include()方法暂题。當(dāng)然，這是一種比波浪號(hào)操作符更清晰的方法來(lái)檢查一個(gè)項(xiàng)目是否存在于數(shù)組或字符串中究珊。

標(biāo)簽 的使用

break和continue語(yǔ)句都可以與lebel語(yǔ)句聯(lián)合使用薪者，從而返回代碼中特定的位置。用于嵌套循環(huán)剿涮，減少循環(huán)次數(shù)言津。

原文：https://blog.usejournal.com/l...

最后：“相信有很多想學(xué)前端的小伙伴攻人，今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5等都有整理悬槽，送給每一位前端小伙伴怀吻，53763，1707這里是小白聚集地陷谱，歡迎初學(xué)和進(jìn)階中的小伙伴烙博。”

祝大家早日學(xué)有所成烟逊，拿到滿意offer渣窜，快速升職加薪，走上人生巔峰宪躯。