成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初入ES6-Function

zgbgx / 3152人閱讀

摘要:之前的函數(shù)聲明及表達(dá)式函數(shù)的聲明函數(shù)表達(dá)式也可以此時(shí)的只是這個(gè)匿名函數(shù)的名字,和變量沒(méi)有關(guān)系構(gòu)造函數(shù)這種方法會(huì)運(yùn)行兩次代碼先實(shí)例后執(zhí)行函數(shù)體數(shù)的默認(rèn)值如果沒(méi)有傳入?yún)?shù)就使用默認(rèn)值,利用的短路特性傳入的參數(shù)為值會(huì)忽略判斷是否傳參,如果沒(méi)

ES5之前的函數(shù)聲明及表達(dá)式
1,函數(shù)的聲明

function fn(){
    dosomething;
};

2,函數(shù)表達(dá)式

var fn = function(){}

//也可以var fn = function newFn(){},此時(shí)的newFn只是這個(gè)匿名函數(shù)的名字,和變量沒(méi)有關(guān)系;

3,構(gòu)造函數(shù)

var fn = new Function("num1","num2","return num1 ,num2")        //這種方法會(huì)運(yùn)行兩次代碼
//先實(shí)例后執(zhí)行函數(shù)體

ES5數(shù)的默認(rèn)值

function fn(arg1,arg2){
    arg2 = arg2 || "the value";        //如果沒(méi)有傳入?yún)?shù)就使用默認(rèn)值,利用||的短路特性
    return arg1+arg2;
};            
fn("hello") ->hello the value;
fn("hello","world") ->hello world;
fn("obama","")->obama the value          //傳入的參數(shù)為falsey值會(huì)忽略

typeof arg2 === "undefined" //判斷是否傳參,如果沒(méi)有實(shí)參的話,就是undefined;
arg2=(typeof arg2 !=="undefined")?arg2:"the value";//判斷是否有傳入值
arguments.length ===1 //判斷傳遞的參數(shù)個(gè)數(shù)

ES6的參數(shù)默認(rèn)賦值

function fn(arg1,arg2 = "value"){        
      let arg2 = 34;              //此處的arg2 默認(rèn)是已經(jīng)聲明,所以內(nèi)部使用let const會(huì)語(yǔ)法報(bào)錯(cuò)!
    console.log(arg1,arg2)                    
}
//內(nèi)部的arguments對(duì)象也默認(rèn)和嚴(yán)格模式一樣的行為,不在動(dòng)態(tài)的反應(yīng)變化;默認(rèn)值不計(jì)入arguments對(duì)象

//函數(shù)的參數(shù),也可以是其他值,默認(rèn)參數(shù)只有在調(diào)用的時(shí)候才會(huì)求值,因此可以用第一個(gè)參數(shù)作為默認(rèn)的值
function fn(a , b =a){};

//參數(shù)的作用域和ES6之前的一樣,和其他的參數(shù)都是同一作用域,如果參數(shù)的值是一個(gè)變量,那么這個(gè)參數(shù)的作用域先是局部(確認(rèn)是否也是形參)后是全局;
let a = 34;
function fn(b = a){        //尤其注意,參數(shù)b賦值的是變量a,那么就默認(rèn)變量a已經(jīng)聲明,此時(shí)的a,如果不是參數(shù),就是全局的變量,如果是參數(shù),就會(huì)報(bào)錯(cuò),重復(fù)賦值,使用let和const要注意語(yǔ)法錯(cuò)誤
    let a= 11;
    console.log(b);
}
fn()  ->34    //當(dāng)參數(shù)b賦值變量a的時(shí)候,a是全局注冊(cè)的,因此,fn()是34,如果沒(méi)有l(wèi)et a = 34;就會(huì)報(bào)錯(cuò),
fn(22) ->22    //此時(shí)參數(shù)的作用域是局部

