字符串擴展

Unicode相關補充

引入"\u{xx}"來表示碼點，之前只能表示\u0000-\uffff
引入String.fromCodePoint()能正確讀取大於uFFFF的unicode編碼
引入s.codePiointAt()用於讀取大於0xFFFF的字符的unicode編碼
例如let s = ‘??a‘讀取s的第一個字符

//繁瑣，繞，不推薦
s.codePoint(0).toString(16); //20bb7
String.fromCodePoint(0x2bb7)  //??

或者

for (let i of s) {
  console.log(i);
}

或者

Array.from(s)[0]

下面兩種都是利用字符串的可叠代；

es6補充的新方法：

includes()：返回布爾值，表示是否找到了參數字符串。
startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部

這個查找應該多用正則匹配較多，而且功能更強大

• 復制字符串

  引入了一個可copy字符串的功能s.repeat(n)返回新字符串，n會隱式轉換Number(n)小於0或者等於Infinity會報錯，等於NaN返回空串
  我覺得這樣可能會更好：s.concat(s.repeat(n))這樣不會返回空串

• 補全字符串
  有兩個方法s.padStart(num, s1)
  在頭部補充s1字符串來達到num的長度
  註意：當s.length > num時直接返回s不補全了；當s.length + s1.length < num那麽s1.repeat(n)直到>=,除去多余部分；當s.length + s1.length> num,直接加上s1去除多余部分；
  同理s.padEnd(num, s1)；從尾部添加

• 字符串中代入變量
  之前都是字符串拼接的方式實現變量與字符串的連接,

  ``` let s = 123; "java" + s + "script //可以用這個`java${s}script` ```

  這樣就很方便很強大

函數擴展

• 引入了函數默認值的概念
  默認值是變量，變量必須先聲明

  ``` function f(x = 123) { console.log(x) } f(); f(undefined); ```

  當實參為空或者undefined時才會采用默認值

• 默認值與參數解構的結合

  ``` function f1({x = 0, y = 0}) { console.log(x, y) } function f2({x, y} = {x:0, y:0}) { console.log(x, y) } function f3({x = 0, y = 0} = {x:0, y:0}) { console.log(x, y) } f1(); //報錯 f2(); //0 0 f3(); //0 0 f1({}); //0 0 f2({}); //undefined undefined f3({}); //0 0 ```

  理解這三個形式：f1只對x,y設置了默認值，並沒有對形參整體設置默認值；f2只對形參整體設置了默認值，並沒有對x,y分別設置默認值；f3則都對x,y設置了默認值以及形參整體設置默認值

• 擁有默認值時的length屬性
  length會等於至少需要n個參數就能允許函數不報錯；那麽length === n

  ``` (function (a = 0, b, c) {}).length // 0 (function (a, b = 1, c) {}).length // 1 ```
• 擁有默認值後的作用域變化
  函數一旦有默認值，我認為函數體內部會生成子作用域被參數作用域包裹，形成完成的函數作用域；

• rest參數
  就是利用...擴展功能倒過來取數組，其中包含了函數所有實參等價於Array.prototype.slice.apply(arguments, [n, m])

  ``` function f(a, ...args) { console.log(args) } f("a", 1, 2, 3); ```

  註意rest參數必須放最後

• 箭頭函數，值得註意的是this的執行，如果函數用箭頭函數書寫那麽，this指向決定於定於時；如果是普通function書寫，那麽this執行決定於執行時；

數組擴展

強大而又常用的數組來了

• ...擴展運算符，用於將具有Iterator接口的對象分解成參數序列；強大而又小巧的功能
  註意只能分解一層

  ``` let arr = [1, 2, [3, 4]] ...arr; // 1 2 [3, 4] ```

  應用有很多：數組合並[...[1, 2], 3];數組淺拷貝[...arr];rest參數應用；
  [...(new Array(2))]對於空位數組會將其轉化為undefined

