ES6函數(shù)(arguments,箭頭函數(shù),默認(rèn)參數(shù)值,getter,setter)

arguments

arguments 是一個(gè)類似數(shù)組的對象, 對應(yīng)于傳遞給函數(shù)的參數(shù)。

  • 語法
    arguments
    arguments對象是所有函數(shù)中可用的局部變量。你可以使用arguments對象在函數(shù)中引用函數(shù)的參數(shù)。此對象包含傳遞給函數(shù)的每個(gè)參數(shù)的條目,第一個(gè)條目的索引從0開始。

eg:例如,一個(gè)函數(shù)傳遞了三個(gè)參數(shù)

arguments[0]
arguments[1]
arguments[2]

參數(shù)也可以被設(shè)置:

arguments[1] = 'new value';

arguments對象不是一個(gè)Array。它類似于數(shù)組,但除了長度之外沒有任何數(shù)組屬性。
eg:它沒有pop方法,但它可以轉(zhuǎn)換為真正數(shù)組

let args = Array.prototype.slice.call(arguments); 
let args = [].slice.call(arguments);
//還可以使用Array.from()方法或spread運(yùn)算符將arguments轉(zhuǎn)為真正數(shù)組
let args = Array.from(arguments);
let args = [...arguments];
  • 屬性
    arguments.callee : 指當(dāng)前執(zhí)行的函數(shù)
    arguments.length: 指向傳遞當(dāng)前函數(shù)的參數(shù)數(shù)量

箭頭函數(shù)

箭頭函數(shù)表達(dá)式的語法比函數(shù)表達(dá)式更短,并且不綁定自己的this,arguments,super或new.target
這個(gè)函數(shù)表達(dá)式最適用于非方法函數(shù),并且它們不能用作構(gòu)造函數(shù)。

  • 語法
/*基礎(chǔ)語法*/
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression

// 如果只有一個(gè)參數(shù),圓括號是可選的:
(singleParam) => { statements; }
singleParam => { statements; }

// 如果箭頭函數(shù) 無參數(shù) , 必須使用 ()圓括號:
() => { statements; } 

/*高級語法*/
//返回一個(gè)對象時(shí),函數(shù)體外要加圓括號
params => ({foo: bar})
//支持剩余參數(shù)和默認(rèn)參數(shù)  注意:...rest必須是參數(shù)列表最后一個(gè)參數(shù)
(param1, param2, ...rest) => { statements }
//支持參數(shù)列表中的結(jié)構(gòu)賦值
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
// a=1; b=2; x=c; c=a+b=3;
f(); // 6

箭頭函數(shù)的引入有兩個(gè)方面的作用:一是更簡短的函數(shù)書寫,二是對 this的詞法解析。

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

默認(rèn)函數(shù)參數(shù)允許使用默認(rèn)值初始化形式參數(shù), 如果沒有值或未定義被傳入。

  • 語法
function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { 
    statements 
}

在JavaScript里,函數(shù)參數(shù)默認(rèn)是undefined。 然而,在某些情況下設(shè)置一個(gè)不同的默認(rèn)值可能是有需要的。默認(rèn)參數(shù)可以幫助解決這個(gè)問題。
過去,一般的設(shè)置默認(rèn)參數(shù)的方法是在函數(shù)體測試參數(shù)是否為undefined,如果是的話就設(shè)置為默認(rèn)的值。下面的例子中,如果在調(diào)用multiply時(shí),參數(shù)b的值沒有提供,那么b在函數(shù)體的值就為undefined。如果直接執(zhí)行a*b,函數(shù)會返回 NaN。但是第二行代碼解決了這個(gè)問題,它把b的值賦為1。

function multiply(a, b) {
  b = typeof b !== 'undefined' ?  b : 1;
  return a*b;
}
multiply(5); // 5

有了默認(rèn)參數(shù),我們不需要再在函數(shù)體內(nèi)做不必要的檢查?,F(xiàn)在你可以在函數(shù)頭將b的默認(rèn)值置為1:

function multiply(a, b = 1) {
  return a*b;
}
multiply(5); // 5

getter

get 語法將一個(gè)對象屬性綁定到查詢該屬性時(shí)將被調(diào)用的一個(gè)函數(shù)上。

  • 語法
{get prop() { ... } }  // prop:要綁定到給定函數(shù)的屬性名
{get [expression]() { ... } } // expression:從ECMAScript 2015 (ES6)開始,還可以使用一個(gè)計(jì)算的屬性名的表達(dá)式綁定到給定的函數(shù)。

有時(shí)候希望訪問屬性時(shí)能返回一個(gè)動(dòng)態(tài)計(jì)算后的值, 或希望不通過使用明確的方法調(diào)用而顯示內(nèi)部變量的狀態(tài).在JavaScript中, 能通過使用 getter 實(shí)現(xiàn). 盡管可能結(jié)合使用getter和setter創(chuàng)建一個(gè)偽屬性,但不能既使用getter綁定到一個(gè)屬性上,同時(shí)又用該屬性真實(shí)的存儲一個(gè)值.

在新對象初始化時(shí)定義一個(gè)getter

這會為obj創(chuàng)建一個(gè)虛假的屬性latest, 該屬性會返回log數(shù)組的最后一個(gè)元素.

var log = ['test'];
var obj = {
  get latest () {
    if (log.length == 0) return undefined;
    return log[log.length - 1]
  }
}
console.log (obj.latest); // Will return "test".

注意,試圖賦給latest新值的話不會改變該值.

使用delete操作符刪除getter

delete obj.latest;

使用defineProperty在存在的對象上定義 getter

在任意時(shí)間添加getter到一個(gè)存在的對象,使用 Object.defineProperty()

var o = { a:0 }
Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

setter

  • 語法
{set prop(val) { . . . }}  //prop :要綁定到給定函數(shù)的屬性名。
{set [expression](val) { . . . }} 
//val:用于保存嘗試分配給prop的值的變量的一個(gè)別名。
//expression:從ECMAScript 2015 (ES6)開始,還可以使用一個(gè)計(jì)算的屬性名的表達(dá)式綁定到給定的函數(shù)。

在 javascript 中,如果試著改變一個(gè)屬性的值,那么對應(yīng)的 setter 將被執(zhí)行。setter 經(jīng)常和 getter 連用以創(chuàng)建一個(gè)偽屬性。一個(gè)擁有真實(shí)值的屬性就不能再有 setter 了。

在對象初始化時(shí)定義 setter

對象 o 定義一個(gè)偽屬性 current ,當(dāng)對它賦值時(shí),將會把值更新到 log:

var o = {
  set current (str) {
    return this.log[this.log.length] = str;
  },
  log: []
}

注意,current 屬性是未定義的,訪問它時(shí)將會返回 undefined。

用 delete 操作符移除一個(gè) setter

delete o.current;

使用 defineProperty 為已存在的對象定義 setter

可以隨時(shí)使用Object.defineProperty() 給一個(gè)已經(jīng)存在的對象添加一個(gè) setter。

var o = { a:0 };
Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.a) // 5
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容