ES6 中的可计算属性名

在html中配合ES6的可计算属性名使用:

<div id="div">
    <input onclick="getTarget(event);" id="inputName" type="text" name="username" value="value1 is name" />
    <input onclick="getTarget(event);" id="inputWord" type="text" name="password" value="value2 is pass" />
</div>

function getTarget(event){
    let target = event.target;
    console.log(target);
    let name = target.name;
    let value = target.value;
    console.log(name);
    let person = {
        [name]: value
    }
    console.log(person[name]);
}

可以看到结果随着name变量的变化而变化。

所以在ES6中的解释为:

var prefix = 'test';
var obj = {
  [prefix + '1']: 'hello',
  [prefix + '2']: 'world',
}
obj['test1']; // hello
obj['test2']; // world