《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()