解构数组参数

我正在学习解构并快速查询如何引用数组的元素。


我正在使用以下方法在函数参数中的对象内解构嵌套数组:


function ajaxOptions({

    url,

    headers: [ 

        header0 ="Content-Type: text/plain",

        ...otherHeaders

    ] = [],

    data

} = {}) { 

    //... function body

}

这是给第一个元素一个默认值,header0并传播其他数组元素。


但是如果我有一个设置对象:


var settings = {

    url: 'http://someothersite.com', 

    data: 50, 

    callback: sayHello, 

    headers: [,  'Header2', 'Header3'] 

}

并将它传递给ajaxOptions(settings)我不能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));

谢谢


眼眸繁星
浏览 100回答 2
2回答

Smart猫小萌

header0在你的参数列表中是一个参数,一个局部变量,就像a是一个参数:function test(a) { }就像您不能a在该函数之外按名称引用一样,您test也不能用您的代码和header0. 因此,如果您使用 调用您的函数 header0 =,您实际上是在定义一个全局变量header0并在现场为其分配一个值。在严格模式下会产生错误。它与参数无关header0。该参数header0将从您作为headers属性值传递的数组的第一个元素中获取其值。如果您作为参数传递的对象没有该headers属性,或者该属性没有定义不同于 的第一个数组元素undefined,则局部headers0变量将获得默认值。不要将此变量与后跟冒号的属性名称混淆,后者也出现在您的参数部分:headers:. 这不是一个变量,而只是定义了变量的位置,headers0并且otherHeaders在调用函数时应该获取它们的值。但headers它本身并不是一个变量。url另一方面是一个变量。它从具有相同名称的属性中获取其值。注意没有冒号。这使它成为一个变量(参数)。解构中使用的语法可能非常混乱。例如,如果不是url,you would have url: url2,那么不是定义 variable url,而是定义 variable url2——仍然是url属性在传递给函数的对象中的值。

偶然的你

我认为您应该尝试使用对象来解决您的问题以引用数组索引。但是,如果您真正想要的是拥有一个返回函数中第一个值的数组,您可以尝试按如下方式排列数组。const defaulHeader = ["Content-Type: text/plain"]const otherHeaders = ["Some-type: application/json"] const headers = [         ...defaulHeader,        ...otherHeaders    ]console.log(headers)
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript