字符串的拓展

字符串的遍歷器接口

ES6位字符串添加了遍歷器接口,使得字符串可以被for...of循環(huán)遍歷

includes(),startsWith(),endsWith()

包含,原字符串頭部,原字符串尾部
三個方法都支持第二個參數(shù),前兩個方法表示開始搜索的位置,而endsWith針對前n個字符

repeat()

repeat方法返回一個新字符串,表示原字符串重復n次.如果參數(shù)是小數(shù),會被向下取整;如果參數(shù)是負數(shù)或者Infinity,會報錯;但是如果參數(shù)介于0到-1之間,取整后等于-0,視同為0;參數(shù)NaN等同于0;如果參數(shù)是字符串,則先轉(zhuǎn)換成數(shù)字.

padStart(),padEnd()

ES2017引入字符串補全長度的功能.如果某個字符串不夠指定長度,會在頭部或尾部補全.兩者分別用于頭部和尾部補全
一共接收兩個參數(shù),第一個參數(shù)用來指定字符串的最小長度,第二個參數(shù)用來補全的字符串

'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'

如果省略第二個參數(shù),默認使用空格補全長度
padStart的常見用途是為數(shù)值補全指定位數(shù)和提示字符串格式.

模板字符串

用反引號標識``镊逝。它可以當作普通字符串使用惧财，也可以用來定義多行字符串，或者在字符串中嵌入變量(${},可以放入任意的JavaScript表達式,還能調(diào)用函數(shù))操骡。
如果要在模板字符串中使用反引號,前面要用反斜杠轉(zhuǎn)義.
如果使用模板字符串表示多行字符,所有的空格和縮進都會被保留在輸出之中.
如果大括號中的值不是字符串,將按照一般的規(guī)則轉(zhuǎn)為字符串.
如果模板字符串中的變量沒有聲明將報錯.
模板字符串的大括號內(nèi)部,就是執(zhí)行JavaScript代碼

標簽?zāi)０?/h5>

模板字符串緊跟在一個函數(shù)名后面,該函數(shù)將用來被調(diào)用來處理這個模板字符串.
標簽?zāi)０迨呛瘮?shù)調(diào)用的一種特殊形式.''標簽''指的就是函數(shù),緊跟在后面的模板字符串就是它的參數(shù),但是如果模板字符里面有變量,就不是簡單的調(diào)用了,而是會將模板字符串先處理成多個參數(shù),再調(diào)用函數(shù).

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

tag函數(shù)第一個參數(shù)是一個數(shù)組,該數(shù)組的成員是模板字符串中那些沒有變量替換的部分,變量替換只發(fā)生在數(shù)組成員之間;其他參數(shù),都是模板字符串各個變量被替換后的值.
"標簽?zāi)０?一個重要應(yīng)用就是過濾HTML字符串,防止用戶輸入惡意內(nèi)容.

String.raw()

用來充當模板字符串的處理函數(shù),返回一個斜杠都被轉(zhuǎn)義的字符串,對應(yīng)替換變量后的模板字符串.
如果原字符串的斜杠已經(jīng)轉(zhuǎn)義,那么String.raw會進行再次轉(zhuǎn)義
String.raw可以作為正常的函數(shù)使用.這時它的第一個參數(shù)應(yīng)該是一個具有raw屬性的對象,且raw屬性的值應(yīng)該是一個數(shù)組

String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'

// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

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

ES5中,RegExp構(gòu)造函數(shù)的參數(shù)有兩種情況:

參數(shù)是字符串,這時第二個參數(shù)表示正則表達式的修飾符
參數(shù)是一個正則表達式,但是ES5這種情況不允許使用第二個參數(shù)添加修飾符;ES6改變了這種行為.而且,返回的正則表達式會忽略原有的正則表達式的修飾符,只使用新指定的修飾符

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

字符串的正則方法

字符串對象共有4個方法,可以使用正則表達式:match,replace,search,split

數(shù)值的拓展

二進制和八進制數(shù)值的新的寫法,分別用前綴0b(或0B)和0o(或0O)表示,如果要將0b和0o前綴的字符串數(shù)值轉(zhuǎn)為十進制,要使用Number方法

Number新增的方法

Number.isFinite(),Number.isNaN()

與傳統(tǒng)方法isFinite(),isNaN()區(qū)別在于傳統(tǒng)方法先調(diào)用Number()將非數(shù)值的值轉(zhuǎn)化為數(shù)值

Number.parseInt(),Number.parseFloat()

將全局方法移植到Number對象上,模塊化

