ES6快速上手 —— API

Zwe1發表於2018-04-03
API

前言

ES6新增了大量的api用於處理字串，陣列和物件等資料，本篇將對一些便利的api進行介紹。

字串api

當我們需要檢視一個字串中是否包含另一個子串時，常使用indexOf方法。ES6又新增了幾個新方法。

includes

let str = 'hello world!';

str.includes('w');  //true
str.includes('ein');  //false
複製程式碼

檢驗一個字串中是否包含一個子串，返回Bool值。

startsWith

str.startsWith('hel');  //true
str.startsWith('whel');  //false
複製程式碼

檢測一個字串是否以特定子串開始，返回Bool值。

endsWith

str.endsWith('world!');  //true
str.endsWith('world');  //false
複製程式碼

檢測一個字串是否以特定子串結束，返回Bool值

  • 這三個方法都接收第二個引數，表示開始比對的位置。endsWith例外，endsWith中第二個引數，表示對前n個字元進行檢測。
str.includes('hello', 6);  //false
str.startsWith('hello', 6);  //false
str.endsWith('hello', 5);  //true
複製程式碼

padStart

'ein'.padStart(5, 'my');  //'myein'
'ein'.padStart(10, 'my');  //'mymymymein'

'ein'.padStart(2, 'my');  //'ein'
'ein'.padStart(5, 'my dear ');  //'myein'
'ein'.padStatr(5);  //'  ein'
複製程式碼
  • padStart()用於字串頭部補全，接收兩個引數，第一個參數列示字串最小長度，第二個參數列示補全的字串。
  • 如果原字串長度等於或大於指定的最小長度（第一個引數），則返回字串。
  • 如果用於補全的字串和原字串長度超過了指定的最小長度（第一個引數），則會擷取補全字串。
  • 如果省去第二個引數，則使用空格進行補全。

padEnd

'ein'.padEnd(5, 'zwei');  //'einzw'
'ein'.padEnd(5);  //'ein  '
'ein'.padEnd(2, 'zwei');  //'ein'
複製程式碼
  • padEnd()用於字串尾部補全，接收兩個引數，第一個參數列示字串最小長度，第二個參數列示補全的字串。
  • 如果原字串長度等於或大於指定的最小長度（第一個引數），則返回字串。
  • 如果用於補全的字串和原字串長度超過了指定的最小長度（第一個引數），則會擷取補全字串。
  • 如果省去第二個引數，則使用空格進行補全。

數值api

ES6將一些全域性方法(window物件的方法)，移植到了Number物件上面。如parseInt()和parseFloat()，但使用方法還是完全不變。

Number.isInteger

Number.isInteger(25);  //true
Number.isInteger(3.14);  //false
Number.isInteger(-3);  //true

Number.isInteger('15');  //false
Number.isInteger(3.0000000000000000000000000001);  //true
複製程式碼
  • Number.isInteger用來判斷一個數值是否為整數。
  • 非數值型別，直接返回false,即isInteger不會對引數進行型別轉換。
  • 如果數值超過javascript的數值範圍，判斷結果可能會出錯。

Math擴充套件

ES6在Math上進行了擴充套件，新增了17個方法。這裡例舉幾個可能會使用到的方法。

  • Math.log10( )
Math.log10(1);  //0
Math.log10(100);  //2
複製程式碼
  • Math.log2( )
Math.log2(2);  //1
Math.log2(0.5);  //-1
複製程式碼

指數運算子（非api）

2**2  //4
2**3  //8
複製程式碼

陣列api

Array.from

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

// ES5的寫法
var arr1 = [].slice.call(arrayLike);  // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike);   // ['a', 'b', 'c']
複製程式碼

Array.from可以將類陣列物件和可遍歷物件轉換為陣列（Set和Map）。

Array.of

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
複製程式碼

Array.of方法用於將一組值轉換為陣列，引數僅當陣列成員處理，不會造成如Array( )所產生的歧義。

fill方法

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

new Array(3).fill(7);
// [7, 7, 7]

new Array(3).fill(7, 1, 2);
// [1, 7, 2]
複製程式碼

fill方法應用在陣列例項上，該方法註冊在Array建構函式的原型物件上。用於使用給定值填充陣列。fill方法還接收第二和第三個引數，用於指定填充的起始位置和結束位置。

let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]
複製程式碼

如果填充值是一個物件，填充的值將引用這個物件，也就是說，如果修改陣列的內容，相應的會修改填充物件，每個陣列元素值都會被修改。

entries() | keys() | values()

ES6提供了三個新方法用於遍歷陣列。entries( )遍歷陣列的鍵值對，keys( )遍歷陣列的鍵，values( )遍歷陣列的值。

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"
複製程式碼

includes

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

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1);  // true
複製程式碼

Array.prototype.includes方法返回一個布林值，表示某個陣列是否包含給定的值，與字串的includes方法類似。該方法的第二個參數列示搜尋的起始位置，如果第二個引數為負數，則表示倒數的位置。

物件api

Object.assign

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

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

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

Object.assign( )方法用於物件合併，可以接收多個引數，第一個引數是合併的目標物件，後續物件引數都將合併到第一個物件中。 **注意：**assign方法在合併時，同名熟悉會進行覆蓋，後面的同名屬性會覆蓋前面的屬性。

應用場景：

Object.assign( )方法可以用於物件拷貝，但只進行淺拷貝，即僅對物件的第一級進行復制拷貝，深層次還是進行引用。

const b = {b: 1};
const obj1 = {a: b};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b  // 2
b.b = 1;

obj1.a.b  //1
obj2.a.b  //1
複製程式碼

entries() | keys() | values()

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj);
//  ["foo", "baz"]

Object.values(obj);
//  ['bar', 42]

Object.entries(obj);
//  [['foo','bar'], ['baz', 42]]
複製程式碼

物件同樣支援通過entries， keys， values等方法來獲取物件的鍵，值和鍵值對，並將其儲存在一個陣列中。鍵值對以二維陣列的方式進行儲存。

for...of

Iterator意為遍歷器，ES6提供了for...of作為Javascript中所有遍歷器介面的遍歷方法。如此，我們可以用統一的方法來遍歷這些資料結構。

陣列

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"
複製程式碼

物件

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}
複製程式碼

相關文章