本人是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
如果要將0b和0o前綴的字符串?dāng)?shù)值轉(zhuǎn)為十進(jìn)制,要使用Number方法。
ES6引入了Number.MAX_SAFE_INTEGER和Number.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ò)展
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)算符,只要其中一個返回null或undefined,就不再往下運(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)。