js uses variables as object attribute names-Kaiqisan

js uses variables as the property name of the object

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, the last article just talked about the Map object. It has a feature that it can use parameters to determine its attribute value ("key" or it can be called the first value of each member A value), so I remembered a problem that I was entangled before, which was the problem of dynamically naming an object property. Although you can use the if-else method to determine different property values, I think it’s inconvenient. I want Find a method of dynamically naming property names, but unfortunately, this method happens to be available in JS!

Don’t talk nonsense, just introduce the method, there are two

• Use square brackets [val]

Use scenario 1

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

Use scenario 2

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

When defining an object attribute name, any parameter within the brackets can be used to define an attribute value, which is dynamic. In contrast to the old method of ES5, only a string can be used to define an attribute name, which seems very rigid

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

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

• Use the Map() object definition, the first parameter of each member of it corresponds to the attribute value in the object, you can use the parameter definition, and then convert it into a formal object afterwards.

let admin = new Map([['name', 'tommy'], ['uid', 100001]])
let NetEaseEmail = '[email protected]'
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);

to sum up

This bracket is quite powerful. It can not only be used to define dynamic attribute names, but also special characters that cannot be used in general attribute names. For example, normal attribute names are not allowed to contain horizontal bars -. An error must be reported, but after using the brackets, you can run and use it.

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

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

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

When calling

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

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

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

When using the above methods to define or query the members of an object, only square brackets can be used.