js对象属性通过“.”和“[ ]”访问的区别

在JavaScript中，可以使用两种方式来访问和操作对象的属性：使用方括号([])和点(.)运算符。

• (.) 点操作符: 静态的。右侧必须是一个以属性名称命名的简单标识符。属性名用一个标识符来表示。标识符必须直接出现在js程序中，它们不是数据类型，因此程序无法修改它们。

• ([]) 中括号操作符: 动态的。方括号里必须是一个计算结果为字符串的表达式，属性名通过字符串表示。字符串是js的数据类型，在程序运行时可以修改和创建它们。

obj.name
obj['name']

区别

1. []可以使用变量作为属性名来进行访问，.不可以

   const obj={}
   obj.name='lili'
   const myName='bob'
   ​
   console.log(obj[myName])  //bob
   console.log(obj.myName) //undefined
   

2. []通过字符串访问时，需要加双引号

   console.log(obj["name"])  //lili
   console.log(obj.name) //lili
   

3. []可以用数字作为属性名，.不可以

   const obj={}
   obj[1]=1
   ​
   console.log(obj[1]) //1
   console.log(obj.1)  //unexpected number
   console.log(obj) //{2:2}
   

4. []可以动态访问属性，可以在程序运行时创建、获取和修改属性，.则不行

   (这也是上周踩的一个坑)

   const drinks={}
   const fruit=['apple','banana','orange']
   ​
   for(let i=0;i<3;i++){
       drinks["fruit"+i]=fruit[i]
   }
   ​
   console.log(drinks) //{fruit0:'apple',fruit1:'banana',fruit2:'orange'}
   

5. []中属性名可以使用空格、关键字、保留字

   const drink={}
   drink['first name']='li'
   ​