這13個好用的JavaScript特性，估計你都沒用過～

一、逗號運算符

, 是用于分隔表達(dá)式并返回鏈中最后一個表達(dá)式的運算符。

let?oo?=?(1,?2,?3)
console.log(oo)?//?3

這里有三個主要表達(dá)式 1 、 2 和 3。所有這些表達(dá)式均被求值，最后一個賦給 oo。

我們在 for 循環(huán)中看到這個：

for(let?i?=?0,?ii?=?1;?i10;?i++,?ii--)?{?...?}

當(dāng)我們要編寫短的 lambda 函數(shù)時，這會派上用場：

const?lb?=?(a,?b,?arr)?=>?(arr.push(a*b),?a*b)

這里有兩個語句，第一個將乘法結(jié)果推入數(shù)組arr，第二個將乘數(shù)a和b推入數(shù)組。第二個結(jié)果就是返回給調(diào)用者的內(nèi)容。

對于三元運算符，它也很有用，因為與短lambda語法相同，它僅接受表達(dá)式而不是語句。

二、in

in 是用于檢查對象中屬性是否存在的關(guān)鍵字。我們在 for..in 循環(huán)中使用了它，但沒有意識到，其實 in 也是一個關(guān)鍵字:)

如果對象上存在屬性，則 in 將返回 true ，否則將返回 false。

const?o?=?{
????prop:?1
}
console.log("prop"?in?o)?//?true

看，in 可以獨立使用，而不是在 for..in 中。

它將檢查 "prop" 是否可作為 o 對象中的屬性使用。它返回 true ，因為我們在 o 中定義了 "prop" 屬性。

如果我們檢查未定義的屬性：

const?o?=?{
????prop:?1
}
console.log("prop1"?in?o)?//?false

它返回 false ，因為 "prop1" 在 o 中未定義。

三、Array 構(gòu)造函數(shù)

你知道我們可以不使用傳統(tǒng)方法定義數(shù)組嗎？

const?arr?=?[1,?2,?3]

怎么樣？

我們也可以使用 Array ：

const?arr?=?new?Array(1,?2,?3)

傳遞給 Array 構(gòu)造函數(shù)的參數(shù)的排列將構(gòu)成其索引的基礎(chǔ)。

1 是第一個參數(shù)，其索引為 0；2 是第二個參數(shù)，其索引為 1；3 是第三個參數(shù)，其索引為 2。

arr[0]?//?1
arr[1]?//?2
arr[2]?//?3

所以，

const?arr?=?new?Array(1,?2,?3)

和

const?arr?=?[1,?2,?3]

表達(dá)的是一個意思。

但使用 new Array() 有一個問題，例如：

var?a?=?new?Array(10,?20);
a[0]?//?返回?10
a.length?//?返回?2

但：

var?a?=?new?Array(10);
a[0]?//?返回?undefined
a.length?//?返回?10

當(dāng)你僅給 Array 構(gòu)造函數(shù)一個整數(shù)（大于等于 0 的整數(shù)，否則將會報錯）時，才會發(fā)生這種情況。這是為什么喃？

其實，新的 Array 構(gòu)造函數(shù)正在從某些編程語言中提取思想，在這些語言中，你需要為數(shù)組指定內(nèi)存，這樣就不會出現(xiàn) ArrayIndexOutOfBounds 異常。

int?*a?=?(int?*)?malloc(?10*sizeof(int)?);?//?ya?ol'?c
int?*a?=?new?int[10];?//?c++
int[]?a?=?new?int[10];?//?java

是的，它實際上是在創(chuàng)建一個長度為 10 的數(shù)組。我們在 Javascript 中沒有 sizeof 函數(shù)，但是 toString 足以證明這一點。

a.toString()?//?返回?",,,,,,,,,"?它相當(dāng)于?[,,,,,,,,,]
a?//?[empty?×?10]

所以，當(dāng)將一個參數(shù)傳遞給的 new Array，將導(dǎo)致 JS 引擎為傳遞的參數(shù)大小的數(shù)組分配空間。

并且這也在 EcmaScript 規(guī)范中：

看，這不是矛盾的。規(guī)格中都有所有描述。在得出任何結(jié)論之前，我們應(yīng)該始終先閱讀任何語言的規(guī)范。

四、Function 構(gòu)造函數(shù)

你是否知道我們可以使用 Function 構(gòu)造函數(shù)定義 Function 。

你不明白吧？讓我更清楚。在 JavaScript 中，我們定義如下函數(shù)：

const?mul?=?(a,?b)?=>?a?*?b

