js使用变量作为对象的属性名 - Kaiqisan

js使用变量作为对象的属性名

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 上一篇文章刚好讲了Map对象，它有一个特征就是可以使用参数决定它的属性值（“键"或者可以叫做每一个成员的第一个值），于是，我想起之前纠结的一个问题，就是动态命名一个对象属性的问题，虽然可以使用if–else判断的方法来取用不同的属性值，但是我觉得这样不方便，想要找个动态命名属性名的方法，但是好巧不巧，这个方法JS刚好有！

不多废话，直接介绍方法，一共有两个

• 使用中括号 [val]

使用场景1

let Obj = {
    name: 'kaiqisan',
    isVip: true
}
Obj[Obj.isVip ? 'vipLevel' : 'level'] = 10
// 此时 Obj = { name: 'kaiqisan', isVip: true, vipLevel: 10 }

使用场景2

let useNetEase = true
let Obj = {
    name: 'kaiqisan',
    isVip: true,
    [useNetEase ? 'netEaseEmail' : 'QQEmail']: '' // 这个属性名由上面的参数useNetEase决定
}
console.log(Obj)

在对象属性名定义的时候，中括号内可以使用任意参数来定义一个属性值，是动态的。反观ES5的老方法,只能使用字符串来定义一个属性名，这显得十分死板

let i = 1
let Obj = {
    'admin' + i: 'kaiqisan', // 这样必报错，不会达到 Obj.admin1 = 'kaiqisan'这样的效果
}
// 或者

Obj.`admin${i}` = 10 // 这样也必报错

• 使用Map()对象定义,它的每一个成员的第一个参数对应了对象中的属性值，可使用参数定义，事后再把它转化成正式的对象就可以了。

let admin = new Map([['name', 'tommy'], ['uid', 100001]])
let NetEaseEmail = 'Kaiqisan@163.com'
mapList.set(NetEaseEmail ? 'NetEaseEmail': 'QQEmail',
            NetEaseEmail ? NetEaseEmail : QQEmail )

// 这个方法用来把Map对象转化成一个真正的对象，建议封装，统一调用
function strMapToObj(strMap) {
    let obj = {}
    for (let [key, val] of strMap) {
        obj[key] = val
    }
    return obj
}

let admin = strMapToObj(admin)
console.log(admin);

总结

这个中括号还是挺强大的，不只是可以拿来定义动态属性名，还可以使用一般的属性名中无法使用的特殊字符，举个例子，普通的属性名里面不允许出现横杠 - ，一出现就必报错，但是，使用了中括号之后，就可以运行使用它了。

let Obj = {
	name-a: 'tom'  // 非法
}

let Obj = {
	['name-a']: 'tom'  // 合法
}

let Obj = {
	'name-a': 'tom'  // 这样也行
}

在调用的时候

let name = Obj.name-a // 必报错

let name = Obj.'name-a' // 这样也不对

let name = Obj['name-a'] // 不报错

使用上述方法定义或者查询某对象成员的时候，只能使用中括号。