ECMAScript6知识点2

1.函数

1.1 参数默认值

注意这个默认参数必须是尾参数，不然会有匹配的问题。

function fn(a,b=2){
		return {a,b};
		// 定义默认值的参数必须是尾参数，由于定义默认值以后该参数可忽略。
	}
	console.log(fn(1,3));

1.2 rest参数列表

同默认值同样是尾参数。

function fn(a,b,c,...rest){
		console.log(rest);
		// 用于获取函数的多余参数
		// 注意：rest后边不能再有其余参数，不然会报错。
	}
	fn(1,2,3,4,5,6,7)

1.3 扩展运算符

扩展运算符也是要有遍历接口的。是rest的逆运算

/*
		扩展运算符（spread）是三个点（...）。它比如rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。
	
	*/
	var arr = [1,2,3,4,5,6,7];
	console.log(Math.max.apply(null,arr));
	Math.max(1,2,3,4,5,6,7)
	console.log(Math.max(...arr))

	var str = 'miaov';
	var arr = [...str];
	console.log(arr);

1.4箭头函数

不能代替真正的函数

/*
		箭头函数：
			用来做为回调函数使用。

			一、函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。
			二、不能够看成构造函数，不可使用new命令，不然会抛出一个错误。
			三、该函数体内不存在arguments。

	*/

	// var f = a => a+1;
    var f = (a=1) => a+1; //配合默认值使用
	console.log(f());

	// var f = (a,b) => a+b;


	//console.log(f(1,2));

	// var obj = {
	// 	f:(a,b) => a+b;
	// }
	// obj.f();
	// arr.sort(function(){

	// })
	// arr.sort((a,b)=> a-b)

2.数据结构

1 set

相似java的set

提供了size，add，has，clear[清除全部成员]

/*
		set:
			ES6提供了新的数据结构Set。它相似于数组，可是成员的值都是惟一的，没有重复的值。
			Set是一个构造函数，能够传入一个数组初始化默认值。
		set.size 
			Set的实例的成员个数（数组的长度）
		set.add(value)
			为Set的实例添加值
		set.delete(value)
			删除Set实例的值
		set.has(value)
			判断传入的参数是否为set的成员
		set.clear()
			清除set中全部成员
	

	*/
	var set = new Set([1,2,3,3,4,5,5]);
	//console.log(set.size);

	// set.add(6);
	// set.delete(6);
	// console.log(set.has(6));
	//set.clear();
	//console.log(set)

1.1 weekset

// Weakset
	/*
	WeakSet（list）
		WeakSet结构与Set相似，也是不重复的值的集合。	
		WeakSet是一个构造函数，能够传入一个类数组初始化默认值。
		WeakSet的成员只能是对象，而不能是其余类型的值
		WeakSet中的对象都是弱引用，即垃圾回收机制不考虑	WeakSet对该对象的引用
		WeakSet是不可遍历的
	ws.add(value)
		为WeakSet的实例添加值
	ws.delete(value)
		删除WeakSet实例的值
	ws.has(value)
		判断传入的参数是否为set的成员

2.map

参照以下，key不能重复，否则会被替换掉。

注意，下面的例子中map的key能够是一个obj

"use strict"
	var obj = {
		name:'leo'
	}
	/*
		Map()
		ES6提供了map数据结构。它相似于对象，也是键值对的集合，可是“键”的范围不限于字符串，各类类型的值（包括对象）均可以看成键。
		Map也能够接受一个数组做为参数。该数组的成员是一个个表示键值对的数组。
		例如：
			[[key1,value1],[key2,value2]]


		map.size

		返回成员总数
		map.get(key)
			经过key获取value
		map.set(key,value)
			为Map的实例添加新键值对
		map.has(key)
			查找key值是否存在。
		map.delete(key)
			删除对应键值对
		map.clear()
			清除全部成员


	*/
	var map = new Map([['name','leo'],['age',39],['age',40],[obj,23]]);
	// map.set('sex','男的')
	//console.log(map.size);
	//console.log(map.get(obj))
	//var arr = [...map];

	//console.log(arr);
	// map.forEach(function(value,attr){
	// 	console.log(arguments);
	// })

	// for(var key of map.keys()){
	// 	console.log(key)
	// }
	// for(var value of map.values()){
	// 	console.log(value)
	// }
	
	// for(var [key,value] of map.entries()){
	// 	console.log(key,value)
	// }
	/*
		WeakMap()
		WeakMap结构与Map结构基本相似，惟一的区别是它只接受对象做为键名（null除外），不接受原始类型的值做为键名，并且键名所指向的对象，不计入垃圾回收机制。
		WeakMap没有遍历方法
		wm.get(key)
			经过key获取value
		wm.set(key,value)
			为WeakMap的实例添加新键值对
		wm.has(key)
			查找key值是否存在。
		wm.delete(key)
			删除对应键值对


	*/

3.如何将map，set转为array

使用扩展运算符 

var arr = [...map];

4.如何遍历

使用foreach遍历。

let obj ={name:'tt'};
		var map = new Map([['name','leo'],['age',39],['age',40],[obj,23]]);
		map.forEach((value,attr)=>{
			console.log(value,attr);
		})

注意点

map，set都是 一个类数组结构，因此遍历map.entries()的时候使用的是[key,value]的解构形式，而不是对象的{key,value}的形式

2.遍历接口

for of 变量，该变量实现了遍历接口,for of会调用里面的方法。实现循环。

1.Symbol

新的数据类型,表示独一无二的id，经过symbol函数生成，能够直接调用 Symbol() 不要用new 

而后要部署遍历接口，返回一个对象（包含一个next方法，返回{value:XX,done:true}）

var obj = {
		a:1,
		b:2,
		c:3
	};

	// for( var value of obj){
	// 	console.log(value);
	// }

	/*
		Symbol
		ES6引入了一种新的原始数据类型Symbol，表示独一无二的ID。它经过Symbol函数生成。

	*/
	// var s1 = Symbol('test');
	// var s2 = Symbol('test');
	// console.log(s1 == s2);
	//console.log(typeof s1);

	Object.prototype[Symbol.iterator] = function(){ //部署遍历接口，返回对象(包含next方法)
		var keys = Object.keys(this);
		var _self = this;
		var index = 0;
		return {
			next(){
				if(index < keys.length){
					return {value:_self[keys[index++]],done:false};
				}else{
					return {value:undefined,done:true};
				}
			}
		};
	}
	for(var value of obj){
		console.log(value);
	}

3.Generator

方法名称就是 function* xx(){}

方法体内yield 关键字[相似return]，就是方法调用的时候第一次跑这个方法，yield出来以后，第二次再跑就直接从上次的yield状态中继续跑。

注意  调用这个方法xx()返回的是一个遍历接口，而后咱们要调用的是返回值的.next()方法。

function* fn(b){

		// var a = yield 1; //返回的参数，就是好比第一次调用的时候 然会1，而后再调用的时候，参数就会放入a里面了。

		// console.log(a);
		// yield 2;
		for(var i=0;i<10;i++){
			yield i;
		}
	}
	var f = fn(b);
	console.log(f.next());
	console.log(f.next(true));
	console.log(f.next());

4.Promise

异步操做，promise接口

var p1 = new promise(function(resolve,reject){});

而后 p1.then.

var p1 = new Promise(function(resolve,reject){

		setTimeout(function(){
			resolve();
		}, 400)

		// var xhr = new XMLHttpRequest();
		// xhr.open('get','1.php',false);
		// xhr.onreadystatechange = function(){
		// 	if("成功"){
		// 		resolve(a);
		// 	}else{
		// 		reject();
		// 	}
		// }
		// xhr.send();
	})
	p1.then(function(a){  //第一个函数对应的是resolve
		console.log('成功')
		console.log(b);
	},function(){//第二个函数对应的是reject
		console.log('失败')
	}).catch(function(e){
		console.log(e);
	});
	/*
		什么是promise
		ES6的Promise对象是一个构造函数，用来生成Promise实例。下面是Promise对象的基本用法。
		所谓Promise对象，就是表明了将来某个将要发生的事件（一般是一个异步操做）。它的好处在于，有了Promise对象，就能够将异步操做以同步操做的流程表达出来，避免了层层嵌套的回调函数
		Promise
			new Promise(function(resolve,reject){})
			返回Promise实例对象。
		then
			promise.then(resolve,reject)
			 返回promise


	*/

promise.all&race

遍历各个子项all参数的子项，而后根据各个状态的返回值，肯定最终的返回值。

"use strict"
	/*
		Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。。
		参数要求拥有iterator接口，而且每一项都是promise实例
		var p = Promise.all([p1,p2,p3])
		p的状态由p一、p二、p3决定，分红两种状况。
		（1）只有p一、p二、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p一、p二、p3的返回值组成一个数组，传递给p的回调函数。
		（2）只要p一、p二、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

		Promise.race
		与Promise.all方法相似将多个promise包装成一个新的promise实例
		可是其中有一项的状态发生改变新的实例的状态就会随着改变。

		var p = Promise.race([p1,p2,p3])
		p的状态由p一、p二、p3决定，分红两种状况。

		一、只要p一、p二、p3中一个的状态变成fulfilled，p的状态就变成fulfilled
		二、只要p一、p二、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
	*/
	var p1 = new Promise(function(resolve,reject){
		setTimeout(function(){
			resolve();
			console.log('p1')
		}, 20)
	});
	var p2 = new Promise(function(resolve,reject){
		setTimeout(function(){
			reject();
			console.log('p2')
		}, 400)
	});
	var p3 = new Promise(function(resolve,reject){
		setTimeout(function(){
			resolve();
			console.log('p3')
		}, 1000)
	});

	var p4 = Promise.all([p1,p2,p3]);
	 p4.then(function(){
	 	console.log('成功');
	 }, function(){
	 	console.log('失败');
	 })

 

5.class

constructor构造函数。

继承，extends，super。

"use strict"
	class Cat{
		constructor(name){
			this.name = name;
		}

		getName(){
			return this.name;
		}
	}

	// var Cat = function(name){
	// 	this.name = name;
	// }
	// Cat.prototype.getName = function(){
	// 	return this.name;
	// }
/*
	在constructor方法内，super指代父类的constructor方法；在其余方法内，super指代父类的同名方法。

*/
	class Momo extends Cat{
		constructor(name,color){
			super(name);  //指向父亲的构造器。若是多个参数，可使用...rest的方式处理。
			this.color = color;
		}
		showColor(){
			return this.color;
		}
	}
	var c1 = new Cat('leo');
	var m1 = new Momo('momo','yellow');

	// console.log(m1.getName());
	console.log(m1.showColor());
	//console.log(c1.getName())

6.module

<!--
		什么是module
		es6所提供的模块化
		 export命令
		export命令用于用户自定义模块，规定对外接口
		语法
			export var name = 'leo';
			export {name1,name2}
		 import命令
		import命令用于输入其余模块提供的接口
		语法	
			import {nam1,name2} from '文件路径';
			输入的名称必须与输出的相同
		
		
		as关键字
		为输入的变量换一个新的名字
		import { name as n } from '路径';
		 总体输入模块
		import * as 变量名 from '路径';
		module 变量名 from '路径';
		输入的模块定义在变量名上
		 export default
			输出匿名函数
		语法：
			export default function(){};
		在输入的时候可使用任何名字指向该匿名函数
		例如：
			import name from '路径'；


		模块的继承
	export * from '模块路径';

		输出模块中全部方法和属性

	export { a as b} from '模块路径';

		将模块中的a变量转为b输出
	


	-->

7.补缺补漏

reduce方法 和 reduceRight方法

/** 
 * javascript 中的reduce方法 和 reduceRight方法 
 * 这两个方法是ECMAScript5中新增的方法 
 * 都接受两个参数：第一个是用来迭代的数组的函数，这个函数有四个参数分别是，前一个值，当前值，项的索引，数组对象。然而这个函数的任何值都会做为第一个参数自动传给下一项。第二个是做为第一个函数中第一个参数的初始值 
 *   
 * reduceRight 和 reduce同样，只是他是从右向左进行迭代的 
 * 支持的浏览器有，IE9+，Firefox3+，Safari4+，Opera 10.5+，chrome  
 */  
var nums = [1,2,3,4,5,6,7];  
  
var sum = nums.reduce(function(prev, cur, index, array) {  
    alert(prev + '------' + cur);  
    return prev + cur;  
},8);  
alert(sum);