//?或
function?mul(a,?b)?{
????return?a?*?b
}

//?或
const?mul?=?function(a,?b)?{
????return?a?*?b
}

我們也可以這樣做，來實現(xiàn)相同的功能：

const?mul?=?new?Function("a",?"b",?"return?a?*?b")

傳遞給 Function 的參數(shù)形成函數(shù)的參數(shù)和主體。變量 mul 成為函數(shù)名稱。

并且，最后一個參數(shù)將是函數(shù)的主體，而最后一個參數(shù)之前的參數(shù)將成為函數(shù)的參數(shù)。

在在 mul 中。?"a" 和 "b" 是函數(shù)將接收的參數(shù)，"return a * b" 是函數(shù)的主體。它實現(xiàn)將 "a" 和 "b" 相乘并返回結(jié)果。

我們使用 mul（…） 調(diào)用該函數(shù)，并傳入?yún)?shù)：

const?mul?=?new?Function("a",?"b",?"return?a?*?b")

console.log(mul(7,?8))?//?56

根據(jù) MDN：

Function 構(gòu)造函數(shù)創(chuàng)建一個新的 Function 對象。直接調(diào)用此構(gòu)造函數(shù)可用動態(tài)創(chuàng)建函數(shù)，但會遭遇來自 eval 的安全問題和相對較小的性能問題。然而，與 eval 不同的是，F(xiàn)unction 構(gòu)造函數(shù)只在全局作用域中運行。

五、數(shù)組解構(gòu)

我們可以通過使用元素的索引號來分解數(shù)組中的元素。

const?arr?=?[1,?2,?3]

元素 1 、2 、3 的索引分別為 0、1、2，即：

arr[0]?//?1

在日常開發(fā)中，我們最常使用的是對象解構(gòu)：

let?o?=?{
????prop:?1
}
o["prop"]?//?1

//?解構(gòu)
const?{prop}?=?o
prop?//?1

所以，我們將解構(gòu)用于數(shù)組上：

const?arr?=?[1,?2,?3]
const?{?0:?firstA,?1:?secA,?2:?thirdA??}?=?arr

firstA?//?1
secA?//?2
thirdA?//?3

所以我們可以使用索引號來提取元素。索引是定義數(shù)組中元素位置的屬性。

const?arr?=?[1,?2,?3]

相當(dāng)于：

const?arr?=?{
????0:?1,
????1:?2,
????2:?3,
????length:?3
}

數(shù)組也是對象，這就是為什么要對其進(jìn)行對象分解的原因，但是還有一種特殊的數(shù)組分解語法：

const?[first,?second,?third]?=?arr

first?//?1
second?//?2
third?//?3

注意：應(yīng)盡可能避免知道數(shù)組中的特定位置信息（開始、結(jié)束索引是什么）。

六、使用 length 屬性減少數(shù)組內(nèi)容

數(shù)組中的 length 屬性表示數(shù)組中元素的數(shù)目。

const?arr?=?[1,?2,?3]
arr.length?//?3

減小 length 屬性值，會使 JS 引擎將數(shù)組元素個數(shù)減少到與 length 屬性的值相等。

const?arr?=?[1,?2,?3]
arr.length?//?3
arr.length?=?1
arr?//?[1]

arr 的 length 屬性值更改為 1，因此 arr 減少了元素個數(shù)，使其等于 length 屬性值。

如果增加 length 屬性，則 JS 引擎將添加元素（未定義的元素）以使數(shù)組中的元素數(shù)量達(dá)到 length 屬性的值。

const?arr?=?[1,?2,?3]
arr.length?//?3
arr.length?=?1
arr?//?[1]

arr.length?=?5
arr?//?[1,?empty?×?4]

arr 中的元素只有一個，然后我們將長度增加到 5 ，因此又增加了 4 個元素長度，使元素數(shù)達(dá)到 5。

七、Arguments

我們可以使用 arguments 對象獲取傳遞給函數(shù)的參數(shù)，而無需在函數(shù)中明確定義 arguments 變量：

function?myFunc()?{
????console.log(arguments[0])?//?34
????console.log(arguments[1])?//?89
}

myFunc(34,89)

arguments 對象是數(shù)組索引的。也就是說，屬性是數(shù)字，因此可以通過鍵引用進(jìn)行訪問。

arguments 對象是從 Arguments 類實例化的，該類具有一些很酷的屬性。

arguments.callee.name 指當(dāng)前正在調(diào)用的函數(shù)的名稱。

function?myFunc()?{
????console.log(arguments.callee.name)?//?myFunc
}

