如何防止javascript析构函数赋值中的函数参数被具有相同ID的DOM元素覆盖

Question

我正在尝试使用ES6析构函数赋值功能将包含多个参数的选项对象传递给函数，但其中一个参数正被具有相同id的DOM元素覆盖！

//javascript function call:  
createPicture({name: "aaa", width: 100, height: 100, tags: [] }) 
//javascript function declaration:  
createPicture({name, width, height, tags}) {   
console.log(tags) //prints a DOM element with id "tags" instead of an empty array!  
}

我知道带id的DOM元素在JS中创建全局变量，但它在函数调用中覆盖对象内的属性，这对我来说真的很奇怪。有什么方法可以保护javascript代码？

编辑：我按照建议添加了一个JSFiddle来确认这个问题。如果函数声明中的标记具有默认值，则会出现问题。如果它为空，那么就没有错误。在这里摆弄

Answer 1

如果函数声明标记中有默认值，则会出现问题

function createPicture({name, width, height, tags: []}) { … }

这不是一个默认值，这将进一步破坏-变成一个空数组模式。它没有声明任何参数，也没有引入任何局部变量，所以当您记录tags时，您确实得到了全局变量(由于遗留原因，它引用DOM元素(。

你的模式像一样工作

function createPicture(arg) {
var name = arg.name,
width = arg.width,
height = arg.height,
[] = arg.tags;
…
}

您实际想要的默认初始化程序被写为

function createPicture({name, width, height, tags = []}) { … }
//                                                ^