ES6知识小碎片

waterhydroxyl 发布于

ES6动态属性名

在ES5之前,如果属性名是个变量或者需要动态计算,则只能通过 对象.[变量名] 的方式去访问。

1
2
3
4
5
6
var p = {
name : '李四',
age : 20
}
var attName = 'name';
console.log(p[attName]) //这里 attName表示的是一个变量名。

而且这种动态计算属性名的方式 在字面量中 是无法使用的。

1
2
3
4
5
6
var attName = 'name';
var p = {
attName : '李四', // 这里的attName是属性名,相当于各级p定义了属性名叫 attName的属性。
age : 20
}
console.log(p[attName]) // undefined

在ES6中,把属性名用[ ]括起来,则括号中就可以引用提前定义的变量。

1
2
3
4
5
6
var attName = 'name';
var p = {
[attName] : '李四', // 引用了变量attName。相当于添加了一个属性名为name的属性
age : 20
}
console.log(p[attName]) // 李四
1
2
3
4
5
6
7
8
9
10
var name = 'name'
var me = {
['first' + name]: 'hello',
['last' + name]: 'world'
}
console.log(me) //{firstname: "hello", lastname: "world"}
//使用方括号取对象属性,跟使用 . 是一样的
console.log(me['first'+name]) // hello
console.log(me['lastname']) //world
console.log(me.firstname + me.lastname) //helloworld

在React使用受控组件实例中,通过输入框的onChange事件进行操作的时候就需要到方括号讲计算属性名括起来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export default class App extends PureComponent {
constructor(props) {
super(props);

this.state = {
username: "",
}
}

render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<label htmlFor="username">
用户:
<input type="text"
id="username"
name="username"
onChange={e => this.handleChange(e)}
value={this.state.username}/>
</label>
</form>
</div>
)
}

handleChange(event) {
this.setState({
// 计算属性名
[event.target.name]: event.target.value
})
}
}