为何JavaScript对象中的concat方法无法正常工作？

为什么concat()没效果？ #

concat()方法不会修改原数组，它只会返回一个拼接后的新数组。你当前的写法只是调用了concat，但没有把返回的新数组赋值回原对象的数组属性，所以ListType.TextField这类原数组完全没变化，打印出来自然还是空数组。

比如你这段代码：

ListType.TextField.concat(Coords);

它只是生成了一个新数组，但没有保存这个结果，原数组根本没被改动。

为什么push()会产生嵌套数组？ #

因为Coords本身是一个数组（[PosX, PosY]），直接调用push(Coords)会把整个Coords数组作为单个元素添加到目标数组里，所以就出现了嵌套结构：

// 原TextField是[]，push(Coords)后变成
[[100, 200]]

纯JavaScript解决方案 #

方案1：修正concat()的用法 #

把concat返回的新数组赋值回原属性：

if(InputType == "Text"){
    ListType.TextField = ListType.TextField.concat(Coords);
}
else if(InputType == "Date"){
    ListType.DateField = ListType.DateField.concat(Coords);
}
else{
    ListType.SignatureField = ListType.SignatureField.concat(Coords);
}

这样每次都会生成新数组并替换原数组，最终得到扁平的数组：[100,200,300,400,...]

方案2：用展开运算符配合push() #

把Coords数组的元素逐个展开传入push，避免嵌套：

if(InputType == "Text"){
    ListType.TextField.push(...Coords);
}
else if(InputType == "Date"){
    ListType.DateField.push(...Coords);
}
else{
    ListType.SignatureField.push(...Coords);
}

...Coords会把数组里的每个元素单独拿出来作为push的参数，效果和push(PosX, PosY)一致，但写法更简洁规范。

方案3：用Array.prototype.apply()（兼容旧版JS） #

如果要兼容不支持展开运算符的旧环境，可以用apply：

if(InputType == "Text"){
    Array.prototype.push.apply(ListType.TextField, Coords);
}
else if(InputType == "Date"){
    Array.prototype.push.apply(ListType.DateField, Coords);
}
else{
    Array.prototype.push.apply(ListType.SignatureField, Coords);
}

apply会把第二个参数的数组元素作为单个参数传给push，效果和展开运算符完全相同。

内容的提问来源于stack exchange，提问作者Groggyboi