ES6學習筆記(一)

‘變量’聲明

ES6新增兩個聲明’變量’的關鍵字,let和const命令.

l  let用來聲明局部變量

同ES5中var聲明的變量不一樣的是,let聲明的變量的做用域範圍僅僅是從其聲明的地方開始,到其所在的代碼塊結束.而且不會像var聲明的變量那樣存在變量提高效果,而且不能被重複聲明.

這樣的話就必需要確保用let聲明的變量要在使用以前完成聲明,不然會報錯,因此好的變成習慣應該是在代碼的開頭完成全部變量的聲明.

l  Const用來聲明一個常量

用const聲明的常量在完成聲明後不可更改,所以其聲明和賦值應一次完成.除此以外,const的表現基本同let聲明的變量同樣

變量的解構賦值

變量的結構賦值能夠簡單的理解成是一個從對象中快速拷貝引用來聲明變量的語法糖,主要能夠從數組(對象)中依次拷貝屬性.具體格式以下圖:

 

 

說明:

1. 從對象中拷貝時,默認是從同名屬性中拷貝,若是沒有同名屬性,可使用映射來完成;
2. 變量的結構賦值是一個變量聲明+賦值的過程,同名的let/const會報錯;

字符串相關

JavaScript內部，字符以UTF-16的格式儲存，每一個字符固定爲2個字節。對於那些須要4個字節儲存的字符（Unicode碼點大於0xFFFF的字符），JavaScript會認爲它們是兩個字符。對於兩個字節的字符,咱們可使用String.charCodeAt和String.fromCharCode方法來編碼解碼,對於佔四個字節的字符,ES6爲咱們提供了codePointAt和String.fromCodePoint來編碼和解碼

l  方法說明

charAt方法能夠識別佔兩個字節的字符的位置,新版中有at()方法來獲取四個字節發字符的位置(不必定普遍使用,須要墊片庫)

傳統上，JavaScript只有indexOf方法，能夠用來肯定一個字符串是否包含在另外一個字符串中。ES6又提供了三種新方法。

includes()：返回布爾值，表示是否找到了參數字符串。

startsWith()：返回布爾值，表示參數字符串是否在源字符串的頭部。

endsWith()：返回布爾值，表示參數字符串是否在源字符串的尾部。

這三個方法都支持第二個參數，表示開始搜索的位置。

repeat方法返回一個新字符串，表示將原字符串重複n次。參數若是是小數，會被取整。若是repeat的參數是負數或者Infinity，會報錯。

l  模板字符串

模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。若是使用模板字符串表示多行字符串，全部的空格和縮進都會被保留在輸出之中.模板字符串中嵌入變量，須要將變量名寫在${}之中。

 

數值相關

ES6在Math對象上新增了17個與數學相關的方法。全部這些方法都是靜態方法，只能在Math對象上調用。

l  Math.trunc()

Math.trunc方法用於去除一個數的小數部分，返回整數部分。

l  Math.sign()

Math.sign方法用來判斷一個數究竟是正數、負數、仍是零。

它會返回五種值。

參數爲正數，返回+1；

參數爲負數，返回-1；

參數爲0，返回0；

參數爲-0，返回-0;

其餘值，返回NaN。

l  Math.cbrt()

Math.cbrt方法用於計算一個數的立方根。

l  Math.hypot()

Math.hypot方法返回全部參數的平方和的平方根。

ES6新增了6個三角函數方法。

Math.sinh(x) 返回x的雙曲正弦（hyperbolic sine）

Math.cosh(x) 返回x的雙曲餘弦（hyperbolic cosine）

Math.tanh(x) 返回x的雙曲正切（hyperbolic tangent）

Math.asinh(x) 返回x的反雙曲正弦（inverse hyperbolic sine）

Math.acosh(x) 返回x的反雙曲餘弦（inverse hyperbolic cosine）

Math.atanh(x) 返回x的反雙曲正切（inverse hyperbolic tangent）

 

數組

數組靜態方法

l  Array.from()

Array.from方法用於將兩類對象轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括ES6新增的數據結構Set和Map）。

l  Array.of()

Array.of方法用於將一組值，轉換爲數組。

數組實例方法

l  數組實例的copyWithin()

數組實例的copyWithin方法，在當前數組內部，將指定位置的成員複製到其餘位置（會覆蓋原有成員），而後返回當前數組。也就是說，使用這個方法，會修改當前數組

它接受三個參數。

target（必需）：從該位置開始替換數據。

start（可選）：從該位置開始讀取數據，默認爲0。若是爲負值，表示倒數。

end（可選）：到該位置前中止讀取數據，默認等於數組長度。若是爲負值，表示倒數。

這三個參數都應該是數值，若是不是，會自動轉爲數值。

l  數組實例的find()和findIndex()

數組實例的find方法，用於找出第一個符合條件的數組成員。它的參數是一個回調函數，全部數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，而後返回該成員。若是沒有符合條件的成員，則返回undefined。

l  數組實例的fill()

fill方法使用給定值，填充一個數組。fill方法用於空數組的初始化很是方便。數組中已有的元素，會被所有抹去。

fill方法還能夠接受第二個和第三個參數，用於指定填充的起始位置和結束位置。

l  數組實例的entries()，keys()和values()