let a = 23;
function (a,b=a){        //參數(shù)b的值是a,相當(dāng)于再次給a賦值,由于參數(shù)是函數(shù)內(nèi)部變量,所以和 let a = 12沖突;會(huì)報(bào)錯(cuò)
    let a = 12;
    console.log(b);
}

function fn(arg1,arg2){
    console.log(arg1 === arguments[0]);        //true
    console.log(arg2 === arguments[1]);        //true
    arg1 = newarg1;
    arg2  = newarg2;
    console.log(newarg1 === arguments[0]);        //true
    console.log(new arg2 === arguments[1]);        //true
}

rest參數(shù)(...rest)不定參數(shù);只能放在形參的最后面,否則會(huì)報(bào)錯(cuò),這是一個(gè)數(shù)組對(duì)象

function fn(...value){
    console.dir(value);
    value.slice() //可以使用數(shù)組的方法,區(qū)分arguments
}
fn(1,2,3,4,4)->[1,2,3,4,4]返回的是數(shù)組,可以使用數(shù)組的方法;
//無(wú)論形參是否有不定參數(shù),arguments對(duì)象正常使用,反應(yīng)傳入的參數(shù)的數(shù)量

...擴(kuò)展運(yùn)算符 把運(yùn)算符后面的數(shù)組,轉(zhuǎn)為用逗號(hào)分開(kāi)的參數(shù)序列;可以用在所有使用數(shù)組的的方法中

console.log(1,2,3,4)  //1 2 3 4; 
console.log(...[1,2,3,4])//同上
//利用call的屬性,轉(zhuǎn)化數(shù)組

判斷函數(shù)的調(diào)用,是直接調(diào)用還是new

function A(a){this.a  = a;}
var b = new A(3);        //生成了對(duì)象
var c = A(4);    //此時(shí)給全局屬性添加了a=4
function A(a){
    if(this instanceof A){this.a  =a}        //判斷是否是new調(diào)用
    else{return new A(a)}
}
var d = A.call(b,333)    //通過(guò)call強(qiáng)制的指定this

//正確的寫(xiě)法
function B(b){
    if(typeof new.target ! == "undefined"){this.b =b}    //新的元屬性
    else{return new B(b)};
}
//es6可以在塊級(jí)代碼中,聲明和使用函數(shù),但是會(huì)作為全局函數(shù)

箭頭函數(shù) =>

//當(dāng)函數(shù)沒(méi)有參數(shù)時(shí);
var f1 = function(){ };//默認(rèn)函數(shù)返回一個(gè)undefined;
var f1 = ( )=>{};        //空函數(shù)
var f2= ()=>"the value you want";
var f3 = ()=>{            //如果需要在函數(shù)體內(nèi)執(zhí)行多條代碼,就必須用大括號(hào)包裹
    doSomethings;
    doantherthings;
    return value;        //必須用return 返回值;否則默認(rèn)返回undefined;
}
//箭頭函數(shù)有一個(gè)函數(shù)的時(shí)候
var f1 = function(arg1){
    
};
var f1 = arg1 =>undefined;
//箭頭函數(shù)有多個(gè)參數(shù)的時(shí)候;
var f1 = function (arg1,arg2,arg3){
    
};
var f1 = (arg1,arg2,arg3)=> undefined;
var f2 = (arg1,arg2,arg3)=>arg1-arg2-arg3;

//注意如果箭頭函數(shù)只是多帶帶的返回一個(gè)對(duì)象要在大括號(hào)的外面加個(gè)小括號(hào);
var f1 = ()=>{
    doSomething;
    return {                            //此時(shí)不是多帶帶返回所以不需要
        name : "name",
        value  : "value"
    }
};
var f2 = ()=>({                        //此時(shí)為了區(qū)分{}是否是函數(shù)體,所以要加上小括號(hào);
        name : "name",
        value  : "value"
})
//箭頭函數(shù)的函數(shù)體內(nèi)正常和一般函數(shù)一樣,但是沒(méi)有arguments數(shù)組對(duì)象,
//IIFE關(guān)于立即執(zhí)行的函數(shù)
var f1 = (function(arg){
    return {
        getArg :function(){return arg}
    }
})(arg)        //返回對(duì)象的方法
var f1 = (arg=>{
    return {
        getArg :function(){return arg}
    }
})("arg")    //同上;

