ECMAScript 6學(xué)習(xí)(四)

本人是android開發(fā)的,由于最近React Native的火熱,再加上自己完全不懂JS的語法,俗話說的好"落后就要挨打",雖然不知道誰說的,不過很有道理.

學(xué)習(xí)書籍《ECMAScript 6 入門 》

各種類型的擴(kuò)展


正則的擴(kuò)展

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

第一種情況是,參數(shù)是字符串,這時第二個參數(shù)表示正則表達(dá)式的修飾符(flag)

var regex = new RegExp('xyz', 'i');

// 等價于

var regex = /xyz/i;

第二種情況是,參數(shù)是一個正則表示式,這時會返回一個原有正則表達(dá)式的拷貝。

var regex = new RegExp (/xyz/i);

// 等價于

var regex = /xyz/i;

但是,ES5不允許此時使用第二個參數(shù),添加修飾符,否則會報錯。

var regex = new RegExp (/xyz/, 'i');

// Uncaught TypeError: Cannot supply flags when constructing one RegExp from another

ES6改變了這種行為。如果RegExp構(gòu)造函數(shù)第一個參數(shù)是一個正則對象,那么可以使用第二個參數(shù)指定修飾符。而且,返回的正則表達(dá)式會忽略原有的正則表達(dá)式的修飾符,只使用新指定的修飾符。

new RegExp(/abc/ig, 'i').flags

// "i"

上面代碼中,原有正則對象的修飾符是 ig,它會被第二個參數(shù) i 覆蓋。

u修飾符

ES6對正則表達(dá)式添加了u修飾符,含義為“Unicode模式”,用來正確處理大于\uFFFF的Unicode字符。也就是說,會正確處理四個字節(jié)的UTF-16編碼。

一旦加上u修飾符號,就會修改下面這些正則表達(dá)式的行為。

var s = '??';

/^.$/.test(s)

// false

/^.$/u.test(s)

// true

上面代碼表示,如果不添加u修飾符,正則表達(dá)式就會認(rèn)為字符串為兩個字符,從而匹配失敗。

/\u{61}/.test('a') // false

/\u{61}/u.test('a') // true

/\u{20BB7}/u.test('??') // true

上面代碼表示,如果不加u修飾符,正則表達(dá)式無法識別\u{61}這種表示法,只會認(rèn)為這匹配61個連續(xù)的u。

使用u修飾符后,所有量詞都會正確識別碼點(diǎn)大于0xFFFF的Unicode字符。

/a{2}/.test('aa') // true

/a{2}/u.test('aa') // true

/??{2}/.test('????') // false

/??{2}/u.test('????') // true

有些Unicode字符的編碼不同,但是字型很相近,比如,\u004B\u212A都是大寫的K。

/[a-z]/i.test('\u212A') // false

/[a-z]/iu.test('\u212A') // true

上面代碼中,不加u修飾符,就無法識別非規(guī)范的K字符。

y 修飾符

除了u修飾符,ES6還為正則表達(dá)式添加了y修飾符,叫做“粘連”(sticky)修飾符。

y修飾符的作用與g修飾符類似,也是全局匹配,后一次匹配都從上一次匹配成功的下一個位置開始。不同之處在于,g修飾符只要剩余位置中存在匹配就可,而y修飾符確保匹配必須從剩余的第一個位置開始,這也就是“粘連”的涵義。

var s = 'aaa_aa_a';

var r1 = /a+/g;

var r2 = /a+/y;

r1.exec(s) // ["aaa"]

r2.exec(s) // ["aaa"]

r1.exec(s) // ["aa"]

r2.exec(s) // null

上面代碼有兩個正則表達(dá)式,一個使用g修飾符,另一個使用y修飾符。這兩個正則表達(dá)式各執(zhí)行了兩次,第一次執(zhí)行的時候,兩者行為相同,剩余字符串都是_aa_a。由于g修飾沒有位置要求,所以第二次執(zhí)行會返回結(jié)果,而y修飾符要求匹配必須從頭部開始,所以返回null。

y修飾符相匹配,ES6的正則對象多了sticky屬性,表示是否設(shè)置了y修飾符。

var r = /hello\d/y;

r.sticky // true

ES6為正則表達(dá)式新增了flags屬性,會返回正則表達(dá)式的修飾符。

// ES5的source屬性

// 返回正則表達(dá)式的正文

/abc/ig.source

// "abc"

// ES6的flags屬性

// 返回正則表達(dá)式的修飾符

/abc/ig.flags

// 'gi'

目前,有一個提案,引入了一種新的類的寫法\p{...}\P{...},允許正則表達(dá)式匹配符合Unicode某種屬性的所有字符。

由于Unicode的各種屬性非常多,所以這種新的類的表達(dá)能力非常強(qiáng)。

const regex = /^\p{Decimal_Number}+$/u;

regex.test('????????????????????????????????') // true

上面代碼中,屬性類指定匹配所有十進(jìn)制字符,可以看到各種字型的十進(jìn)制字符都會匹配成功。

\p{Number}甚至能匹配羅馬數(shù)字。

// 匹配所有數(shù)字

const regex = /^\p{Number}+$/u;

regex.test('231???') // true

regex.test('???') // true

regex.test('ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ') // true

數(shù)值的擴(kuò)展

ES6 提供了二進(jìn)制和八進(jìn)制數(shù)值的新的寫法,分別用前綴0b(或0B)和0o(或0O)表示。

0b111110111 === 503 // true

0o767 === 503 // true

如果要將0b0o前綴的字符串?dāng)?shù)值轉(zhuǎn)為十進(jìn)制,要使用Number方法。

ES6引入了Number.MAX_SAFE_INTEGERNumber.MIN_SAFE_INTEGER這兩個常量,用來表示這個范圍的上下限。

Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1

// true

Number.MAX_SAFE_INTEGER === 9007199254740991

// true

Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER

// true

Number.MIN_SAFE_INTEGER === -9007199254740991

// true

Number.isSafeInteger()則是用來判斷一個整數(shù)是否落在這個范圍之內(nèi)。

Number.isSafeInteger(3) // true

Number.isSafeInteger(1.2) // false

Number.isSafeInteger(9007199254740990) // true

Number.isSafeInteger(9007199254740992) // false

Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1) // false

Number.isSafeInteger(Number.MIN_SAFE_INTEGER) // true

Number.isSafeInteger(Number.MAX_SAFE_INTEGER) // true

Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1) // false

Math對象的擴(kuò)展

Math.trunc()方法用于去除一個數(shù)的小數(shù)部分,返回整數(shù)部分。

Math.trunc(4.1)// 4

Math.sign()方法用來判斷一個數(shù)到底是正數(shù)、負(fù)數(shù)、還是零。

它會返回五種值。

參數(shù)為正數(shù),返回+1;

參數(shù)為負(fù)數(shù),返回-1;

參數(shù)為0,返回0;

參數(shù)為-0,返回-0;

其他值,返回NaN。

Math.cbrt()方法用于計算一個數(shù)的立方根。

Math.clz32()方法返回一個數(shù)的32位無符號整數(shù)形式有多少個前導(dǎo)0.(JavaScript的整數(shù)使用32位二進(jìn)制形式表示)。

Math.imul()方法返回兩個數(shù)以32位帶符號整數(shù)形式相乘的結(jié)果,返回的也是一個32位的帶符號整數(shù)。

Math.imul(2, 4)? // 8

Math.imul(-1, 8)? // -8

Math.imul(-2, -2) // 4

Math.fround()方法返回一個數(shù)的單精度浮點(diǎn)數(shù)形式。

Math.fround(0)? ? // 0

Math.fround(1)? ? // 1

Math.fround(1.337) // 1.3370000123977661

Math.fround(1.5)? // 1.5

Math.fround(NaN)? // NaN

Math.hypot()方法返回所有參數(shù)的平方和的平方根。

Math.hypot(3, 4);? ? ? ? // 5

Math.hypot(3, 4, '5');? // 7.0710678118654755

Math.expm1(x)返回ex- 1,即Math.exp(x) - 1

等......太多了,放鏈接:

數(shù)值的擴(kuò)展

數(shù)組的擴(kuò)展

函數(shù)的擴(kuò)展

1.rest參數(shù)

ES6 引入 rest 參數(shù)(形式為“...變量名”),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用arguments對象了。rest 參數(shù)搭配的變量是一個數(shù)組,該變量將多余的參數(shù)放入數(shù)組中。

rest 參數(shù)中的變量代表一個數(shù)組,所以數(shù)組特有的方法都可以用于這個變量。下面是一個利用 rest 參數(shù)改寫數(shù)組push方法的例子。

function push(array, ...items) {

? ? ? items.forEach(function(item) {

? ? ? ? ? ? ? ? array.push(item);

? ? ? ? ? ? ? ? console.log(item);

? ? ? ?});

}

var a = [];

push(a, 1, 2, 3)

注意,rest 參數(shù)之后不能再有其他參數(shù)(即只能是最后一個參數(shù)),否則會報錯。