• arr.flat(n)能解決分解一層的問題,返回新數組

  ``` ([1, 2, [3, 4]].flat(2)); //[1, 2, 3, 4] ```

  這是兩層的，那麽多層或不確定多層怎麽辦呢？用arr.flat(Infinity)統一解決
  [1,,3].flat()會跳過空格,輸出[1, 3]

• arr.flatMap()是只能分解一層，但是能傳入函數，功能類似數組的map，將數組成員代入函數返回相應的值組合成新數組返回[2, 3, 4].flatMap((x) => [x, x * 2]); //[2, 4, 3, 6, 4, 8]

  而flat(),flatMap()對於空位跳過，並不保留

  ``` [1,,3].flat(); //[1,3] [1,,3].flatMap(elem => elem); //[1,3] ```

• Array.from();該方法會將類數組對象和可遍歷對象，轉化為數組；它應該是...擴展運算符的升級版，把不具備Interator接口的類數組對象也能處理為數組；
  Array.from(new Array(2))對於空位數組會將其轉化為undefined
  並且Array.from() 也能接受第二個參數為函數，類似數組的map，經過函數處理後返回新數組

  ``` var arr = [1, 2]; var arr1 = Array.from(arr, (elem, index, arr) => elem * 2); ```

• Array.of()用於彌補Array(3)的不足，這個結果是length為3的空位數組，而Array.of(3)則會生成一個length為1，元素為3的數組[3]；
  可以用一個函數模擬：

  ``` function arryOf() { return [].slice.apply(arguments) } ```

• find()與findIndex()都是查找是否有符合要求的成員，前者返回第一個滿足條件的成員值；後者則返回該成員的索引值；

  ``` var a = [1, 2, 3, 4].find((elem, index, arr) => elem > 3); //4 var aIndex = [1, 2, 3, 4].findIndex((elem, index, arr) => elem > 3); //3 ```

  當查找對象為NaN時，NaN與NaN之間判斷會返回true，也就是會滿足要求
  find()和findIndex()會將空位處理成undefined。

  ``` // find() [,‘a‘].find(x => true) // undefined // findIndex() [,‘a‘].findIndex(x => true) // 0 ```
• 與find類似的還有一個arr.includes(elem, start)返回布爾值;[1, 2, NaN].includes(NaN; //true
• fill(target, start, end)用來填充數組，索引從start開始到end(不包括end)，的元素都替換為target；(new Array(3).fill(undefined))會改變原數組並返回

• Array.prototype.copyWithin(target, start = 0, end = this.length)(不包括end);該方法作用是將索引值為[start, end)的元素，去替換從索引值[target,target+end-start]的元素，整合的後的數組，長度超過原長度則去除多余部分，，改變原數組並返回

  ``` var arr = [1,1,3,3,4]; arr.copyWithin(2,0,5); //?[1, 1, 1, 1, 3] arr.copyWithin(4,0,5); //?[1, 1, 3, 3, 1] ```

數組中關於空位的處理

ES5 對空位的處理，已經很不一致了，大多數情況下會忽略空位。
forEach(), filter(), reduce(), every() 和some()都會跳過空位。
map()會跳過空位，但會保留這個值
join()和toString()會將空位視為undefined，而undefined和null會被處理成空字符串

// map方法
[,'a'].map(x => 1) // [,1]
// join方法
[,'a',undefined,null].join('#') // "#a##"
// toString方法
[,'a',undefined,null].toString() // ",a,,"

ES6大部分處理為undefined，例如：Array.from(),(...arr),entries()、keys()、values()、find()和findIndex()
for-of對於空數組遍歷會輸出undefined

let arr = new Array(3);   
for(let i of arr) {
  console.log(i);    
}                //undefined undefined undefined

應該至少是與叠代器相關的方法都會輸出undefined；而fill()與copyWithin()方法按空位正常處理，[,‘a‘,‘b‘,,].copyWithin(2,0) // [,"a",,"a"]

原文地址：https://segmentfault.com/a/1190000016888270

ECMAScript 6入門擴展筆記