箭頭函數(shù)的this指向問(wèn)題 (this僅僅是外一層非箭頭函數(shù)的函數(shù)this,否則就是undefined)
一般函數(shù)的this是根據(jù)調(diào)用的對(duì)象來(lái)指定的或者用new ,bind ,call 等操作符或者方法來(lái)綁定;
1,默認(rèn)的this 指向

function fn(){console.dir(this)}        //此時(shí)默認(rèn)的指向是window

2,隱式的this 指向

var obj = {
    name : "obama",
    getName : function(){
        return this.name        //此時(shí)的指向是對(duì)象
    }
}

3,new操作符

function Name(name){
    this.name = name;
}
var man  = new Name("obama");    //此時(shí)指向的是new調(diào)用的對(duì)象

4,硬指定的this

var getName= function(){
    console.log(this.name)
}
var name = "bush";
var predents = {
    name : "obama",
    
}
getName();        //bush
getName.call(preddents)   //obama;

ES6的箭頭函數(shù)this是和變量的作用域一樣的詞法指定(寫(xiě)在哪里就是那里的引用),不能更改,也不可以用new操作符,本著用完即丟的思想

var a = ()=>this;        //此時(shí)返回的是this對(duì)象是undefined;
var obj = {age : 45};
obj.b = a;            //把函數(shù)a當(dāng)作obj的方法;
obj.b()                    //正常不使用箭頭函數(shù)的話, this的指向應(yīng)該是調(diào)用的obj對(duì)象,但是這里顯示的 是原來(lái)定義的window對(duì)象
a.call(obj)        //顯試的綁定,也不能改變this 的作用域;
var newa = new a()            //報(bào)錯(cuò),a不是一個(gè)構(gòu)造函數(shù);

如果要使用箭頭函數(shù)的綁定的話在ES7里雙冒號(hào)::左邊是對(duì)象,右邊的是方法,這樣就可以綁定,
var foo = {age : 34};
var bar = ()=>this.age;    
foo::bar  

//以上僅作了解

尾調(diào)用優(yōu)化特指函數(shù)的最后一步(一般函數(shù)最后一步默認(rèn)是return undefined)這一步不能有其他任何的操作,比如賦值,算術(shù)運(yùn)算 屬于引擎的優(yōu)化
一般JS引擎 在執(zhí)行中,會(huì)進(jìn)入執(zhí)行上下文,全局,函數(shù)和eval上下文,三者中的一個(gè),
保存這個(gè)上下文的地方就是在調(diào)用棧,棧的頂端就是一個(gè)變量對(duì)象,保存當(dāng)前函數(shù)的使用的變量;
函數(shù)調(diào)用會(huì)在內(nèi)存形成一個(gè)調(diào)用記錄稱之為調(diào)用幀,保存位置和內(nèi)部變量,所有的調(diào)用幀就形成了一個(gè)調(diào)用棧;
尾調(diào)用因?yàn)槭呛瘮?shù)的一步,所以返回這個(gè)函數(shù)后,原函數(shù)就不必記住自己的變量,尾調(diào)用的函數(shù)會(huì)保存這個(gè)信息,所以內(nèi)層的函數(shù)取代外部的函數(shù),這樣就行成優(yōu)化

function fn(){
    let a = 1;
    let b = 2;
    return f2(a + b);
}
fn();
f2(3)        //在函數(shù)fn里f2是尾調(diào)用,fn執(zhí)行后,就不必記住自身可調(diào)用的變量,因?yàn)閒2會(huì)記住執(zhí)行;最終取代原函數(shù);

