ES6語法學習筆記之函式預設引數

梭梭醬加油鴨發表於2019-01-28

函式傳參可以方便的設定預設值

以往設定預設值是這樣的:

                function show1(a,b){
			a = a || '歡迎';//呼叫時如果傳參,就用傳進來的,如果沒有,那就用預設的,比如這裡的‘歡迎‘
			b = b || 'mmr';
			console.log(a,b);
		}
		show1('welcome','牧馬人');//welcome 牧馬人
		show1('welcome');//welcome mmr
		show1('','牧馬人');//歡迎 牧馬人
複製程式碼

現在利用解構賦值傳預設引數:

                function shows({t,f=0}){
			console.log(t,f);
		};

		shows({t:1});//只傳第一個引數
複製程式碼
		function show3({x=0,y=0}={}){
			console.log(x,y);
		}
		show3();//都不傳
複製程式碼

函式傳預設引數時用的變數,不能在函式裡再用let const宣告

		function show(a=18){
			let a=101;
			console.log(a);
		};

		show();//結果會報錯,因為傳參時,a已經被定義,不能再次用let const宣告
複製程式碼

...擴充套件運算子、reset運算子

...擴充套件運算子可以把陣列展開,直接展示成多個內容

                let arr = ['apple','banana','orange'];
                console.log(arr);//列印整個陣列
                console.log(...arr);//...可以把陣列展開,直接展示其內容
複製程式碼
		function showdiu(f,g,s){
			console.log(f,g,s);
		}
		showdiu(...[1,3,5]);
複製程式碼

...擴充套件運算子還可以把普通的一串內容,轉換成陣列

		function show(a,b){
			console.log(a,b);
		}
		show(1,2,3,4,5);//這裡真正被接收到的引數只有一個,因此結果是1 2
複製程式碼
		function shows(...c){//這一步把普通一串內容轉化成了陣列
			console.log(c);
		};

		shows(1,2,3,4,5);
複製程式碼

其他應用場景:給陣列排序 以前是這樣的:

                function showss(){
			let d=Array.prototype.slice.call(arguments);
			console.log(d);
			// return 1;
			return d.sort();
		}
複製程式碼

或者這樣的:

		function showtest(e){
			return e.sort();
		}

		console.log(showtest([1,4,5,3,6]));
複製程式碼

用ES6語法是這樣的:

		function showsort(...ss){
			return ss.sort();
		}
		console.log(showsort(1,9,8,3,2));
複製程式碼

...還有一個名字叫剩餘運算子,原因參考如下案例:

                function showsy(u,w,...k){
			console.log(u,w);
			console.log(k);
		}
		showsy(1,2,4,5,6);//1 2 [4,5,6]
複製程式碼

資料對映:

		let arr1 = [1,2,3,4,5];
		let arr2 = [...arr1];//推薦寫法
		let arr3 = Array.from(arr1);//IE11 及其更早的瀏覽器版本不支援 from 方法
		console.log(arr1,arr2);
		console.log(arr3);
複製程式碼

相關文章