Appearance
八、补充
不知道是ES几
38、对象计算属性
我们经常碰到这样的问题,无论是在微信小程序还是React中,我们需要根据某个条件去修改某个数据
js
if (type === 'boy') {
this.setData({
boyName: name
})
} else if (type === 'girl') {
this.setData({
girlName: name
})
}
我也不知道这个新特性叫啥,我就自己取名叫属性动态属性
哈哈哈
js
this.setData({
[`${type}Name`]: name
})
39、Symbol
应用场景1:使用Symbol来作为对象属性名
平常我们对象的属性都是字符串
js
const obj = {
name: 'Sunshine_Lin',
age: 23
}
console.log(obj['name']) // 'Sunshine_Lin'
console.log(obj['age']) // 23
其实也可以用Symbol来当做属性名
js
const gender = Symbol('gender')
const obj = {
name: 'Sunshine_Lin',
age: 23,
[gender]: '男'
}
console.log(obj['name']) // 'Sunshine_Lin'
console.log(obj['age']) // 23
console.log(obj[gender]) // 男
但是Symbol作为属性的属性不会被枚举出来,这也是JSON.stringfy(obj)
时,Symbol属性会被排除在外的原因
js
console.log(Object.keys(obj)) // [ 'name', 'age' ]
for(const key in obj) {
console.log(key) // name age
}
console.log(JSON.stringify(obj)) // {"name":"Sunshine_Lin","age":23}
其实想获取Symbol属性也不是没办法。
js
// 方法一
console.log(Object.getOwnPropertySymbols(obj)) // [ Symbol(gender) ]
// 方法二
console.log(Reflect.ownKeys(obj)) // [ 'name', 'age', Symbol(gender) ]
应用场景2:使用Symbol来替代常量
有以下场景
js
// 赋值
const one = 'oneXin'
const two = 'twoXin'
function fun(key) {
switch (key) {
case one:
return 'one'
break;
case two:
return 'two'
break;
}
}
如果变量少的话还好,但是变量多的时候,赋值命名很烦,可以利用Symbol的唯一性
js
const one = Symbol()
const two = Symbol()
应用场景3:使用Symbol定义类的私有属性
以下例子,PASSWORD属性无法在实例里获取到
js
class Login {
constructor(username, password) {
const PASSWORD = Symbol()
this.username = username
this[PASSWORD] = password
}
checkPassword(pwd) { return this[PASSWORD] === pwd }
}
const login = new Login('123456', 'hahah')
console.log(login.PASSWORD) // 报错
console.log(login[PASSWORD]) // 报错
console.log(login[PASSWORD]) // 报错