函式擴展之默認引數
{ function add(a,b=99){ console.log(a,b); } add(1);//1 99 //引數b可以讀取到之前的引數a function add2(a,b=99+a){ console.log(a,b); } add2(1);//1 100 //引數b不能讀取到自身引數b function add3(a,b=99+b){ console.log(a,b); } add3(1);//報錯 //引數b不能讀取到之后的引數c function add4(a,b=99+c,c=2){ console.log(a,b); } add4(1);//報錯 }
默認引數結合解構賦值
{ function Person({name,age=18}={}){ console.log(name,age); } Person();//undefined 18 function Person2({name,age=18}={name:"cyy"}){ console.log(name,age); } Person2();//cyy 18 function Person3({name,age=18}={name:"cyy"}){ console.log(name,age); } Person3({name:"cyy2"});//cyy2 18 }
結合擴展運算子（剩余引數）
{ function sum(){ console.log(arguments);//取得所有引數 console.log(arguments instanceof Array);//false 不是陣列，是類陣列 let args=Array.prototype.slice.call(arguments);//類陣列轉陣列 console.log(args);//取得所有引數 console.log(args instanceof Array);//true //使用擴展運算子，類陣列轉陣列 let args2=[...arguments]; console.log(args2);//取得所有引數 console.log(args2 instanceof Array);//true //使用擴展運算子，類陣列轉陣列2 let [...args3]=arguments; console.log(args3);//取得所有引數 console.log(args3 instanceof Array);//true } sum(1,2,3); }
更好的方式是：
{ //這里不算擴展運算子，算剩余引數 function sum(...args){ console.log(args);//取得所有引數 console.log(args instanceof Array);//false 不是陣列，是類陣列 } sum(1,2,3); }
{ //剩余引數 function op(type,...args){ console.log(type); console.log(args); } op("sum",1,2,3); }
{ //剩余引數 function sum(...nums){ //reduce用法： //第一次遍歷時，a是0，b是呼叫時傳入的第一個引數1 //第二次遍歷時，a是第一次遍歷結束后回傳的值，第二次是呼叫時傳入的第二個引數2 return nums.reduce(function(a,b){ return a+b; },0); } console.log(sum(1,2,3));//6 }
for...of 陳述句創建一個回圈來迭代可迭代的物件，在 ES6 中引入的 for...of 回圈，以替代 for...in 和 forEach() ，并支持新的迭代協議，for...of 允許你遍歷 Arrays（陣列）, Strings（字串）, Maps（映射）, Sets（集合）等可迭代的資料結構等，
求平均數：
function avg(...num){ let sum=0; let len=num.length; for(let n of num){ sum+=n; } return sum/len; } console.log(avg(1,4,6,9));
rest（…） 引數搭配的變數是一個陣列，所以可以使用陣列的方法，
現有一個函式，第一項傳遞的引數是陣列，后幾項是數，先要通過函式，把后幾項壓入到第一項這個陣列中，并輸出結果，
function addArr(arr,...num){ for(let n of num){ arr.push(n); } return arr; } console.log(addArr([1,2],3,4,5));
箭頭函式：
//箭頭函式 const add=(a,b)=>a+b; //普通函式 function add2(a,b){ return a+b; } console.log(add(3,5)); console.log(add2(3,5));
如果函式內容一行寫不下，可以用花括號
//箭頭函式 const add=(a,b)=>{ a+=1; return a+b; }; //普通函式 function add2(a,b){ a+=1; return a+b; } console.log(add(3,5)); console.log(add2(3,5));
void 讓函式沒有回傳值，或者回傳undefined
如果引數只有一個，可以不用圓括號
//箭頭函式 //只有一個引數arr，不用圓括號 const add=arr=>arr.pop(); console.log(add([1,2,3]));//3 pop默認彈出陣列的最后一個元素 //void 使函式沒有回傳值 const add2=arr=>void arr.pop(); console.log(add2([1,2,3]));//3 undefined
在箭頭函式中沒有arguments，必須用擴展運算子來接收引數
//箭頭函式沒有arguments const info=()=>{ console.log(arguments); }; info(1,2,3);//報錯 //擴展運算子接收引數 const info2=(...args)=>{ console.log(args); }; info2(1,2,3);//(3) [1, 2, 3]
箭頭函式沒有this，它的this就是自身所處環境的this，因此無法改變this指向
const person={ name:"cyy", fn1:function(){ console.log(this);//this指向person }, fn2:()=>{ console.log(this);//this指向window } } person.fn1(); person.fn2();
const person={ name:"cyy", fn:function(){ //模擬ajax取資料 setTimeout(function(){ console.log(this);//this指向window console.log(this.name); },100); } } person.fn(); //通過閉包 保留this特性 const person2={ name:"cyy", fn:function(){ let _this=this; //模擬ajax取資料 setTimeout(function(){ console.log(_this);//_this指向person2 console.log(_this.name); },100); } } person2.fn();
使用箭頭函式解決：
//使用箭頭函式 const person2={ name:"cyy", fn:function(){ //模擬ajax取資料 setTimeout(()=>{//箭頭函式沒有this，這里的this是fn的this console.log(this); console.log(this.name); },100); } } person2.fn();
現有一個ES5 語法的多重嵌套函式，使用箭頭函式對齊進行改寫
//ES5 語法的多重嵌套函式 function insert(value) { return { into: function(array) { return { after: function(afterValue) { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; } }; } }; } console.log(insert(2).into([1, 3]).after(1));//(3) [1, 2, 3] //使用箭頭函式改寫 let insert2=(value)=>(array)=>(afterValue)=>{ // 在array的afterValue所在的索引位置+1處 // 洗掉0個 // 插入value array.splice(array.indexOf(afterValue) + 1, 0, value); return array; } console.log(insert2(2)([1, 3])(1));//(3) [1, 2, 3]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/139471.html
標籤：JavaScript
上一篇：node 版本管理工具--nvm
下一篇：ES6 物件擴展