myFunc(34,?89)

arguments.callee.caller.name 是指調(diào)用當(dāng)前執(zhí)行函數(shù)的函數(shù)的名稱。

function?myFunc()?{
????console.log(arguments.callee.name)?//?myFunc
????console.log(arguments.callee.caller.name)?//?myFuncCallee
}

(function?myFuncCallee()?{
????myFunc(34,?89)
})()

這在可變參數(shù)功能中特別有用。

八、跳過 ()

你是否知道實例化對象時可以跳過方括號 () ？

例如：

class?D?{
????logger()?{
????????console.log("D")
????}
}

//?一般情況下，我們這么做：
(new?D()).logger();?//?D

//?其實，我們可以跳過?():
(new?D).logger();?//?D
//?并且它可以正常運行

即使在內(nèi)置類中，括號也是可選的：

(new?Date).getDay();
(new?Date).getMonth();
(new?Date).getYear();

九、void

void 是 JS 中的關(guān)鍵字，用于評估語句并返回未定義。

例如：

class?D?{
???logger()?{
????????return?89
????}
}

const?d?=?new?D

console.log(void?d.logger())?//?undefined

logger 方法應(yīng)該返回 89 ，但是 void 關(guān)鍵字將使其無效并返回 undefined 。

我曾經(jīng)讀到過 undefined 之前可能會被賦予另一個值，而這會偽造其語義。因此，使用 void 運算符可確保你得到一個真正的 undefined 。也用于最小化目的。

十、通過 `proto` 繼承

_proto_ 是從 JavaScript 中的對象繼承屬性的方法。__proto__ 是 ? Object.prototype 的訪問器屬性，它公開訪問對象的 [[Prototype]] 。

此 __proto__ 將其 [[Prototype]] 中設(shè)置的對象的所有屬性設(shè)置為目標(biāo)對象。

讓我們看一個例子：

const?l?=?console.log
const?obj?=?{
????method:?function()?{
????????l("method?in?obj")
????}
}
const?obj2?=?{}
obj2.__proto__?=?obj
obj2.method()?//?method?in?obj

我們有兩個對象常量：obj 和 obj2 。obj 具有 method 屬性。obj2 是一個空的對象常量，即它沒有屬性。

我們訪問 obj2 的 __proto__ 并將其設(shè)置為 obj 。這會將通過 Object.prototype 可訪問的 obj 的所有屬性復(fù)制到 obj2 。這就是為什么我們可以在 obj2 上調(diào)用方法而不會在沒有定義的情況下得到錯誤的原因。

obj2 繼承了 obj 的屬性，因此 method 方法屬性將在其屬性中可用。

原型可用于對象，例如對象常量、對象、數(shù)組、函數(shù)、日期、RegEx、數(shù)字、布爾值、字符串。

十一、一元運算符 +

一元 + 運算符將其操作數(shù)轉(zhuǎn)換為數(shù)字類型。

+"23"?//?23
+{}?//?NaN
+null?//?0
+undefined?//?NaN
+{?valueOf:?()?=>?67?}?//?67
+"nnamdi45"?//?NaN

當(dāng)我們希望將變量快速轉(zhuǎn)換為 Number 時，這非常方便。

十二、一元運算符 -

一元運算符 - 將其操作數(shù)轉(zhuǎn)換為 Number 類型，然后取反。

該運算符將一元 + 運算符的結(jié)果取反。首先，它將操作數(shù)轉(zhuǎn)換為其 Number 值，然后取反該值。

-"23"?//?-23

此處發(fā)生的是，字符串 "23" 將轉(zhuǎn)換為其數(shù)字類型，從而得到 23 。然后，此正數(shù)將轉(zhuǎn)換為其負(fù)數(shù)形式 -23 。

-{}?//?NaN
-null?//?-0
-undefined?//?NaN
-{?valueOf:?()?=>?67?}?//?-67
-"nnamdi45"?//?NaN

如果轉(zhuǎn)換為數(shù)值的結(jié)果為 NaN ，則不會應(yīng)用取反。

取負(fù) +0 產(chǎn)生 -0 ，取負(fù) -0 產(chǎn)生 +0 。

-?+0?//?-0
-?-0?//?0

十三、指數(shù)運算符 **

該運算符用于指定數(shù)字的指數(shù)。

在數(shù)學(xué)中， 2 的 3 次方意味著將 2 乘以 3 次：

2?*?2?*?2

我們可以使用 ** 運算符在 JS 中進(jìn)行相同的操作：

2?**?3?//?8
9?**?3?//?729