es6中經常使用的字符串、數組、對象的擴展及應用

原文地址

若是感興趣能夠加QQ羣: 157937068, 一塊兒交流。

前言

目前前端開發流行框架，react,vue,angular以及微信小程序等等，都是對數據的操做，其實es6中對字符串、數組、對象的擴展，對於咱們更簡單的操做數據提供了方便。今天主要總結一下我項目中主要用到的es6對這些擴展的應用。固然，es6對函數的擴展及其餘應用也很重要，關於這些應用，請關注我後面的文章。

includes方法

在e6字符串和數組中，多了一個includes（）方法，這個方法我在項目中常常用到。

有人說includes（）方法徹底能夠用indexOf取代，可是indexOf有幾個缺點：

一是不夠語義化，它的含義是找到參數值的第一個出現位置，因此要去比較是否不等於-1，表達起來不夠直觀。

二是，它內部使用嚴格相等運算符（===）進行判斷，這會致使對NaN的誤判。

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

可是includes就能夠解決這個問題！

[NaN].includes(NaN)
// true

該方法的幾個例子：

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

該方法的第二個參數表示搜索的起始位置，默認爲0。若是第二個參數爲負數，則表示倒數的位置，若是這時它大於數組長度（好比第二個參數爲-4，但數組長度爲3），則會重置爲從0開始。

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

數組includes方法和字符串includes方法相似：

let s = 'Hello world!';
s.includes('o') // true
s.includes('Hello', 6) // false

應用-求兩個數組的交集和差集

數組a和數組b的交集：

a.filter(v => b.includes(v))

數組a和數組b的差集：

a.concat(b).filter(v => !a.includes(v) || !b.includes(v))

字符串 startsWith(), endsWith(),repeat(),padStart()，padEnd()

let haorooms = 'Hello world!';
haorooms.startsWith('Hello') // true
haorooms.endsWith('!') // true
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
'na'.repeat(2.9) // "nana"

padStart()，padEnd()接受2個參數，一個表明補全的長度，一個表明補全的字符串。

'haorooms.com'.padStart(16, 'www.');//"www.haorooms.com"
'haorooms'.padStart(16, '11') //"11111111haorooms"

'haorooms'.padEnd(12, '.com') //"haorooms.com"

'haorooms'.padEnd(5, '.com') //"haorooms"

數組 entries()，keys() 和 values() 及對象的Object.keys()，Object.values()，Object.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"

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

類數組轉爲數組

Array.from()

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

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

// ES6的寫法
let arr2 = Array.from(haorooms); // ['a', 'b', 'c']

擴展運算符也能夠將類數組轉爲數組

var args = [...arguments];

應用，獲取p標籤中文本長度大於100的標籤

let haorooms = document.querySelectorAll('p');
Array.from(haorooms).filter(p => { //等同於[...haorooms].filter
  return p.textContent.length > 100;
});

Array.of()將一組值轉爲數組

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

這個方法的主要目的，是彌補數組構造函數Array()的不足。由於參數個數的不一樣，會致使Array()的行爲有差別。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

數組copyWithin()、find() 和 findIndex() 及fill()

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

Array.prototype.copyWithin(target, start = 0, end = this.length)

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

// -2至關於3號位，-1至關於4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

[1, 4, -5, 10].find((n) => n < 0)
// -5
//上面代碼找出數組中第一個小於 0 的成員。

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

fill方法使用給定值，填充一個數組。

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

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

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

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

表達式用於定義方法名-vuex中常常用到

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};
obj.hello() // hi

注意，屬性名錶達式若是是一個對象，默認狀況下會自動將對象轉爲字符串[object Object]，這一點要特別當心。

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};

myObject // Object {[object Object]: "valueB"}

上面代碼中，[keyA]和[keyB]獲得的都是[object Object]，因此[keyB]會把[keyA]覆蓋掉，而myObject最後只有一個[object Object]屬性。

Object.is()

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

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

不一樣之處只有兩個：一是+0不等於-0，二是NaN等於自身。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.assign()

關於Object.assign()，我前面文章屢次說起，請看：http://www.haorooms.com/post/js_copy_sq

http://www.haorooms.com/post/js_objectoperate

super 關鍵字

ES6 又新增了另外一個相似的關鍵字super，指向當前對象的原型對象。

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

react項目中，常常看到

super(props)

這裏 super(props) 以後，能在類裏經過 this 訪問，是由於在 React.Component 裏面把傳入的 props 綁定到了 this 上去，因而在 super 以後就能夠用 this 訪問了。

解構賦值數據交換

之前交換2個值比較簡單的作法以下：

a=[b,b=a][0]

es6解構賦值以下：

[a,b]=[b,a]