Number.isInterger()

Number.EPSILON

新增一個極小的常量.根據(jù)規(guī)格,它表示1于大于1的最小浮點數(shù)之間的差.Number.EPSILON可以用來設(shè)置"能夠接受的誤差范圍"

安全整數(shù)和Number.isSafeInteger()

ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER這兩個常量致稀，用來表示這個范圍的上下限冈闭。
Number.isSafeInteger()則是用來判斷一個整數(shù)是否在這個范圍之內(nèi)

Math對象的拓展

Math.trunc()
去除一個數(shù)的小數(shù)部分
Math.sign()
判斷一個數(shù)到底是正數(shù),負數(shù)還是零

函數(shù)的拓展

函數(shù)參數(shù)的默認值

與解構(gòu)賦值默認值結(jié)合使用:
上面兩種寫法都對函數(shù)的參數(shù)設(shè)定了默認值，區(qū)別是寫法一函數(shù)參數(shù)的默認值是空對象抖单，但是設(shè)置了對象解構(gòu)賦值的默認值萎攒；寫法二函數(shù)參數(shù)的默認值是一個有具體屬性的對象遇八，但是沒有設(shè)置對象解構(gòu)賦值的默認值。

// 寫法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 寫法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

// 函數(shù)沒有參數(shù)的情況
m1() // [0, 0]
m2() // [0, 0]

// x 和 y 都有值的情況
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x 有值耍休，y 無值的情況
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x 和 y 都無值的情況
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

函數(shù)的length屬性

制定了默認值以后,函數(shù)的length屬性將返回沒有指定默認值的參數(shù)個數(shù).
length屬性的含義是,該函數(shù)預(yù)期傳入的參數(shù)個數(shù),如果設(shè)置了默認值的參數(shù)不是尾參數(shù),那么length屬性也不再計入后面的參數(shù)了

作用域

一旦設(shè)置了參數(shù)的默認值,函數(shù)進行聲明初始化時,參數(shù)會形成一個單獨的作用域.等到初始化結(jié)束,這個作用域就會消失.

應(yīng)用

利用參數(shù)默認值,可以指定某一個參數(shù)不得省略;另外,可以將參數(shù)默認值設(shè)為undefined,表明這個參數(shù)是可以省略的

rest參數(shù)

ES6引入rest參數(shù)(形式為...變量名),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用arguments對象了
rest參數(shù)是一個真正的數(shù)組,數(shù)組特有的方法都可以使用.注意:rest參數(shù)之后不能再有其他參數(shù);函數(shù)的length屬性,不包括rest參數(shù)

嚴格模式

ES2016規(guī)定只要函數(shù)參數(shù)使用了默認值,解構(gòu)賦值或者拓展運算符,那么函數(shù)內(nèi)部就不能顯式設(shè)定為嚴格模式
兩種方法可以規(guī)避:第一種是設(shè)定全局性的嚴格模式;第二種是把函數(shù)包裹在一個無參數(shù)的立即執(zhí)行函數(shù)里面

name屬性

如果將一個匿名函數(shù)賦值給一個變量刃永，ES5 的name屬性，會返回空字符串羊精，而 ES6 的name屬性會返回實際的函數(shù)名斯够。
Function構(gòu)造函數(shù)返回的函數(shù)實例，name屬性的值為anonymous园匹。
bind返回的函數(shù)雳刺，name屬性值會加上bound前綴。

箭頭函數(shù)

如果箭頭函數(shù)的代碼塊部分多余一條語句,就要使用大括號將它們括起來,并且使用return語句返回
由于大括號被解釋成代碼塊,所以如果箭頭函數(shù)直接返回一個對象,必須在對象外面加上括號,否則報錯

使用注意點:

函數(shù)體內(nèi)的this對象,就是定義時所在的對象,而不是使用時所在的對象
不可以當做構(gòu)造函數(shù)
不可以使用arguments對象,可以用rest參數(shù)來替代
不可以使用yield命令
this對象的指向是可變的,但是在箭頭函數(shù)中,它是固定的
this指向的固定化,實際原因是箭頭函數(shù)根本沒有自己的this,導致內(nèi)部的this就是外層代碼塊的this.正是因為它沒有this,所以不能用作構(gòu)造函數(shù)

雙冒號運算符

函數(shù)綁定運算符是并排的兩個冒號(::),雙冒號左邊是一個對象,右邊是一個函數(shù).改運算符會自動將左邊的對象,作為上下文環(huán)境(即this對象),綁定到右邊的函數(shù)上面
如果雙冒號左邊為空,右邊是一個對象的方法,則等于將該方法綁定在該對象上面

