点运算符和括号运算符的区别

前言：点操作符obj.prop和口号操作符obj[prop]都能够用来访问对象的属性或者方法，但是他们在使用的过程中有不一样的的地方。

最大的区别：点运算符点只能接受字面量的成员的名字，不接受表示名称的变量。而括号运算符既可以接受字面量，表示名称的变量，还可以接受能够转化为字符串的表达式。

提问1：什么是点运算符能够接受的字面量呢？

const person = {
	name: "zhangsan",
    age: 20
}

像上面这样的类型就属于对象字面量，是我们直接定义属性和值写出来的，而不是从某个类中实例化出来的。

这个时候用person.name和person[name]都能够访问到"zhangsan"这个值。

但是当我们要访问的属性或函数的名称是一个变量的时候，该怎么办呢？比如下面的情况：

const person = {
    name: "wsw",
    age: 20
}
function callPerson(personName) {
    console.log(person[personName] + "别睡了，起来嗨！");
    // 这个时候就不能用 person.name 了吧~
}
callPerson("name");  // wsw别睡了，起来嗨！

除此之外，还可以这样使用括号运算符来实现键值的添加：

const key = "color";
const value = "pink";
favorite[key] = value;

提问2：为什么括号运算符就可以通过变量或表达式来访问值呢？

其实括号运算符中的personName最终也是通过js引擎转化为字符串，因为对象的属性名在存储中通常就是以字符串的形式。括号运算符能够接受转化成字符串的变量和表达式，而点运算符只能访问已经在程序中写好的属性值。

小声议论：既然括号运算符看起来比点运算符强大，那为什么大家经常使用点运算符呢？

因为它看起来更简洁易读呀，可以用点运算符的话我也不想用括号运算符哇~