JavaScript对象声明时如何用三元运算符动态设置不同的键名?
实现方案
完全可以实现,借助ES6引入的计算属性名语法即可直接在对象字面量声明阶段完成动态键的设置,不需要额外后续给对象追加属性。
基础写法
对应需求示例的正确实现代码如下:
let usertype='teacher'; const data = { user: id, userRole: role, // 方括号包裹的表达式会将执行结果作为对象的键名 [usertype === 'teacher' ? 'teacherdepartment' : 'studentDepartment']: usertype === 'teacher' ? tdepartment : sdepartment }
复杂场景优化
如果存在多层条件判断、嵌套对象的场景,可以通过以下方式优化代码可读性:
- 嵌套对象内部同样支持直接使用计算属性名语法
- 把重复的条件判断逻辑抽离为独立函数,后续维护只需要修改函数逻辑即可
示例代码:
// 抽离键名判断逻辑 function getDepartmentKey(usertype) { switch(usertype) { case 'teacher': return 'teacherdepartment'; case 'student': return 'studentDepartment'; case 'admin': return 'manageDepartment'; default: return 'commonDepartment'; } } // 抽离值判断逻辑 function getDepartmentValue(usertype, tdepartment, sdepartment) { switch(usertype) { case 'teacher': return tdepartment; case 'student': return sdepartment; default: return ''; } } let usertype='teacher'; const data = { user: id, userRole: role, [getDepartmentKey(usertype)]: getDepartmentValue(usertype, tdepartment, sdepartment), // 嵌套对象中也可正常使用 ext: { [usertype === 'teacher' ? 'teacherWorkAge' : 'studentGrade']: usertype === 'teacher' ? 8 : '高三' } }
内容的提问来源于stack exchange,提问作者Balaji
相关产品推荐
相关产品推荐

