日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網(wǎng)為廣大站長提供免費收錄網(wǎng)站服務,提交前請做好本站友鏈:【 網(wǎng)站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

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

 

一、逗號運算符

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

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

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

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

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

當我們要編寫短的 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語法相同,它僅接受表達式而不是語句。

二、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)成其索引的基礎。

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]

表達的是一個意思。

但使用 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

當你僅給 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() // 返回 ",,,,,,,,," 它相當于 [,,,,,,,,,]
a // [empty × 10]

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

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

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

 

看,這不是矛盾的。規(guī)格中都有所有描述。在得出任何結(jié)論之前,我們應該始終先閱讀任何語言的規(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]

相當于:

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

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

const [first, second, third] = arr

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

注意:應盡可能避免知道數(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ù)量達到 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ù)達到 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ù)字,因此可以通過鍵引用進行訪問。

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

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

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

myFunc(34, 89)


arguments.callee.caller.name 是指調(diào)用當前執(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 方法應該返回 89 ,但是 void 關(guān)鍵字將使其無效并返回 undefined 。

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

十、通過 `proto` 繼承

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

此 __proto__ 將其 [[Prototype]] 中設置的對象的所有屬性設置為目標對象。

讓我們看一個例子:

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__ 并將其設置為 obj 。這會將通過 Object.prototype 可訪問的 obj 的所有屬性復制到 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

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

十二、一元運算符 -

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

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

-"23" // -23

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

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

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

取負 +0 產(chǎn)生 -0 ,取負 -0 產(chǎn)生 +0 。

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

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

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

在數(shù)學中, 2 的 3 次方意味著將 2 乘以 3 次:

2 * 2 * 2

我們可以使用 ** 運算符在 JS 中進行相同的操作:

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

來源

本文來翻譯自
https://blog.bitsrc.io/features-of-javascript-you-probably-never-used-4c117ba3f025

想學習JavaScript,可以點擊:了解更多 即可學習免費視頻

分享到:
標簽:特性 JavaScript
用戶無頭像

網(wǎng)友整理

注冊時間:

網(wǎng)站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨大挑戰(zhàn)2018-06-03

數(shù)獨一種數(shù)學游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數(shù)有氧達人2018-06-03

記錄運動步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定