ES6學習筆記二：各類擴展

轉載請註明原文地址：http://www.cnblogs.com/ygj0930/p/7242967.html

 

一：字符串擴展

1:字符串遍歷器

for (let char of str) {
  //
}

這個遍歷器最大的優勢是能夠識別大於0xFFFF的碼點，傳統的for循環沒法識別這樣的碼點。

 

2:肯定一個字符串是否包含在另外一個字符串中

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

 

3:字符串重複n次

str.repeat(n) //strstrstr...重複n次

若是repeat的參數是負數或者Infinity，會報錯。

 

4:字符串補全到所需長度

padStart(n，sub)用於頭部補全，padEnd(n,sub)用於尾部補全。

用sub把字符串在頭／尾補全到n長度。

若是原字符串的長度，等於或大於指定的最小長度，則返回原字符串。

若是省略第二個參數，默認使用空格補全長度。

 

5:模版字符串

在js代碼中，能夠用 反引號  定義模版字符串，模版字符串中可使用 ${變量、調用函數、js表達式} 來插入值。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${fn()}</em>
  are on sale!
`);

 

6:標籤模版

是一種特殊的函數調用形式：模版字符串跟在一個函數名後面，「標籤」指的就是函數，緊跟在後面的模板字符串就是函數的參數。

若是模板字符裏面有變量，就不是簡單的調用了，而是會將模板字符串先處理成多個參數，再調用函數。

var a = 5;
var b = 10;

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

 

7:raw()

String.raw方法，用來充當模板字符串的處理函數，對模版字符串中每個斜槓都轉義（即斜槓前面再加一個斜槓），而後返回替換原模板字符串。

String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"

若是原字符串的斜槓已經轉義（即：已經有\轉義），那麼String.raw不會作任何處理。

 

二：正則的擴展

1:正則表達式的建立：第一個參數是模式字符串，這時第二個參數表示正則表達式的修飾符（flag）。

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

修飾符：
g：全局修飾符

u:unicode修飾符

y修飾符，叫作「粘連」（sticky）修飾符：後一次匹配都從上一次匹配成功的下一個位置開始，y修飾符確保匹配必須從剩餘的第一個位置開始，這也就是「粘連」的涵義。

s修飾符：dotall模式，使得 . 能夠匹配包括行終止符在內的一切內容。

2:字符串對象共有4個方法，可使用正則表達式：match()、replace()、search()和split()。

 

3：返回修飾符

新增了flags屬性，會返回正則表達式的修飾符。

/abc/ig.source
// "abc"

// 返回正則表達式的修飾符
/abc/ig.flags
// 'gi'

 

三：Number的擴展

1:二進制和八進制表示法：

 分別用前綴0b（或0B）和0o（或0O）跟數字 來表示二進制和八進制數據。

0b111110111 == 503
0o767 == 503

若是要將0b和0o前綴的字符串數值轉爲十進制，要使用Number方法：

Number('0b111')  // 7

2:檢查數據是否有效、是否非數

Number.isFinite(number)用來檢查一個數值是否爲有限的（finite）。

Number.isNaN(number)用來檢查一個值是否爲NaN。

3:字符串數字轉化爲數字

Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

4:Number.isInteger()用來判斷一個值是否爲整數。

5:極小值

新增一個極小的常量Number.EPSILON。

引入一個這麼小的量的目的，在於爲浮點數計算，設置一個偏差範圍，若是這個偏差可以小於Number.EPSILON，咱們就能夠認爲獲得了正確結果。

 6:整數範圍

JavaScript可以準確表示的整數範圍在-2^53到2^53之間（不含兩個端點）。

ES6引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER這兩個常量，用來表示這個範圍的上下限。

Number.isSafeInteger(number)則是用來判斷一個整數是否落在這個範圍以內。

7:Math新增方法

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

1）取小數的整數部分

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

2）判斷正負

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

它會返回五種值。

• 參數爲正數，返回+1；
• 參數爲負數，返回-1；
• 參數爲0，返回0；
• 參數爲-0，返回-0;
• 其餘值，返回NaN。

3）立方根

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

4）求參數平方和的平方根

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

5）Math.log10(x)返回以10爲底的x的對數。若是x小於0，則返回NaN。

6）Math.log2(x)返回以2爲底的x的對數。若是x小於0，則返回NaN。

7）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）

8）指數運算符（**）：a**b=a的b次冪

 

四：函數擴展

1）函數在定義時，能夠爲參數指定默認值（同python同樣，默認值參數要放在參數列表後面部分）

2）調用函數時，能夠經過解構賦值來傳參

3）多餘參數：

ES6 引入 rest 參數（形式爲...變量名），用於獲取函數的多餘參數。

rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

rest 參數以後不能再有其餘參數（即只能是最後一個參數），不然會報錯。

4）箭頭函數：參數=>函數體

簡單的箭頭函數：var f=(參數)=>返回值

var sum = (num1, num2) => num1 + num2;

複雜的箭頭函數：函數體多於一個語句，則用{}括起來，用return返回結果

var sum = (num1, num2) => { ......;return num1 + num2; }

箭頭函數使得表達更加簡潔。

5)尾調用優化

尾調用（Tail Call）是函數式編程的一個重要概念，指某個函數的最後一步是調用另外一個函數。【最後一步不等於最後一條語句，而是在return語句的最末尾處】

尾調用因爲是函數的最後一步操做，因此不須要保留外層函數的調用幀，由於調用位置、內部變量等信息都不會再用到了，因此能夠刪除外部函數調用幀，只保留內層尾調用的函數幀便可。

這就叫作「尾調用優化」（Tail call optimization），即只保留內層函數的調用幀。若是全部函數都是尾調用，那麼徹底能夠作到每次執行時，調用幀只有一項，這將大大節省內存。這就是「尾調用優化」的意義。

6）尾遞歸：優化遞歸溢出的方法

函數調用自身，稱爲遞歸。若是尾調用自身，就稱爲尾遞歸。

遞歸很是耗費內存，由於須要同時保存成千上百個調用幀，很容易發生「棧溢出」錯誤（stack overflow）。但對於尾遞歸來講，因爲只存在一個調用幀，因此永遠不會發生「棧溢出」錯誤。

尾遞歸的實現，每每須要改寫遞歸函數，確保最後一步只調用自身。作到這一點的方法，就是把全部用到的內部變量改寫成函數的參數。 

函數式編程有一個概念，叫作柯里化（currying），意思是將多參數的函數轉換成單參數的形式：

function currying(fn, n) {//定義currying函數：在函數內部調用參數函數
  return function (m) {
    return fn.call(this, m, n);
  };
}

function tailFactorial(n, total) {
  if (n === 1) return total;
  return tailFactorial(n - 1, n * total);
}

const factorial = currying(tailFactorial, 1);

7）尾遞歸優化：把遞歸轉化爲循環

function tco(f) {
  var value;
  var active = false;
  var accumulated = [];

  return function accumulator() {
    accumulated.push(arguments);
    if (!active) {
      active = true;
      while (accumulated.length) {
        value = f.apply(this, accumulated.shift());
      }
      active = false;
      return value;
    }
  };
}

var sum = tco(function(x, y) {
  if (y > 0) {
    return sum(x + 1, y - 1)
  }
  else {
    return x
  }
});

sum(1, 100000)

tco函數是尾遞歸優化的實現，奧妙就在於狀態變量active。默認狀況下，這個變量是不激活的。一旦進入尾遞歸優化的過程，這個變量就激活了。而後，每一輪遞歸sum返回的都是undefined，因此就避免了遞歸執行；而accumulated數組存放每一輪sum執行的參數，老是有值的，這就保證了accumulator函數內部的while循環老是會執行。這樣就很巧妙地將「遞歸」改爲了「循環」，然後一輪的參數會取代前一輪的參數，保證了調用棧只有一層。

 

五：數組擴展

1）擴展運算符

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

function push(array, ...items) {
  array.push(...items);
}

function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f(...args);

擴展運算符的應用：

合併數組：

// ES6的合併數組
var combine=[...arr1, ...arr2, ...arr3]

把字符串轉化爲字符數組：

[...'hello']
// [ "h", "e", "l", "l", "o" ]

拆分任何可迭代對象成爲數組：

let arr = [...可迭代對象];

 

2）將對象轉爲數組

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

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

常見的相似數組的對象是DOM操做返回的NodeList集合，以及函數內部的arguments對象。Array.from均可以將它們轉爲真正的數組。

 

Array.from還能夠接受第二個參數（處理函數），做用相似於數組的map方法，用來對每一個元素進行處理，將處理後的值放入返回的數組。

Array.from(arrayLike, x => x * x);

 

3）將一組離散值轉化爲數組

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

Array.of(3, 11, 8)

 

4）數組對象的內部複製

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

Array.prototype.copyWithin(target, start = , end = )

它接受三個參數：

• target（必需）：從該位置開始替換數據。
• start（可選）：從該位置開始讀取數據，默認爲0。若是爲負值，表示倒數。
• end（可選）：到該位置前中止讀取數據，默認等於數組長度。若是爲負值，表示倒數。

// 將3號位複製到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

 

5）數組查找方法

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

[1, 4, -5, 10].find((n) => n < 0)

findIndex方法的用法與find方法很是相似，返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

 

6）數組填充

fill方法使用給定值，填充（覆蓋）一個數組。【至關於memset】

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

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

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

 

7)數組遍歷

entries()，keys()和values():返回一個遍歷器對象，能夠用for...of循環進行遍歷：

keys()是對鍵名(下標)的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

 

8)是否包含

includes方法返回一個布爾值，表示某個數組是否包含給定的值：

[1, 2, 3].includes(2)

第二個參數表示搜索的起始位置，默認爲0。若是第二個參數爲負數，則表示倒數的位置：

[1, 2, 3].includes(3, -1); // true

 

 

六：對象擴展

 1）屬性簡寫

ES6容許在對象之中，把外面定義的變量做爲本身的屬性：屬性名爲變量名, 屬性值爲變量的值。

var foo = 'bar';//定義變量
var baz = {foo};//把變量做爲對象屬性

2）方法簡寫

對象內定義方法，能夠不加function前綴：

var o = {
  method() {
    return "Hello!";
  }
};
// 等同於
var o = {
  method: function() {
    return "Hello!";
  }
};

3）屬性的getter和setter：用get、set聲明函數

const obj = {
  get foo() {},
  set foo(x) {}
};

4）對象的值相等比較

ES6提出「Same-value equality」（同值相等）算法，Object.is就是部署這個算法的新方法。它用來比較兩個值是否嚴格相等，與嚴格比較運算符（===）的行爲基本一致。

Object.is(obj1, obj2)

5)對象合併

Object.assign方法用於對象的合併，將源對象（source）的全部可枚舉屬性，複製到目標對象（target）。

第一個參數是目標對象，後面的參數都是源對象：

var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

若是目標對象與源對象有同名屬性，或多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性。

Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，若是源對象某個屬性的值是對象，那麼目標對象拷貝獲得的是這個對象的引用，這個對象的任何變化，都會反映到目標對象上面。

 6）對象屬性的遍歷

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 或字符串，也不論是否可枚舉。

7）Object.keys()，Object.values()，Object.entries()

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

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

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

8）對象的擴展運算符
擴展運算符  ...  不只能夠做用於數組，也能夠做用於對象。

對象的解構賦值：用於從一個對象取值，至關於將全部可遍歷的、但還沒有被讀取的屬性，分配到指定的對象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };