ES6之函數的擴展(一)

PrototypeZ 發(fā)布于2019-08-26 11:55 / 1406人閱讀

摘要：主要講解參數默認值參數默認值位置函數的屬性參數作用域參數默認值上面的代碼完全等價于而中常用的默認值賦值方式此時會進行隱式轉換的情況都會被賦值為不過如果需求就是如此那還是用此種方式書寫

主要講解：

1. 參數默認值
2. 參數默認值位置
3. 函數的length屬性
4. "參數"作用域

1.參數默認值

function log(x,y="babe"){
    console.log(x,y);
}
  
log(1,"")
//1 ""

log(1,[])
//1 []

log(1,0)
//1 0

log(1,false)
//1 false

log(1,null)
//1 null
-----------------------------
log(1)
//1 "babe"

log(1,undefined)
//1 "babe"

上面的代碼完全等價于:

function log(x,y){
    if(y === undefined){
        y = "babe";
    }
    console.log(x,y);
}

而es5中常用的默認值賦值方式

function log(x,y){
    y = y || "babe"; 
    // 此時y會進行隱式轉換 0/""/[]/false 的情況都會被賦值為"babe",不過如果需求就是如此,那還是用此種方式書寫
    console.log(x,y);
}

**可以發(fā)現一個問題ES6之后很多值比較都是完全等于undefined的情況,
不像es5,""/[]/0 隱式轉換為 false , null == undefined //true
----一些美麗的瑕疵都被遮掉了，以后代碼就顯得一覽無遺了

注意:es6中進行過內部包裝轉換的代碼參數定義是采用let,故同一層級的作用域內不要出現多次聲明,會報錯

用途：解構賦值關鍵就是看變量個數 ,{...} 括起來的其實是一個參數，在后面進行解構了而已

function log({user,pwd="123456"}={}){
    console.log(`user: ${user},password: ${pwd}`);
}
log4()
//user: undefined,password: 123456

log4({user:"babe"})
//user: babe,password: 123456

阮老師書中說的練習可以這么理解:

function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
//m1中不僅對函數參數給了默認值{},而且對待解構的x,y分別賦予了默認值0
//m2中僅僅對函數參數給了默認值{x: 0, y: 0 } ,那這就僅在函數調用時未傳參或者傳undefined進去的時候，使用了默認值

2.參數默認值位置

通常寫法是置于函數參數的最后,可以放中間,這樣一來意義就不大了，還是要手動傳進來(想使用默認值就得傳undefined)

function log(user="babe",pwd){
    console.log(`user: ${user},password: ${pwd}`);
}
log(undefined,123)
//user: babe,password: 123
//可以發(fā)現這種寫法就毫無意義了,方法擴展性為0。當然也不會有人這樣寫代碼了

3.函數的length屬性

指代函數語氣傳入的參數個數 -- 不包括指定了默認值的參數(由于正常寫法默認參數置于最后,length屬性也僅遍歷到默認參前一個為止)

function log(user="babe",pwd){
    console.log(`user: ${user},password: ${pwd}`);
}
log.length //0

function log(pwd,user="babe"){
    console.log(`user: ${user},password: ${pwd}`);
}
log.length //1

4."參數"作用域

es5中函數參數的作用域與函數體作用域處于同一層級,es6中設置了默認值之后，會另外創(chuàng)建一層作用域，位于函數體上面,參數作用域中不存在的變量會往上一層找尋，直至找到window下

如果bug請指正，Thanks?(?ω?)?!

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/107821.html

ES6入門之對象的擴展

摘要：循環(huán)遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。目前，只有對象方法的簡寫法可以讓引擎確認，定義的是對象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。...

RiverLi 2019-05-23 11:58 評論0 收藏0
ES6入門之對象的擴展

摘要：屬性的簡潔表示法在中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。循環(huán)遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量...

AWang 2019-08-26 13:53 評論0 收藏0
ES6入門之函數的擴展

摘要：如果所有函數都是尾調用，那么完全可以做到每次執(zhí)行時，調用幀只有一項，這將大大節(jié)省內存。等同于等同于注意，只有不再用到外層函數的內部變量，內層函數的調用幀才會取代外層函數的調用幀，否則就無法進行尾調用優(yōu)化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函數參數的默認值 1.1 用法在ES6之前是不能為...

dackel 2019-08-02 16:15 評論0 收藏0
ES6入門之函數的擴展

摘要：如果所有函數都是尾調用，那么完全可以做到每次執(zhí)行時，調用幀只有一項，這將大大節(jié)省內存。等同于等同于注意，只有不再用到外層函數的內部變量，內層函數的調用幀才會取代外層函數的調用幀，否則就無法進行尾調用優(yōu)化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函數參數的默認值 1.1 用法在ES6之前是不能為...

graf 2019-08-23 17:10 評論0 收藏0
ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發(fā)布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發(fā)。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0