对象取值.和[]的区别

在学习ts过程中 使用泛型加上keyof约束对象的属性类型时  发现了传入泛型的方法不能直接使用obj.xxx来读取对象的属性 但是obj[xxx]的方式可以  如下图 👇

 首先先明确一下定义

在js中 可以使用obj.xxx和obj[xxx]的方式访问对象的属性

但是如果访问对象的方法 就只能使用obj.xxx的方式

如果我们取的值是一个静态值 那么通常使用obj.xxx 但是如果是动态属性 那么obj[xxx]更好

如下图👇

 如图 他们都能获取到对象中的值

但是不同的是： 

[ ]运算符可以使用字符串变量的内容作为属性名，点运算符不能

[ ]运算符可以用纯数字作为属性名，点运算符不能

[ ]运算符可以用js关键字和保留字作为属性名，点运算符不能

总结：obj.xxx适合直接访问对象中的静态属性 因为obj.xxx会直接去对象中寻找xxx属性 并不会读取变量

let object = {
    name: 'zzz',
    age: 18
}
let value = 'name'
// console.log(object.value);  //报错
console.log(object[value]);  //读取到了

总之 对于常量可以直接使用obj.xxx的方式来进行访问修改   对于其他形式 比如数字作为键名或者通过变量转换键名的方式的 可以用obj[xxx]的方式来进行访问