function fn(num){                ///一般遞歸函數(shù)
    if(num ===1){return 1};
    return num+fn(num-1)
}

注意只有使用use strict 尾調(diào)用優(yōu)化才會(huì)生效,而且argument 和caller 不能使用

function fn(n,total=1){            //尾調(diào)用優(yōu)化
    if(n ===1) return total;
    return fn(n-1,n+total)
}
//柯里化,將多參數(shù)的函數(shù)層層的使用單參數(shù)的函數(shù)調(diào)用
function add(n){
    return curry(n,1)
};
function curry(n,total){
    if(n ===1) return total;
    return curry(n-1,n+total)
}

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/89125.html

相關(guān)文章

  • HTML & CSS之小白初入江湖

    摘要:之小白初入江湖超文本標(biāo)記語(yǔ)言簡(jiǎn)稱是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。描述了一個(gè)網(wǎng)站的結(jié)構(gòu)語(yǔ)義隨著線索的呈現(xiàn),使之成為一種標(biāo)記語(yǔ)言而非編程語(yǔ)言。是塊級(jí)元素,是行內(nèi)元素。層疊樣式表簡(jiǎn)稱是一種用來(lái)為結(jié)構(gòu)化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標(biāo)記語(yǔ)言(HyperText Markup Language, 簡(jiǎn)稱HTML)是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言...

    fai1017 評(píng)論0 收藏0
  • HTML & CSS之小白初入江湖

    摘要:之小白初入江湖超文本標(biāo)記語(yǔ)言簡(jiǎn)稱是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。描述了一個(gè)網(wǎng)站的結(jié)構(gòu)語(yǔ)義隨著線索的呈現(xiàn),使之成為一種標(biāo)記語(yǔ)言而非編程語(yǔ)言。是塊級(jí)元素,是行內(nèi)元素。層疊樣式表簡(jiǎn)稱是一種用來(lái)為結(jié)構(gòu)化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標(biāo)記語(yǔ)言(HyperText Markup Language, 簡(jiǎn)稱HTML)是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言...

    crossoverJie 評(píng)論0 收藏0
  • 初入vue配合el-table做批量下載

    摘要:剛開(kāi)始做項(xiàng)目,正好碰上了一個(gè)批量下載的功能就是下面圖片中的一個(gè)導(dǎo)出的功能后臺(tái)返回的數(shù)據(jù)格式是這樣的,如下做批量下載后臺(tái)需要前端給一個(gè)必需字段,在我這里也就是上代碼這樣我們的就是一個(gè)由組成的數(shù)組,搞定 剛開(kāi)始做vue項(xiàng)目,正好碰上了一個(gè)批量下載的功能 就是下面圖片中的一個(gè)導(dǎo)出的功能showImg(https://segmentfault.com/img/bVbsuIr); 后臺(tái)返回的數(shù)據(jù)...

    tunny 評(píng)論0 收藏0
  • 初入Vue,node,express,mongodb

    摘要:本人前端萌新大概花了一周多一點(diǎn),完成了一個(gè)前后端分離解耦的簡(jiǎn)易個(gè)人博客項(xiàng)目。項(xiàng)目前后端分離,路由完全交給處理,后端只負(fù)責(zé)操作數(shù)據(jù)庫(kù),暴露。目前項(xiàng)目提供做學(xué)習(xí)用途,希望能給大家一些幫助,對(duì)全棧項(xiàng)目有一個(gè)初步的了解,謝謝。 本人前端萌新大概花了一周多一點(diǎn),完成了一個(gè)前后端分離解耦的簡(jiǎn)易個(gè)人博客項(xiàng)目。項(xiàng)目前后端分離,路由完全交給vue-router處理,后端只負(fù)責(zé)操作數(shù)據(jù)庫(kù),暴露api。 技...

    dingding199389 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

zgbgx

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<