// 報錯

function f(a, ...b, c) {

// ...

}

函數(shù)的length屬性,不包括 rest 參數(shù)。

(function(a) {}).length? // 1

(function(...a) {}).length? // 0

(function(a, ...b) {}).length? // 1


2.擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符(spread)是三個點(diǎn)(...)。它好比 rest 參數(shù)的逆運(yùn)算,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。

任何Iterator接口的對象,都可以用擴(kuò)展運(yùn)算符轉(zhuǎn)為真正的數(shù)組。

Map結(jié)構(gòu)

let map = new Map([

? ?[1, 'one'],

? ?[2, 'two'],

? ?[3, 'three'],

]);

let arr = [...map.keys()]; // [1, 2, 3]

Generator函數(shù)運(yùn)行后,返回一個遍歷器對象,因此也可以使用擴(kuò)展運(yùn)算符。

var go = function*(){

? ? ?yield 1;

? ? ?yield 2;

? ? ? yield 3;

};

[...go()] // [1, 2, 3]

如果對沒有iterator接口的對象,使用擴(kuò)展運(yùn)算符,將會報錯。


3.lambda演算

箭頭函數(shù)還有一個功能,就是可以很方便地改寫λ演算

首先說一下 lambda演算;

lambda演算寫法

λx.x + 2

使用JavaScript來寫,如下:

(function(x) {? ??

? ?return x + 2;

}) ();

兩個lambda合并寫法

(λx.x*x)(λx.x+2)

讓我們來算算看:

x = 3 時,λx.x*x 的 輸出為 9

9 做為?λx.x+2 的 輸入,成為?9 + 2,輸出為?11

答案就是 11

(λx.x*x)(λx.x+2) 等于?9 + 2。

箭頭函數(shù)改寫lambda演算 如下:

// λ演算的寫法

fix = λf.(λx.f(λv.x(x)(v))) (λx.f(λv.x(x)(v)))

// ES6的寫法

var ?fix = f ?=> (x=>f(v=>x(x)(v)))

? ? ? ? ? ? ? ? ? ? ? ?(x=>f(v=>x(x)(v)));

對象的屬性的遍歷

ES6一共有5種方法可以遍歷對象的屬性。

(1)for...in

for...in循環(huán)遍歷對象自身的和繼承的可枚舉屬性(不含Symbol屬性)。

(2)Object.keys(obj)

Object.keys返回一個數(shù)組,包括對象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性)。

(3)Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個數(shù)組,包含對象自身的所有屬性(不含Symbol屬性,但是包括不可枚舉屬性)。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個數(shù)組,包含對象自身的所有Symbol屬性。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys返回一個數(shù)組,包含對象自身的所有屬性,不管是屬性名是Symbol或字符串,也不管是否可枚舉。

以上的5種方法遍歷對象的屬性,都遵守同樣的屬性遍歷的次序規(guī)則。

首先遍歷所有屬性名為數(shù)值的屬性,按照數(shù)字排序。

其次遍歷所有屬性名為字符串的屬性,按照生成時間排序。

最后遍歷所有屬性名為Symbol值的屬性,按照生成時間排序。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })

// ['2', '10', 'b', 'a', Symbol()]

Null 傳導(dǎo)運(yùn)算符

編程實(shí)務(wù)中,如果讀取對象內(nèi)部的某個屬性,往往需要判斷一下該對象是否存在。比如,要讀取message.body.user.firstName,安全的寫法是寫成下面這樣。

const firstName = (message

&& message.body

&& message.body.user

&& message.body.user.firstName) || 'default';

這樣的層層判斷非常麻煩,因此現(xiàn)在有一個提案,引入了“Null 傳導(dǎo)運(yùn)算符”(null propagation operator)?.,簡化上面的寫法。

const ?firstName = message?.body?.user?.firstName || 'default';

上面代碼有三個?.運(yùn)算符,只要其中一個返回nullundefined,就不再往下運(yùn)算,而是返回undefined。

“Null 傳導(dǎo)運(yùn)算符”有四種用法。

obj?.prop// 讀取對象屬性

obj?.[expr]// 同上

func?.(...args)// 函數(shù)或?qū)ο蠓椒ǖ恼{(diào)用

new C?.(...args)// 構(gòu)造函數(shù)的調(diào)用

傳導(dǎo)運(yùn)算符之所以寫成obj?.prop,而不是obj?prop,是為了方便編譯器能夠區(qū)分三元運(yùn)算符?:(比如obj?prop:123)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容