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);