es6 針對新的語法特性(解構、引數預設值、箭頭語句、塊級作用域let),對於函式的屬性、引數、作用域進行了擴充套件,並對遞迴調導致記憶體棧溢位用進行了優化。1. 函式引數預設值同時es6規定,只要函式引數使用了預設值、解構賦值、擴充套件運算子,函式內部都不可以使用嚴格模式(es5可以),否則會報錯;
es6之前,函式定義/聲名時不能指定預設值;es6可以在函式定義時進行初始化;同時有以下幾點需要注意:
function sum(...values)
return sum;
}sum(1,2,3,4);//10
function fn(x,y=5,z)
fn(); // [undefined,5,undeifined]
fn(1); //[1,5,undefiend]
fn(1,2);// [1,2,undefined]
fn(1,,3);//報錯
fn(1,undefined,3);//[1,5,3]
// 寫法一
function fn1(={})
//寫法二
function fn2(=)
// ① 函式無引數
fn1(); // [0,0]
fn2(); // [0,0]
// ② x、y都無值情況;
fn1({}); // [0,0]
fn2({}); // [undefined,undefined]
// ③x有值,y無值;
fn1(}); // [3,0]
fn2(); // [3,undefiend]
2.函式作用域函式引數設定預設值後,函式初始化時,引數會形成乙個單獨的作用域;等到初始化完成後,這個作用域消失;不設定預設值時,該機制不生效;
// ① 函式引數獨立作用域機制賦值:
let x=1;
function fn1(x,y=x);
fn1(2);//2
//② 函式引數獨立作用域+作用域鏈
let a=1;
function fn2(b=a);
fn2();//1
// ③ 函式引數單獨作用域+作用域鏈
function fn3(e=d)
fn3();// referenceerror:e is not defiined
// ④ 引數賦初值+let 暫時性死區 =>報錯
let j=2;
function fn4(j=j)
fn4();//referenceerror:j is not defined
3. 函式新增屬性①將匿名函式賦值給變數,es5中該屬性返回空字串""
,而es6返回實際函式名;②function建構函式返回函式例項,name屬性返回anoymous
,bind返回的函式,name屬性加上bound字首:
(new function).name; //"anoymous"
function fn(){};
fn.bind({}).name; // "bound fn"
(function(){}).bind({}).name; // "bound"
(function(a){}).length;//1
(function(a=1){}).length;//0
(fucntion(a,b,c=5){}).length;//2
(function(..args){}).length;//0
(function(a,b=1,c,d){}).length;//1
4. 箭頭函式——()=>{}
箭頭函式不存在單獨的作用域,即不存在單獨的this、arguments、super、new.target;這四個物件分別指向外層函式對應的變數;1.注意事項箭頭函式中this指向固化並不是箭頭函式內部有繫結this的機制,相反,本質原因是箭頭函式根本沒有自己的this,導致箭頭函式內部的this就是外層**塊的this,也正是因為沒有this,即沒有獨自的作用域,所以不能用作建構函式;
function timer(),1000);
}var timer=new timer();
settimeout(()=>console.log('s1:',timer.s1),3100); // s1:3
settimeout(()=>console.log('s2:',timer.s2),3100); // s2:0
2. 箭頭函式使用場景const plus=a=>a+1;
const mult=b=>b*2;
mult(plus(5));//12
const pipeline=((...fns)=>val=>fns.reduce((a,b)=>b(a),val));
const addthenmult=pipeline(plus,mult);
addthenmult(5);//12
5.函式優化
四個概念:呼叫幀、尾呼叫函式、尾遞迴函式、蹦床函式、函式柯里化(currying)
function fn1() // 呼叫後還有其他操作
function fn2() // 不是最後一步操作
function fn3() // 返回 undeifend
// ① es6尾遞迴優化案例:階乘
function fn1(n)
fn1(5; // 120
funcion fn1optimize(n,tatal)
fn1optimize(5,1); //120
// ② es6尾遞迴優化案例: 斐波那數列
function fibonacci(n)
fibonacci(10); //89
fibonacci(100); //堆疊溢位
fibonacci(1000); // 堆疊溢位
function fibonacciopt(n,a1=1,a2=1)
fibonacciopt(10); //89
fibonacciopt(100); // 573147844013817200000
fibonacciopt(1000); // 49 7.0330367711422765e+208
fibonacciopt(10000);// infinity 或 uncaught rangeerror: maximum call stack size exceeded
function trampoline(fn);
return fn;
}
function currying(fn,n)
}
ps: 前端技術 ES6(04)
const persion sayhiasync1 function 1000 sayhiasync2 function 1000 abc function persion.sayhi this.name jerry persion.sayhi persion.sayhiasync1 settime...
ES6 04常用的解構
其他解構 1.es6除了提供物件和陣列解構,還提供很多適用的解構方案 2.若你想要讓乙個普通的值進行交換,不必需要第三個變數 let key 1 let value mr.lee key,value value,key 解構操作,變數互換 console.log key console.log va...
ES6 函式的擴充套件
在es5中有這種情況 function fn a,b fn 30 fn 0,10 20因為a 0,所以將10賦給它在es6中 function fn a 10,b 20 fn 30 fn 0,10 10rest 引數形式為 變數名 用於獲取函式的多餘引數,這樣就不需要使用arguments物件了。r...