尾調(diào)用優(yōu)化

尾調(diào)用是函數(shù)式編程的一個重要概念,是指某個函數(shù)的最后一步是調(diào)用另一個函數(shù)(return一個函數(shù)的調(diào)用)
優(yōu)化:只保留內(nèi)層函數(shù)的調(diào)用幀.如果所有的函數(shù)都是尾調(diào)用,那么完全可以做到每次執(zhí)行時,調(diào)用幀只有一項,這將大大節(jié)省內(nèi)存.
"尾調(diào)用優(yōu)化"對遞歸操作意義重大
函數(shù)式編程有一個概念,叫做柯里化(currying),意思就是講多參數(shù)的函數(shù)轉(zhuǎn)換成單參數(shù)的形式
ES6的尾調(diào)用優(yōu)化只在嚴格模式下開啟,正常模式是無效的

數(shù)組的拓展

拓展運算符

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

應(yīng)用

復制數(shù)組

const a1 = [1, 2];
// 寫法一
const a2 = [...a1];
// 寫法二
const [...a2] = a1;

合并數(shù)組

// ES6的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

與解構(gòu)賦值結(jié)合
如果將拓展運算符用于數(shù)組賦值,只能放在參數(shù)的最后一位
字符串
可以將字符串轉(zhuǎn)為真正的數(shù)組
實現(xiàn)了Iterator接口的對象
任何 Iterator 接口的對象,都可以用擴展運算符轉(zhuǎn)為真正的數(shù)組裸违。
Map和Set結(jié)構(gòu),Generator函數(shù)
擴展運算符內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的 Iterator 接口，因此只要具有 Iterator 接口的對象本昏，都可以使用擴展運算符

新增方法

Array.from()
用于將兩類對象轉(zhuǎn)為真正的數(shù)組:類似數(shù)組的對象和可遍歷的對象(包括ES6新增的數(shù)據(jù)結(jié)構(gòu)Set和Map)
只要是部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu),Array.from都能將其轉(zhuǎn)為數(shù)組

注意區(qū)別:

