js中获取对象属性的两种方法和区别

一、两种方法

获取JS对象中的属性值有两种方法，一个是使用.，一个是使用[]。

let JZ={
	name:'二狗',
	age:18,
	sayHi(){
		console.log("hello")
	}
}
// 使用.获取
console.log(JZ.name) // ‘'二狗'’
console.log(JZ.age)  // 18

// 使用[]获取
console.log(JZ["name"]) // ‘'二狗'’
console.log(JZ["age"])  // 18

二、区别
对象的存储时键值对形式的存储，一般情况下[]适用于任何形式的取值，但是.并不一定适用于所有的情况，下边介绍两种情况的区别。
1.当所取的属性名是一个动态的值时，只能用[]不能用.

动态的变量作为属性访问只能用中括号

2.当所取得键名是一个特殊的字符串时，只能用[]不能用.
什么是特殊：当键名试一下情况下，键名是一个含有数字的字符串；当键名有特殊符号时；当键值是一个引号引起来的字符串时。

let person = {
	name : '饺子',
	age : 18,
	//以下属加引号是为了将其视为整体，两种访问方式区别情况2也体现在这
	"123":"chinese", 
	"my-job" : "我的工作，中间是连字符",
	"my word" : "我的，中间含有一个空格",
	say(){
		console.log(this.name+"年龄是:" + this.age);
	} 
};

// 两种方式都可以访问属性和方法
console.log(person.name) 
console.log(person.age)
person.say()

console.log(person["name"])
console.log(person["age"])
person["say"]()

// 区别1：动态变量作为属性
// 这里定义一个myName,值为对象属性中的一个键名，在这里是直接定义的，但是在开发环境中可能是接手的其他的可变化的值
let myName = "name"
console.log(person.myName)		// undefined，使用.访问，不会取出myName的值，会在person对象上查找键名为"myName"的属性值，因为没有所以肯定也找不到了
console.log(person[myName])		// zhangsan，使用[]访问，中括号访问会把动态变量转换为实际的变量,这里就相当于person[name]

//区别2：特殊字符
//console.log(person.123)		// 报错
//console.log(person.my-job)	// 报错
//console.log(person[name])	    // undefined
//console.log(person.my word)	// 报错
console.log(person[123])		// undefined
console.log(person["123"])		// chinese，注意只有合理的数字才能省略引号
console.log(person["my-job"])   // 我的工作，中间是连字符
console.log(person["my word"])  // 我的，中间含有一个空格