JS数组解构：如何将对象name值作为变量名动态赋值state属性

错误原因 #

你编写的代码不符合JavaScript解构赋值的语法规则：数组解构的左侧必须是接收值的变量标识符序列，不能直接将arr.map()返回的数组表达式作为赋值目标，因此会直接抛出语法错误。

实现方案 #

方案1：用对象承载动态变量（最推荐，无全局污染） #

该方式不会污染全局作用域，所有动态生成的键值对统一存储在自定义对象中，调用API时直接取对象属性即可：

const dynamicVars = {}
arr.forEach(item => {
  dynamicVars[item.name] = item.state
})

// 取值示例
console.log(dynamicVars.some1) // 输出 false
console.log(dynamicVars.some2) // 输出 true

如果确实需要生成独立的全局变量（不推荐，易引发变量命名冲突），浏览器环境可挂载到window对象，Node.js环境可挂载到global对象：

// 浏览器环境示例
arr.forEach(item => {
  window[item.name] = item.state
})
console.log(some1) // 输出 false
console.log(some2) // 输出 true

方案2：对象解构一次性赋值 #

如果你提前知晓所有name的取值，可以先将数组合并为对象后做解构赋值，直接得到独立变量：

const stateObj = Object.fromEntries(arr.map(item => [item.name, item.state]))
const { some1, some2 } = stateObj
console.log(some1, some2) // 输出 false true

注意：如果name的取值是完全动态、不可预知的，该方案不适用，优先选方案1。

不推荐方案：eval动态生成变量 #

可以通过eval直接执行赋值语句生成变量，但存在安全隐患和性能问题，非特殊场景不要使用：

arr.forEach(item => {
  eval(`let ${item.name} = ${item.state}`)
})

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