擴展運算符背后調(diào)用的是遍歷器接口供汛，如果一個對象沒有部署這個接口,就無法轉(zhuǎn)換.Array.from方法還支持類似數(shù)組的對象.所謂類似數(shù)組的對象，本質(zhì)特征只有一點,即必須有l(wèi)ength屬性.因此,任何有l(wèi)ength屬性的對象涌穆，都可以通過Array.from方法轉(zhuǎn)為數(shù)組,而此時擴展運算符就無法轉(zhuǎn)換.

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]`

對于還沒有部署該方法的瀏覽器,可以用Array.prototype.slice方法替代.

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

Array.from還可以接受第二個參數(shù),用來對每個元素處理,將處理后的值放入返回的數(shù)組
如果map函數(shù)里面用到了this關(guān)鍵字,還可以傳入Array.from的第三個參數(shù),用來綁定this

Array.of()
Array.of()不存在由于參數(shù)個數(shù)不同而導致的重載
數(shù)組實例的copyWithin()
在當前數(shù)組內(nèi)部,將制定位置的成員復制到其它位置(會覆蓋原有成員),然后返回當前數(shù)組
數(shù)組實例的find()和findIndex()
用于找出第一個符合條件的數(shù)組成員,參數(shù)是一個回調(diào)函數(shù)
find方法找出第一個返回值為true的成員,然后返回該成員,如果沒有符合條件的成員,則返回undefined
find方法的回調(diào)函數(shù)可以接受三個參數(shù),依次為當前的值,當前的位置和原數(shù)組
findIndex方法返回第一個符合條件的數(shù)組成員的位置,如果都不符合,則返回-1
這兩個方法都可以接受第二個參數(shù),用來綁定回調(diào)函數(shù)的this對象
這兩個方法都可以發(fā)現(xiàn)NaN,彌補了數(shù)組的indexOf方法的不足

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

findIndex方法可以借助Object.is方法做到

數(shù)組實例的fill()
fill方法使用給定值,填充一個數(shù)組
fill方法還可以接受第二個和第三個參數(shù),用于指定填充的起始位置和結(jié)束位置
數(shù)組實例的entries(),keys(),values()
用于遍歷數(shù)組,都返回一個遍歷器對象
keys()是對鍵名的遍歷,values()是對鍵值的遍歷,entries()是對鍵值對的遍歷
數(shù)組實例的includes()
Array.prototype.includes方法返回一個布爾值,表示某個數(shù)組是否包含給定的值,與字符串的includes方法類似
第二個參數(shù)表示搜索的起始位置,如果第二個參數(shù)為負數(shù),則表示倒數(shù)的位置(比如第二個參數(shù)為-4,但數(shù)組長度為3),如果這時大于數(shù)組長度,則會重置為從0開始
數(shù)組的空位
空位不是undefined,一個位置的值等于undefined,依然是有值的.空位是沒有任何值,in運算符可以說明這一點
ES5對空位的處理,大多數(shù)情況下回忽略空位
ES6則是明確的將空位轉(zhuǎn)為undefined

對象的拓展

屬性的簡介表示法

ES6允許直接寫入變量和函數(shù),作為對象的屬性和方法

屬性名表達式

屬性名表達式與簡潔表達式不能同時使用
屬性名表達式入股歐式一個對象,默認情況下會自動將對象轉(zhuǎn)為字符串[object Object],這一點要特別小心

方法的name屬性

函數(shù)的name屬性,返回函數(shù)名,;對象方法也是函數(shù),因此也有name屬性
如果對象的方法使用了取值函數(shù)getter和存執(zhí)函數(shù)setter,則name屬性不是在該方法上面,而是該方法的屬性的描述對象的get和set屬性上面,返回值是方法名加上get和set
有兩種特殊情況:
bind方法創(chuàng)造的函數(shù),name屬性返回bound加上原函數(shù)的名字;
Function構(gòu)造函數(shù)創(chuàng)造的函數(shù),name屬性返回anonymous
如果對象的方法是一個Symbol值,那么name屬性返回的是這個Symbol值的描述

Object.is()

ES6提出"Same-value equality"(同值相等)算法,Object.is就是部署這個算法的新方法
與嚴格比較運算符(===)的行為基本一致,不同之處只有兩處:

+0不等于-0

2.NaN等于自身

Object.assgin()

用于對象的合并,將源對象的所有可枚舉屬性,復制到目標對象
Object.assgin方法的第一個參數(shù)是目標對象,后面的參數(shù)都是源對象
由于undefined和null無法轉(zhuǎn)成對象,所以如果它們作為參數(shù)就會報錯;但是非對象參數(shù)出現(xiàn)在源對象的位置(非首參),首先,這些參數(shù)都會轉(zhuǎn)成對象,如果無法轉(zhuǎn)成對象,就會跳過.
其它類型值(數(shù)值,字符串和布爾值)不在首參數(shù),除了字符串會以數(shù)組形式拷貝目標對象,其他值都不會產(chǎn)生效果
Object.assgin拷貝的屬性是有限制的,只拷貝源對象的自身屬性(不拷貝繼承屬性),也不拷貝不可枚舉的屬性

注意點:

1. 淺拷貝

2. 同名屬性的替換

3. 數(shù)組的處理
`Object.assgin`把數(shù)組視為屬性名為0,1,2的對象

4. 取值函數(shù)的處理
`Object.assgin`只能進行值的復制,如果復制的值是一個取值函數(shù),那么將求值后再復制

屬性的可枚舉性和遍歷

可枚舉性

對象的每個屬性都有一個描述對象(Descriptor),用來描述該屬性的行為.Object.getOwnPropertyDescriptor方法可以獲取該屬性的描述對象
描述對象的enumerable屬性,稱為"可枚舉性",如果該屬性為false,就表示某些操作會忽略當前屬性
目前,有四個操作會忽略enumerable為false的屬性:

for...in循環(huán)
Object.keys() 返回對象自身的所有的可枚舉的屬性的鍵名
JSON.stringify只串行對象自身的可枚舉的屬性
Object.assgin()

實際上,引入"可枚舉"這個概念的最初目的,就是讓某些屬性可以對比掉for...in操作,不然所有的內(nèi)部屬性和方法都會被遍歷到
另外,ES6規(guī)定,所有Class的原型的方法都是不可枚舉的

屬性的遍歷

for...in
對象自身的和繼承的可枚舉屬性(不含Symbol屬性)
Object.keys(obj)
返回一個數(shù)組,包括對象自身(不含繼承的)所有可枚舉屬性(不含Symbol屬性)的鍵名
Object.getOwnPropertyNames(obj)
返回一個數(shù)組,包含對象自身的所有屬性(不含Symbol屬性,但是包括不可枚舉屬性)的鍵名
4.Object.getOwnPropertySymbols(obj)
返回一個數(shù)組,包含對象自身的所有Symbol屬性的鍵名
Reflect.ownKeys(obj)
返回一個數(shù)組,包含對象自身的所有鍵名,不管鍵名是Symbol或字符串,也不管是都可枚舉

以上五種遍歷對象的鍵名,都遵守同樣的屬性比那里的次序規(guī)則:

首先遍歷所有數(shù)值鍵,按照數(shù)值升序排列
其次遍歷所有字符串鍵,按照加入時間升序排列
最后遍歷所有Symbol鍵,按照加入時間升序排列

Object.getOwnPropertyDescriptors()

注意區(qū)別Object.getOwnPropertyDescriptor方法返回某個對象屬性的描述對象.ES2017引入Object.getOwnPropertyDescriptors方法,返回指定對象所有自身屬性(非繼承屬性)的描述對象
該方法的引入目的,主要是為了解決Object.assgin()無法正確拷貝get屬性和set屬性的問題
Object.getOwnPropertyDescriptors方法的另外一個用處,就是配合Object.create方法,將對象屬性克隆到一個新對象中

proto,Object.setPropotypeOf(),Object.getPrototypeOf()

__proto__用來讀取和設(shè)置當前對象的prototype對象.不過無論從語義的角度還是從兼容性的角度都不要使用這個屬性,實現(xiàn)上,__proto__調(diào)用的是Object.prototype.__proto__
Object.setPropotypeOf()方法的作用與proto相同,用來設(shè)置一個對象的prototype對象,返回參數(shù)對象本身.
Object.getPrototypeOf()用于讀取一個對象的原型對象

super關(guān)鍵字

this關(guān)鍵字總是指向函數(shù)所在的當前對象,ES6新增另一個類似的關(guān)鍵字super,指向當前對象的原型的對象.
注意:super關(guān)鍵字表示原型對象時,只能用在對象的方法之中.目前,只有對象方法的簡寫方式可以讓JavaScript引擎確認,定義的是對象的方法.
JavaScript引擎內(nèi)部,super.foo等同于Object.getPrototypeOf(this).foo(屬性)或Object.getPrototypeOf(this).foo.call(this)(方法)

Object.keys(),Object.values(),Object.entries()

返回的數(shù)組中都是參數(shù)對象自身的(不含繼承的)所有可遍歷的屬性
Object.create方法的第一個參數(shù)是新創(chuàng)建對象的原型對象,第二個參數(shù)添加的對象屬性,如果不顯示聲明,默認是不可遍歷的
Object.entries基本用途是遍歷對象的屬性,另一個用處是將對象轉(zhuǎn)為真正的Map結(jié)構(gòu)

對象的拓展運算符

解構(gòu)賦值
解構(gòu)賦值要求等號右邊是一個對象,如果等號右邊是undefined或null,會報錯
解構(gòu)賦值必須是最后一個參數(shù)
解構(gòu)賦值的拷貝是淺拷貝
另外,拓展運算符的解構(gòu)賦值,不能復制繼承自原型對象的屬性
跟數(shù)組的拓展運算符一樣,對象的拓展運算符后面可以跟表達式
拓展運算符的參數(shù)對象之中,如果有取值函數(shù)get,這個函數(shù)會被執(zhí)行

數(shù)據(jù)類型的拓展

字符串的拓展

字符串的遍歷器接口

includes(),startsWith(),endsWith()

repeat()

padStart(),padEnd()

模板字符串

String.raw()

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

字符串的正則方法

數(shù)值的拓展

Number新增的方法

Number.isFinite(),Number.isNaN()

Number.parseInt(),Number.parseFloat()

Number.isInterger()

Number.EPSILON

安全整數(shù)和Number.isSafeInteger()

Math對象的拓展

函數(shù)的拓展

函數(shù)參數(shù)的默認值

函數(shù)的length屬性

作用域

應(yīng)用

rest參數(shù)

嚴格模式

name屬性

箭頭函數(shù)

使用注意點:

雙冒號運算符

尾調(diào)用優(yōu)化

數(shù)組的拓展

拓展運算符

應(yīng)用

新增方法

注意區(qū)別:

對象的拓展

屬性的簡介表示法

屬性名表達式

方法的name屬性

Object.is()

Object.assgin()

注意點:

屬性的可枚舉性和遍歷

可枚舉性

屬性的遍歷

Object.getOwnPropertyDescriptors()

proto,Object.setPropotypeOf(),Object.getPrototypeOf()

super關(guān)鍵字

Object.keys(),Object.values(),Object.entries()

對象的拓展運算符