《es6 標準入門》知識整理(2) - 數據類型的擴展、Set 和 Map

字符串的擴展

es6 爲字符串添加了遍歷器接口，使得字符串能夠被 for...of 循環遍歷

at()， charAt() 返回字符串給定位置的字符

'abc'.charAt(0)// 'a'

normalize() 用來將字符的不一樣表示方法統一爲一樣的樣式，這稱爲 Unicode 正規化；

es5 只有 indexOf() 來肯定一個字符串是否包含在另外一個字符串中，es6 又提供了三種新方法:

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

第二個參數表示開始搜索的位置；

let s = 'hello world';
    s.startsWith('world',6);// true
    s.endWith('hello', 5);// true

repeat() 返回一個新字符串，表示將原字符串重複 n 次；

'x'.repeat(3) // 'xxx'

padStart(), padEnd(), 字符串補全功能；若是兩個字符串不夠制定長度，會在頭部或尾部補全。

'x'.padStart(5,'ab');

常見用途是爲數值補全指定位數和提示字符串格式

'1'.padStart(5,'0')//'00001'
    '09-12'.padStart(10,'YYYY-MM-DD')// YYYY-09-12

模板字符串：加強版的字符串，用反引號 `` 標識；它能夠用來在字符串中嵌入變量或定義多行字符串；

模板字符串中還能調用函數：

function fn() {}
    `foo ${fn()} bar`

數值的擴展

• Number.isFinite() 用來檢查一個數值是否爲有限的；

• Number.isNaN() 用來檢查一個值是不是NaN;

• Number.parseInt(), Number.parseFloat()

• Math.trunc() 用於去除一個數的小數，只保留整數部分；

• Math.sign() 用來判斷一個數是正負仍是0

• Math.cbrt() 用於計算一個數的立方根

• Math.clz32() 返回一個數的32位無符號整數形式有多少個前導0；

• Math.fround() 返回會一個數的單精度浮點數形式；

• Math.hypot() 返回會全部參數的平方和的平方根

• 新增指數運算符** ; 2 **2 = 4 與 Math.pow()差很少

函數的擴展

函數的 length 屬性，將返回沒有指定默認值的參數個數，即指定了默認值後，length 屬性將失真；

rest 參數：用於獲取函數的多餘參數，這樣就不用 arguments 對象了；

function add(...values) {
    	for(var val of values) {
    		sum += val;
    	}
    	return sum;
    }
    add(2.5.3);// 10

函數的 name 屬性，返回會該函數的函數名

箭頭函數： 若是箭頭函數不須要參數或須要多個參數，就使用一個（）表明參數部分；

箭頭函數有幾個使用注意點：

• 函數體內的 this 對象，就是定義時所在的對象，而不是使用時所在的對象；
• 不能夠看成構造函數，也就是說，不可使用 new 命令，不然會拋出一個錯誤；
• 不可使用 arguments 對象，該對象在函數體內不存在，若是要用，能夠用 rest 參數替代；
• 不可使用 yield 命令，所以箭頭函數不能用做 Generator 函數；

箭頭函數可使 this 指向固定化，這種特性頗有利於封裝回調函數；

var handler = {
    	id: '123',
    	init: function() {
    		document.addEventListener('click', event => this.doSomething(event.type), false);
    	},
    	doSomething: function(type) {
    		console.log('handling' + type + 'for' + this.id);
    	}
    };

這裏 this 一直指向 handler;

this 指向的固定化，並非由於箭頭函數內部有綁定 this 的機制，實際緣由是箭頭函數根本沒有本身的 this,致使內部的 this 就是外層代碼塊的this。正式由於它沒有 this，因此也就不能用做構造函數；

因爲箭頭函數沒有本身的 this,因此也不能用 call()， apply(), bind() 方法來改變 this 的指向；

尾調用：函數式編程的一個重要概念，就是指某個函數的而最後一步是調用另外一個函數；

function f(x) {
	return g(x);
}

柯里化：意思是將多參數的函數轉換程單參數的形式；

數組的擴展

將一個數組轉爲用逗號分隔的參數序列，該運算符主要用於函數調用；

擴展運算符的應用：

• 複製數組， const a1 = [1,2]; const a2 = [...a1]

• 合併數組： [1, 2,...array3]

• 與結構複製結合:[a, ...rest] = list

• 將字符串轉爲真正的數組： [...'hello']// 'h','e','l','l','o']

• 實現了Iterator接口的對象：任何Iterator接口的對象，均可以用擴展運算符轉爲真正的數組；

• Map和Set結構：擴展運算符內部調用的是數據結構的 Iterator 接口，所以只要具備 Iterator 接口的對象，均可以使用擴展運算符，好比 Map 結構；

let map = new Map([
    	[1,'one'],
    	[2,'two'],
    	[3,'three'],
    ]);
    let arr = [...map.keys()];//[1,2,3]

Array.from() 用於將兩類對象轉爲真正的數組：相似數組的對象和可遍歷的對象

Array.of() 用於將一組值，轉換爲數組；Array.of(3,11,8)

Array.copyWithin():在當前數組內部，將指定位置的成員複製到其它位置(會覆蓋原有成員)，而後返回當前數組；

