小編給大家分享一下JavaScript特性的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)2013年至今,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命,1280元隆子做網(wǎng)站,已為上家服務(wù),為隆子各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575一、逗號(hào)運(yùn)算符
, 是用于分隔表達(dá)式并返回鏈中最后一個(gè)表達(dá)式的運(yùn)算符。
let oo = (1, 2, 3) console.log(oo) // 3
這里有三個(gè)主要表達(dá)式 1 、 2 和 3。所有這些表達(dá)式均被求值,最后一個(gè)賦給 oo。
我們?cè)?for 循環(huán)中看到這個(gè):
for(let i = 0, ii = 1; i< 10; i++, ii--) { ... }
當(dāng)我們要編寫短的 lambda 函數(shù)時(shí),這會(huì)派上用場:
const lb = (a, b, arr) => (arr.push(a*b), a*b)
這里有兩個(gè)語句,第一個(gè)將乘法結(jié)果推入數(shù)組arr,第二個(gè)將乘數(shù)a和b推入數(shù)組。 第二個(gè)結(jié)果就是返回給調(diào)用者的內(nèi)容。
對(duì)于三元運(yùn)算符,它也很有用,因?yàn)榕c短lambda語法相同,它僅接受表達(dá)式而不是語句。
二、in
in 是用于檢查對(duì)象中屬性是否存在的關(guān)鍵字。 我們?cè)?for..in 循環(huán)中使用了它,但沒有意識(shí)到,其實(shí) in 也是一個(gè)關(guān)鍵字:)
如果對(duì)象上存在屬性,則 in 將返回 true ,否則將返回 false。
const o = { prop: 1 } console.log("prop" in o) // true
看,in 可以獨(dú)立使用,而不是在 for..in 中。
它將檢查 "prop" 是否可作為 o 對(duì)象中的屬性使用。 它返回 true ,因?yàn)槲覀冊(cè)?o 中定義了 "prop" 屬性。
如果我們檢查未定義的屬性:
const o = { prop: 1 } console.log("prop1" in o) // false
它返回 false ,因?yàn)?"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 是第一個(gè)參數(shù),其索引為 0; 2 是第二個(gè)參數(shù),其索引為 1; 3 是第三個(gè)參數(shù),其索引為 2。
arr[0] // 1 arr[1] // 2 arr[2] // 3
所以,
const arr = new Array(1, 2, 3)
和
const arr = [1, 2, 3]
表達(dá)的是一個(gè)意思。
但使用 new Array() 有一個(gè)問題,例如:
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ù)一個(gè)整數(shù)(大于等于 0 的整數(shù),否則將會(huì)報(bào)錯(cuò))時(shí),才會(huì)發(fā)生這種情況。 這是為什么喃?
其實(shí),新的 Array 構(gòu)造函數(shù)正在從某些編程語言中提取思想,在這些語言中,你需要為數(shù)組指定內(nèi)存,這樣就不會(huì)出現(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
是的,它實(shí)際上是在創(chuàng)建一個(gè)長度為 10 的數(shù)組。我們?cè)?Javascript 中沒有 sizeof 函數(shù),但是 toString 足以證明這一點(diǎn)。
a.toString() // 返回 ",,,,,,,,," 它相當(dāng)于 [,,,,,,,,,] a // [empty × 10]
所以,當(dāng)將一個(gè)參數(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 }
我們也可以這樣做,來實(shí)現(xiàn)相同的功能:
const mul = new Function("a", "b", "return a * b")
傳遞給 Function 的參數(shù)形成函數(shù)的參數(shù)和主體。 變量 mul 成為函數(shù)名稱。
并且,最后一個(gè)參數(shù)將是函數(shù)的主體,而最后一個(gè)參數(shù)之前的參數(shù)將成為函數(shù)的參數(shù)。
在在 mul 中。 "a" 和 "b" 是函數(shù)將接收的參數(shù),"return a * b" 是函數(shù)的主體。 它實(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)建一個(gè)新的 Function 對(duì)象。直接調(diào)用此構(gòu)造函數(shù)可用動(dòng)態(tài)創(chuàng)建函數(shù),但會(huì)遭遇來自 eval 的安全問題和相對(duì)較小的性能問題。然而,與 eval 不同的是,F(xiàn)unction 構(gòu)造函數(shù)只在全局作用域中運(yùn)行。
五、數(shù)組解構(gòu)
我們可以通過使用元素的索引號(hào)來分解數(shù)組中的元素。
const arr = [1, 2, 3]
元素 1 、2 、3 的索引分別為 0、1、2,即:
arr[0] // 1
在日常開發(fā)中,我們最常使用的是對(duì)象解構(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
所以我們可以使用索引號(hào)來提取元素。索引是定義數(shù)組中元素位置的屬性。
const arr = [1, 2, 3]
相當(dāng)于:
const arr = { 0: 1, 1: 2, 2: 3, length: 3 }
數(shù)組也是對(duì)象,這就是為什么要對(duì)其進(jìn)行對(duì)象分解的原因,但是還有一種特殊的數(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 屬性值,會(huì)使 JS 引擎將數(shù)組元素個(gè)數(shù)減少到與 length 屬性的值相等。
const arr = [1, 2, 3] arr.length // 3 arr.length = 1 arr // [1]
arr 的 length 屬性值更改為 1,因此 arr 減少了元素個(gè)數(shù),使其等于 length 屬性值。
如果增加 length 屬性,則 JS 引擎將添加元素(未定義的元素)以使數(shù)組中的元素?cái)?shù)量達(dá)到 length 屬性的值。
const arr = [1, 2, 3] arr.length // 3 arr.length = 1 arr // [1] arr.length = 5 arr // [1, empty × 4]
arr 中的元素只有一個(gè),然后我們將長度增加到 5 ,因此又增加了 4 個(gè)元素長度,使元素?cái)?shù)達(dá)到 5。
七、Arguments
我們可以使用 arguments 對(duì)象獲取傳遞給函數(shù)的參數(shù),而無需在函數(shù)中明確定義 arguments 變量:
function myFunc() { console.log(arguments[0]) // 34 console.log(arguments[1]) // 89 } myFunc(34,89)
arguments 對(duì)象是數(shù)組索引的。 也就是說,屬性是數(shù)字,因此可以通過鍵引用進(jìn)行訪問。
arguments 對(duì)象是從 Arguments 類實(shí)例化的,該類具有一些很酷的屬性。
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ù)功能中特別有用。
八、跳過 ()
你是否知道實(shí)例化對(duì)象時(shí)可以跳過方括號(hào) () ?
例如:
class D { logger() { console.log("D") } } // 一般情況下,我們這么做: (new D()).logger(); // D // 其實(shí),我們可以跳過 (): (new D).logger(); // D // 并且它可以正常運(yùn)行
即使在內(nèi)置類中,括號(hào)也是可選的:
(new Date).getDay(); (new Date).getMonth(); (new Date).getYear();
九、void
void 是 JS 中的關(guān)鍵字,用于評(píng)估語句并返回未定義。
例如:
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 之前可能會(huì)被賦予另一個(gè)值,而這會(huì)偽造其語義。 因此,使用 void 運(yùn)算符可確保你得到一個(gè)真正的 undefined 。 也用于最小化目的。
十、通過 __proto__ 繼承
_proto_ 是從 JavaScript 中的對(duì)象繼承屬性的方法。 __proto__ 是 Object.prototype 的訪問器屬性,它公開訪問對(duì)象的 [[Prototype]] 。
此 __proto__ 將其 [[Prototype]] 中設(shè)置的對(duì)象的所有屬性設(shè)置為目標(biāo)對(duì)象。
讓我們看一個(gè)例子:
const l = console.log const obj = { method: function() { l("method in obj") } } const obj2 = {} obj2.__proto__ = obj obj2.method() // method in obj
我們有兩個(gè)對(duì)象常量: obj 和 obj2 。 obj 具有 method 屬性。 obj2 是一個(gè)空的對(duì)象常量,即它沒有屬性。
我們?cè)L問 obj2 的 __proto__ 并將其設(shè)置為 obj 。 這會(huì)將通過 Object.prototype 可訪問的 obj 的所有屬性復(fù)制到 obj2 。 這就是為什么我們可以在 obj2 上調(diào)用方法而不會(huì)在沒有定義的情況下得到錯(cuò)誤的原因。
obj2 繼承了 obj 的屬性,因此 method 方法屬性將在其屬性中可用。
原型可用于對(duì)象,例如對(duì)象常量、對(duì)象、數(shù)組、函數(shù)、日期、RegEx、數(shù)字、布爾值、字符串。
十一、一元運(yùn)算符 +
一元 + 運(yùn)算符將其操作數(shù)轉(zhuǎn)換為數(shù)字類型。
+"23" // 23 +{} // NaN +null // 0 +undefined // NaN +{ valueOf: () => 67 } // 67 +"nnamdi45" // NaN
當(dāng)我們希望將變量快速轉(zhuǎn)換為 Number 時(shí),這非常方便。
十二、一元運(yùn)算符 -
一元運(yùn)算符 - 將其操作數(shù)轉(zhuǎn)換為 Number 類型,然后取反。
該運(yùn)算符將一元 + 運(yùn)算符的結(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 ,則不會(huì)應(yīng)用取反。
取負(fù) +0 產(chǎn)生 -0 ,取負(fù) -0 產(chǎn)生 +0 。
- +0 // -0 - -0 // 0
十三、指數(shù)運(yùn)算符 **
該運(yùn)算符用于指定數(shù)字的指數(shù)。
在數(shù)學(xué)中, 2^3^ 意味著將 2 乘以三次:
2 * 2 * 2
我們可以使用 ** 運(yùn)算符在 JS 中進(jìn)行相同的操作:
2 ** 3 // 8 9 ** 3 // 729
以上是“JavaScript特性的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!