鮮為人知的JavaScript功能

By Viral Shah | Nov 26, 2018

原文

js一門很容易入門但是很難精通的語言埠戳。我很認同這句話。這是因為js是一門古老的語言同時也是一門很靈活的語言。有著一堆神秘的語法和過時的功能闰靴。我已經使用js很多年了,迄今為止关霸,我時不時地會發(fā)現(xiàn)一些我從未知道的隱藏語法或技巧传黄。

whatthejsisthat.jpg

我試圖列出一些鮮為人知的js特性。雖然有一些特性在嚴格模式下是不能用的队寇,但是它依然是一種不錯的js特性。然而章姓,請注意佳遣,我不建議你全使用上我介紹的特性。雖然它們很酷凡伊,但畢竟是鮮為人知的特性零渐,你的同事可能會看不懂。

void 操作符

js有一元運算符系忙。你可能已經見過了诵盼,像 void(0) 或者 void0 。它只有一個目的 - 在右邊評估表達式并返回undefined银还。使用0只是一種慣例风宁。不一定要使用0.它可以是任何有效的表達式,如

void <expression>

它仍然返回undefined蛹疯。

voidOperator.png

為什么要這樣子返回undefined戒财,直接返回undefined不好么?看起來這個特性很多余捺弦,不是么?

有趣的事實

好吧,事實證明蝇更,在ES5之前遵蚜,你實際上可以在大多數(shù)瀏覽器中為undefined重新分配值。類似這樣

undefined =“abc”

使用void的話會始終保持返回正確的undefined寞钥。

構造函數(shù)的括號是可選的

對的慌申,你沒看錯,當調用構造函數(shù)的時候凑耻,我們在類名后面加的圓括號——完全是可選的太示!??(前提是你不需要傳遞參數(shù))

下面的代碼樣式都被認為是有效的JS語法柠贤,并且會給你完全相同的結果!

constructorBrackets.png

IIFE的括號可以被跳過

IIFE的語法讓我感覺總是有點奇怪类缤。

IIFE所有的括號都有什么用臼勉?

那些額外的括號只是為了告訴js解析器,即將到來的代碼是函數(shù)表達式而不是函數(shù)餐弱。知道了這些宴霸,來想一想,有很多方法可以跳過這些額外的括號膏蚓,仍然可以制作有效的IIFE瓢谢。

IIFEBrackets.png

void操作符告訴解析器這段代碼是函數(shù)表達式。因此驮瞧,我們可以省略包著函數(shù)的括號氓扛。你猜怎么著?我們可以使用任何一元運算符(void论笔,+ ,!采郎, - 等),這仍然有效狂魔。

真酷蒜埋!

然而,如果你觀察再仔細點最楷,你會有個疑問整份,

一元運算符不會影響IIFE返回的結果嗎?

好吧籽孙,它會影響結果烈评。但是有個好消息,如果你關心返回的結果并且把結果放在某個變量中蚯撩,那么你首先不需要額外的括號础倍。

這就對了!

IIFEUnary.png

我們添加這些括號只是為了更好的代碼可讀性胎挎。

with 聲明

你知道js有with聲明塊沟启?with一直是js的關鍵詞。語法如下:

with (object)
   statement 
// for multiple statements add a block
with (object) {
   statement
   statement
   ...
}

with可以對傳遞過來的對象進行解析犹菇,在with 塊里可以直接使用對象的屬性德迹。

withObject.png

有趣的事實

with塊看起來很酷對不對?甚至比object destructuring還好揭芍。

但是胳搞,并不是這樣的。

通常不鼓勵使用with語句,因為它已被棄用肌毅。 在嚴格模式下完全禁止筷转。 事實證明,with塊會增加語言中的一些性能和安全性問題悬而。Bummer

構造函數(shù)

function語句并不是定義新函數(shù)的唯一方法呜舒;你可以使用【Function()】這個構造函數(shù)和new運算符動態(tài)定義函數(shù)。

functionConstruction.png

構造函數(shù)的最后一個參數(shù)是字符串化代碼笨奠,就是你寫的函數(shù)袭蝗。其他參數(shù)是該函數(shù)的參數(shù)。

有趣的事實

在js般婆,F(xiàn)unction構造函數(shù)是所有構造函數(shù)的構造函數(shù)到腥。也包括Object的構造函數(shù)。并且Function構造函數(shù)的構造函數(shù)就是它自身蔚袍。因此乡范,調用object.constructor.constructor...足夠多次后,在js中页响,最終會在任何對象返回Function構造函數(shù)篓足。

Function 的屬性

我們知道在js中,F(xiàn)unctions是首個對象闰蚕。因此,沒有人能阻止我們在Function對象上添加自己的屬性连舍。這是可以的没陡,但是很少會這樣做。

那有什么場景會應用到呢索赏?

有一些很好的用例盼玄。例如,

讓Functions可配置化