ES6提供三個新的方法——entries()，keys()和values()——用於遍歷數組。它們都返回一個遍歷器對象（詳見《Iterator》一章），能夠用for...of循環進行遍歷，惟一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

l  數組實例的includes()

Array.prototype.includes方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法相似。該方法屬於ES7，但Babel轉碼器已經支持。該方法的第二個參數表示搜索的起始位置，默認爲0。若是第二個參數爲負數，則表示倒數的位置，若是這時它大於數組長度（好比第二個參數爲-4，但數組長度爲3），則會重置爲從0開始。

另外，Map和Set數據結構有一個has方法，須要注意與includes區分。

Map結構的has方法，是用來查找鍵名的，好比Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。

Set結構的has方法，是用來查找值的，好比Set.prototype.has(value)、WeakSet.prototype.has(value)。

 

 

函數

ES6中能夠在定義函數時直接指定其默認值,也能夠和函數的結構賦值結合使用,這樣能夠清晰明瞭的知道函數哪些參數是必須的,須要注意的是,定義了默認值的參數,應該放在參數序列的後面,這樣能夠明顯看出來省略了哪些參數,也會爲方法調用提供便利.

指定了函數參數的默認值後,函數的length屬性返回的是沒有默認值的參數個數,所以該屬性不在可能會有誤解,須要注意

l  Rest參數

Rest,顧名思義,就是其它,剩下的意思,放在他能夠經過」…參數名」的形式來做爲函數的一個參數,表示多餘的參數,該參數是一個數組,會把多餘的參數都放入數組中,若是函數只有一個rest參數,這該rest參數能夠替代arguments對象

[注意]:rest參數必須是函數的最後一個參數,不然會報錯;函數的length屬性,不包含rest參數.

l  擴展運算符

擴展運算符（spread）是三個點（...）。它比如rest參數的逆運算，將一個數組轉爲用逗號分隔的參數序列。該運算符主要用於函數調用。

對象

l  Object.is()

 

ES6提出「Same-value equality」（同值相等）算法，用來解決這個問題。Object.is就是部署這個算法的新方法。它用來比較兩個值是否嚴格相等，與嚴格比較運算符（===）的行爲基本一致。不一樣之處只有兩個：一是+0不等於-0，二是NaN等於自身。

l  Object.assign()

Object.assign方法用於對象的合併，將源對象（source）的全部可枚舉屬性，複製到目標對象（target）。Object.assign方法的第一個參數是目標對象，後面的參數都是源對象。

[注意點]Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，若是源對象某個屬性的值是對象，那麼目標對象拷貝獲得的是這個對象的引用。

l  屬性的可枚舉性

對象的每一個屬性都有一個描述對象（Descriptor），用來控制該屬性的行爲。Object.getOwnPropertyDescriptor方法能夠獲取該屬性的描述對象。

描述對象的enumerable屬性，稱爲」可枚舉性「，若是該屬性爲false，就表示某些操做會忽略當前屬性。

ES5有三個操做會忽略enumerable爲false的屬性。

for...in循環：只遍歷對象自身的和繼承的可枚舉的屬性

Object.keys()：返回對象自身的全部可枚舉的屬性的鍵名

JSON.stringify()：只串行化對象自身的可枚舉的屬性

ES6新增了一個操做Object.assign()，會忽略enumerable爲false的屬性，只拷貝對象自身的可枚舉的屬性。

這四個操做之中，只有for...in會返回繼承的屬性。實際上，引入enumerable的最初目的，就是讓某些屬性能夠規避掉for...in操做。好比，對象原型的toString方法，以及數組的length屬性，就經過這種手段，不會被for...in遍歷到。

l  屬性的遍歷

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

（1）for...in

for...in循環遍歷對象自身的和繼承的可枚舉屬性（不含Symbol屬性）。

（2）Object.keys(obj)

Object.keys返回一個數組，包括對象自身的（不含繼承的）全部可枚舉屬性（不含Symbol屬性）。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個數組，包含對象自身的全部屬性（不含Symbol屬性，可是包括不可枚舉屬性）。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個數組，包含對象自身的全部Symbol屬性。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一個數組，包含對象自身的全部屬性，不論是屬性名是Symbol或字符串，也不論是否可枚舉。

以上的5種方法遍歷對象的屬性，都遵照一樣的屬性遍歷的次序規則。

首先遍歷全部屬性名爲數值的屬性，按照數字排序。

其次遍歷全部屬性名爲字符串的屬性，按照生成時間排序。

最後遍歷全部屬性名爲Symbol值的屬性，按照生成時間排序。

l  原型相關

（1）__proto__屬性

__proto__屬性（先後各兩個下劃線），用來讀取或設置當前對象的prototype對象。目前，全部瀏覽器（包括IE11）都部署了這個屬性。在實現上，__proto__調用的是Object.prototype.__proto__

（2）Object.setPrototypeOf()

Object.setPrototypeOf方法的做用與__proto__相同，用來設置一個對象的prototype對象。它是ES6正式推薦的設置原型對象的方法。

（3）Object.getPrototypeOf()

該方法與setPrototypeOf方法配套，用於讀取一個對象的prototype對象。

l  對象枚舉(遍歷)

（1）Object.keys()

ES5 引入了Object.keys方法，返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵名。

（2）Object.values()

Object.values方法返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵值。

（3）Object.entries 

Object.entries方法返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵值對數組。