解构数组参数

Question

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

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

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'、'data' 和 'callback' 之类的 are?

希望这是有道理的。如果有帮助，这里是完整的代码：

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

我认为您应该尝试使用对象来解决您的问题以引用数组索引。但是，如果您真正想要的只是拥有一个 returns 函数中第一个值的数组，您可以尝试按如下方式排列数组。

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 函数之外通过名称引用 a 一样，你也不能用你的代码和 header0 来做到这一点。因此，如果您使用 header0 = 调用您的函数，您实际上是在定义一个全局变量 header0 并当场为其赋值。它会在严格模式下产生错误。与参数header0无关。

参数 header0 将从您作为 headers 属性值传递的数组的第一个元素获取其值。如果作为参数传递的对象没有 headers 属性，或者属性没有定义不同于 undefined 的第一个数组元素，则局部 headers0 变量将获得默认值。

不要将此变量与后跟冒号的属性名称混淆，后者也出现在您的参数部分：headers:。这不是一个变量，而只是定义变量 headers0 和 otherHeaders 在函数被调用时应该从哪里获取它们的值。但是headers本身不是一个变量。

url 另一方面是一个变量。它从同名的属性中获取值。注意缺少冒号。这使它成为一个变量（参数）。

解构中使用的语法可能非常混乱。例如，如果您使用 url: url2 而不是 url,，那么您将定义变量 url2 而不是定义变量 url —— 仍然是 url 属性在您传递给函数的对象中。

解构数组参数

Destructuring array parameters

javascript

arrays

destructuring