我們有個greet函數(shù)潜腻。我們想要讓我們的函數(shù)在不同的環(huán)境下打印不同語言的問候語埃儿。這個環(huán)境是可以配置的。我們可以在某處維護個全局環(huán)境變量融涣,或者使用上文所說的添加自定義屬性

ConfigurableFunctions.png

Function的靜態(tài)變量

另一個相似的例子童番。假設你想要實現(xiàn)一個生成一系列有序數(shù)字的數(shù)字生成器。通常來說威鹿,你會用Class或者IIFE剃斧,在里面維護一個計數(shù)變量,然后輸出有序的值忽你。這樣我們就可以限制對計數(shù)器的訪問幼东,并避免使用額外的變量來污染全局空間。

但是,如果我們希望靈活地讀取甚至修改計數(shù)器并且不污染全局空間呢根蟹?

好吧脓杉,我們仍然可以創(chuàng)建一個Class,帶有一個計數(shù)器變量和一些額外的方法來讀取它; 或者我們可以懶一點简逮,只需在函數(shù)上使用屬性球散。

FunctionWithStaticVariables.png

現(xiàn)在是中場休息時間,我們等你回來买决。如果你想接著繼續(xù)沛婴,你是一個勇敢的戰(zhàn)士,我向你致敬督赤。

繼續(xù)吧

Arguments屬性

我相信大多數(shù)人都知道函數(shù)中的參數(shù)對象嘁灯。 它是一個像對象一樣的數(shù)組(譯者:emmm),在所有函數(shù)中都能訪問到躲舌。它具有在調用函數(shù)時傳遞的參數(shù)列表丑婿,也有其他一些有趣的屬性。

  • arguments.callee:指向當前調用函數(shù)
  • arguments.callee.caller:指向當前被調函數(shù)的調用者没卸。
ArgumentsProperties.png

注意:雖然ES5禁止在嚴格模式下使用callee和caller羹奉,但在許多編譯庫中仍然常見。 所以约计,值得學習它們诀拭。

標記模版字面量

除非你是井底之蛙,你一定聽說過模版字面量煤蚌。模版字面量時es6的一個很酷的補充耕挨。然而,你聽說過Tagged模版字面量么(Tagged Template Literals)尉桩?

TaggedTemplateLiterals.png

Tagged模板字面量允許您通過向模板字面量添加自定義標記來更好地控制將模板字面量解析為字符串筒占。Tagged只是一個獲取字符串模板解析后的所有字符串和值的數(shù)組的解析器函數(shù)。Tagged函數(shù)最終返回字符串蜘犁。

在下面的示例中翰苫,我們的自定義標記 - highlight,解釋模板文字的值这橙,并使用

<mark>

元素將解釋的值包裝在結果字符串中奏窑,以突出顯示。

Tagged.png

Getter & Setter

在大多數(shù)情況下析恋,js對象時很簡單的良哲。比如說有一個對象叫user,我們嘗試使用user.age來讀取age屬性時助隧,如果有定義并賦值了筑凫,就有返回滑沧。如果沒有,就返回undefined巍实。簡單滓技。

但是,它不一定非常簡單棚潦。 JavaScript對象具有Getters和Setter的概念令漂。 我們可以編寫自定義的Getter函數(shù)來返回我們想要的任何內容,而不是直接返回對象上的值丸边。 設置值也是一樣的叠必。

這使我們可以在獲取或設置屬性時可以靈活的創(chuàng)造虛擬屬性、驗證屬性妹窖。

GettersSetters.png

Getters和Setters不是es5的特性纬朝,它們是一直都存在的特性。es5只是添加了語法糖骄呼。

逗號操作符

JavaScript有一個逗號運算符共苛。 它允許我們在一行中編寫由逗號分隔的多個表達式,并返回最后一個表達式的結果

// syntax
let result = expression1, expression2,... expressionN

來看看上面的例子蜓萄,這里將會解析所有的表達式隅茎,并把result變量賦予expressionN返回的值。

你可能在循環(huán)里面使用過了

for (var a = 0, b = 10; a <= 10; a++, b--)

它可以幫助我們把語句寫在一行

function getNextValue() {
    return counter++, console.log(counter), counter
}

或者寫lamda表達式

const getSquare = x => (console.log (x), x * x)

+ 加操作符

想要知道如何便捷地把字符串轉換成number嫉沽?

只要在字符串前面加個+號辟犀。

Plus運算符也適用于負,八進制绸硕,十六進制踪蹬,指數(shù)值。 更重要的是臣咖,它甚至可以將Date或Moment.js對象轉換為時間戳!

PlusOperator.png

!! Bang Bang 操作符

好的漱牵,嚴格來講夺蛇,它不是一個單獨的JavaScript運算符。 它只是兩次使用的JavaScript否定運算符酣胀。

但是Bang Bang聽起來很酷刁赦!Bang Bang是一個可以講任何表達式轉換成布爾值的方法。

如果表達式是一個true闻镶,則返回true甚脉;否則返回false。

BangBangOperator.png

~ 位運算作符

來看一個沒人關注的位運算操作符铆农。我們什么時候用它呢牺氨?

好吧,有個日常用例。

當與數(shù)字一起使用時猴凹,Tilde運算符有效夷狰,像這樣

~N => -(N + 1)。

僅當N == -1時郊霎,此表達式的計算結果為“0”

我們可以通過在indexOf(...)函數(shù)前面放置?來進行布爾檢查是否有一項存在沼头。String或Array中都可以用這個。

TildeOperator.png

注意:ES6和ES7分別在String&Array中添加了一個新的.includes()方法书劝。當然进倍,它比位運算運算符更清晰,以檢查項目是否存在于Array或String中购对。

標簽語句

js具有標簽語句的概念猾昆。它允許我們在js中命名循環(huán)和塊。然后洞斯,我們可以使用這些標簽在使用break或continue時使用毡庆。

帶標簽的語句在嵌套循環(huán)中特別方便。但是我們也可以使用它們來簡單地將代碼組織成塊或創(chuàng)建一個可退出的塊

LabelledStatements.png

注意:不像其他的語言烙如,js沒有goto語句么抗。因此,我們只能使用labels來搭配break和continue使用亚铁。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末蝇刀,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子徘溢,更是在濱河造成了極大的恐慌吞琐,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件然爆,死亡現(xiàn)場離奇詭異站粟,居然都是意外死亡,警方通過查閱死者的電腦和手機曾雕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評論 3 385
  • 文/潘曉璐 我一進店門奴烙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人剖张,你說我怎么就攤上這事切诀。” “怎么了搔弄?”我有些...
    開封第一講書人閱讀 157,435評論 0 348
  • 文/不壞的土叔 我叫張陵幅虑,是天一觀的道長。 經常有香客問我顾犹,道長倒庵,這世上最難降的妖魔是什么褒墨? 我笑而不...
    開封第一講書人閱讀 56,509評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮哄芜,結果婚禮上貌亭,老公的妹妹穿的比我還像新娘。我一直安慰自己认臊,他們只是感情好圃庭,可當我...
    茶點故事閱讀 65,611評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著失晴,像睡著了一般剧腻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上涂屁,一...
    開封第一講書人閱讀 49,837評論 1 290
  • 那天书在,我揣著相機與錄音,去河邊找鬼拆又。 笑死儒旬,一個胖子當著我的面吹牛,可吹牛的內容都是我干的帖族。 我是一名探鬼主播栈源,決...
    沈念sama閱讀 38,987評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼竖般!你這毒婦竟也來了甚垦?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,730評論 0 267
  • 序言:老撾萬榮一對情侶失蹤涣雕,失蹤者是張志新(化名)和其女友劉穎艰亮,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挣郭,經...
    沈念sama閱讀 44,194評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡迄埃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,525評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了兑障。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片调俘。...
    茶點故事閱讀 38,664評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖旺垒,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情肤无,我是刑警寧澤先蒋,帶...
    沈念sama閱讀 34,334評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站宛渐,受9級特大地震影響竞漾,放射性物質發(fā)生泄漏眯搭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,944評論 3 313
  • 文/蒙蒙 一业岁、第九天 我趴在偏房一處隱蔽的房頂上張望鳞仙。 院中可真熱鬧,春花似錦笔时、人聲如沸棍好。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽借笙。三九已至,卻和暖如春较锡,著一層夾襖步出監(jiān)牢的瞬間业稼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評論 1 266
  • 我被黑心中介騙來泰國打工蚂蕴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留低散,地道東北人。 一個月前我還...
    沈念sama閱讀 46,389評論 2 360
  • 正文 我出身青樓骡楼,卻偏偏與公主長得像熔号,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子君编,可洞房花燭夜當晚...
    茶點故事閱讀 43,554評論 2 349

推薦閱讀更多精彩內容

  • 前言:這是一篇轉載文吃嘿,小編覺得不錯于是分享給大家祠乃,文中的我指原文作者 javaScript 通常被認為是最容易入門...
    強哥科技興閱讀 532評論 0 1
  • 標簽: 我的筆記 ---學習資料:http://javascript.ruanyifeng.com/ 1. 導論 ...
    暗夜的怒吼閱讀 801評論 0 1
  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,128評論 0 3
  • 0. 寫在前面 當你開始工作時,你不是在給你自己寫代碼兑燥,而是為后來人寫代碼亮瓷。 —— Nichloas C. Zak...
    康斌閱讀 5,309評論 1 42
  • 三原則:圖原創(chuàng),文原創(chuàng)降瞳,詩原創(chuàng)嘱支。 寒夜 讀一封南方寄來的信 推開窗 遇見悄然蘇醒的黎明 風雪冰封了全世界 桌上的那...
    秋水飲馬閱讀 2,720評論 64 84