解構數組參數

Question

我正在學習解構並快速查詢如何引用數組的元素。

我正在使用函數參數中的 object 解構嵌套數組：

function ajaxOptions({
    url,
    headers: [ 
        header0 ="Content-Type: text/plain",
        ...otherHeaders
    ] = [],
    data
} = {}) { 
    //... function body
}

這是為第一個元素header0提供默認值並傳播其他數組元素。

但如果我有一個設置 object：

var settings = {
    url: 'http://someothersite.com', 
    data: 50, 
    callback: sayHello, 
    headers: [,  'Header2', 'Header3'] 
}

並將其傳遞給ajaxOptions(settings)我不能在設置 object 中使用header0來引用在 ajaxOptions 中解構的數組元素可以嗎？ 換句話說，我不能將它用作像“url”、“數據”和“回調”這樣的命名參數嗎？

希望這是有道理的。 如果有幫助，這是完整的代碼：

function ajaxOptions({
    url: url = "http://www.example.com",
    method: method = "post",
    headers: [ 
        header0 ="Content-Type: text/plain",
        ...otherHeaders
    ] = [],
    data: data,
    callback: callback 

} = {}) {
    return { url, method, headers: [header0, ...otherHeaders], data, callback};
}

function sayHello(){
    console.log('hello');
}


var defaults = ajaxOptions();

var settings = {
    url: 'http://someothersite.com', 
    data: 50, 
    callback: sayHello, 
    headers: [, header0 = 'New Header', 'Header2', 'Header3'] 
}

console.log(ajaxOptions(settings));

謝謝

Answer 1

我認為您應該嘗試使用對象來解決您的問題以引用數組索引。 但是，如果您真正想要的只是擁有一個返回 function 中的第一個值的數組，您可以嘗試按如下方式排列 arrays。

const defaulHeader = ["Content-Type: text/plain"]
const otherHeaders = ["Some-type: application/json"]

 const headers = [ 
        ...defaulHeader,
        ...otherHeaders
    ]

console.log(headers)

Answer 2

你的參數列表中的header0是一個參數，一個局部變量，就像a是一個參數：

function test(a) { }

就像您不能在該test function 之外引用名稱一樣，您也不能a代碼和header0來做到這一點。 因此，如果您使用header0 =調用 function ，您實際上是在定義一個全局變量header0並在現場為其分配一個值。 在嚴格模式下會產生錯誤。 它與參數header0 。

參數header0將從作為headers屬性值傳遞的數組的第一個元素中獲取其值。 如果您作為參數傳遞的 object 沒有headers屬性，或者該屬性沒有定義不同於undefined的第一個數組元素，則本地headers0變量將獲得默認值。

請勿將此變量與后跟冒號的屬性名稱混淆，后者也出現在您的參數部分： headers: 。 這不是一個變量，而只是定義了在調用 function 時變量headers0和otherHeaders應該從中獲取其值的位置。 但是headers本身並不是一個變量。

另一方面， url是一個變量。 它從具有相同名稱的屬性中獲取其值。 注意沒有冒號。 這使它成為一個變量（參數）。

解構中使用的語法可能非常混亂。 For instance, if instead of url, you would have url: url2 , then instead of defining variable url , you define variable url2 -- still being the value that the url property has in the object that you pass to the function.