时间戳

首页 > 解决方案 > 如何防止javascript解构赋值中的函数参数被具有相同ID的DOM元素覆盖

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

问题描述

我正在尝试使用 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!  
    }

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

编辑：我按照建议添加了一个 JSFiddle 以确认问题。如果函数声明中的标签具有默认值，则会出现问题。如果让它为空，则没有错误。在这里提琴

标签： javascriptecmascript-6

解决方案

如果函数声明中的标签有默认值，就会出现问题

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 = []}) { … }
//                                                ^

推荐阅读