[1,2,3,4,5].copyWithin(0,3)
//表示將從3號爲直到數組結束的成員（4，5），
//複製從0號位開始的位置，結果覆蓋了原來的1和2；

數組示例的find() 和 findIndex()

array.fill():用給定值，填充一個數組；['a','b','c'].fill(7,1,2);上面代碼表示，fill 方法從 1 號位開始，向原數組填充 7，到 2 號位結束；

array 的 enteries()，keys(), values(),都是用於遍歷數組的，enteries 是用於遍歷鍵值對，keys 遍歷索引，values() 遍歷值；

array.includes():返回一個布爾值，表示某個數組是否包含給定的值；

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

對象的擴展

Object.assign() 用於對象的合併，將源對象的全部可枚舉屬性，複製到目標對象；

const target = {a:1};
const souce1 = {b:2};
Object.assign(target,souce1);

常見用途：

• 爲對象添加屬性
• 爲對象添加方法
• 克隆對象
• 合併多個對象
• 爲屬性指定默認值

es6共有 5 種方法能夠遍歷對象的屬性：

• for...in
• Object.keys(obj)
• Object.getOwnPropertyNames(obj)
• Object.getOwnPropertySymbols(obj)
• Reflect.ownKeys(obj)

Object.keys(),Object.values(),Object.enteries()

Symbol

es6 新的原始數據型，表示獨一無二的值；即對象的屬性名如今有兩種類型，一種是原來的數據類型，一種是 symbol,凡是 symbol 類型的，就是獨一無二的，能夠保證不會與其餘屬性名產生衝突。

Set和Map結構

set

Set 是 es6 提供的新的數據結構，相似於數組，可是成員的值爲惟一的，沒有重複的值。可用來進行數組去重。

const set = new Set([1,2,2,4,3]);
    console.log([...set]);//[1,2,4,3]

去除數組重複成員的方法：[...new Set(array)];

在 Set 內部，NaN 是相等的，5 和'5'是不等的；

• set.add(value): 添加某個值，返回Set結構自己；
• set.delete(value):刪除某個值，返回一個布爾值，表示刪除是否成功；
• set.has(value): 返回布爾值，表示該值是不是set的成員；
• clear()：清楚全部成員，沒有返回值；

上面說到 Array.from() 能夠將 Set 結構轉爲數組，這提供了去除數組重複成員的另外一種方法；

function deeupe(array) {
    	return Array.from(new Set(array));
    }
    deeupe([1,1,2,3]);// [1,2,3]

遍歷操做：

Set結構的示例有四個遍歷方法，能夠用於遍歷成員

keys():返回鍵名；values():返回鍵值；enteries():返回鍵值對；forEach():遍歷每一個成員

set = new Set([1,4,9]);
    set.forEach((value,key) => 
	{console.log(key + ':' + value)})// 1:1 4:4 9:9

數組的 map 和 filter 也能夠用於 set;

let set = new Set([1,2,3]);
    set = new Set([...set].map(x => x*2));
    // 返回Set結構{2,4,6}
    
    let a = new Set([1,2,3])
    let b = new Set([4,3,2])
    let union = new Set([...a,...b]) // set {1,2,3,4}
    let intersect = new Set(...a).filter(x = b.has(x));// 交集
    let difference = new Set([...a]).filter(x => !b.has(x))// 差集

WeakSet 不能遍歷，是由於成員都是弱引用，隨時可能消失，遍歷機制沒法保證成員的存在，極可能遍歷結束，成員就取不到了。

Map

所擁有方法和遍歷方法和 Set 相似；

與其餘數據結構的互相轉化：

（1）Map 轉爲數組：使用擴展運算符...

const myMap = new Map().set(true,7).set({foo,3},['abc]);
    [...myMap]// [[true,7],[{foo,3},'abc']]

(2) 數組轉 爲Map, 將數組傳入 Map 構造函數，就能夠轉爲 Map

new Map([[true,7],[{foo,3},['abc']]])

(3)Map 轉爲對象

function strMapObj(strMap) {
    	let obj = Obect.create(null);
    	for(let [k,v] of strMap) {
    		obj[k] = v;
    	}
    	return obj;
    }
    const myMap = new Map().set('yes', true).set('no', false);
    strMapObj(myMap);

(4)Map 轉爲 Json,返回值使用 Json.stringify()，—> Map的鍵名都是字符串時，可將對象轉爲 JSON；

分爲兩種狀況：一種是 Ma p的鍵名都是字符串，這時選擇轉爲對象 JSON：

function strMapToJson(sttrMap) {
    	return JSON.stringify(strMaoToObj(strMap));
    }
    let myMap = new Map().set('yes',true).set('no',false);
    strMaptoJson(myMap)// '{'yes':true,'no': false}'

另外一種是 Map 的鍵名有非字符串，這時能夠選擇轉爲數組 JSON

function mapToArrayJson(map) {
    	return JSON.stringify([...map]);
    }
    let myMap = new Map().set(true,7).set({foo,3},['abc']);
    mapToArrayJson(myMap)// '[[true,7],[{'foo':3},['abc']]]'

(5)Json轉爲Map,json.parse()