JS 对象的基本用法 Note-FrontEnd-13JS 对象的基本用法，内容包括对象的概念、删除对象的属性、查看对象

JS 对象的基本用法，内容包括对象的概念、删除对象的属性、查看对象的属性、修改或增加对象的属性、修改或增加共有属性、一个问题。

一、对象的概念

对象 -- object 是第七种数据类型，唯一一种复杂类型，可以包含其他六种类型

1. 定义

无序的数据集合，键值对的集合

2. 如何声明对象

两种方式

let obj = { 'name': 'XinyuanJieYi', 'age': 18 }
let obj = new Object({'name': 'XinyuanJieYi', 'age': 18 })

3. 一些细节

键值对是字符串，不是标识符，可以包含任意字符
引号可省略，省略之后就只能按照标识符的规则来写（数字好像特殊）
就算引号省略了，键名也还是字符串（重要）
属性名 -- 每个 key 都是对象的属性名（property）
属性值 -- 每个 value 都是对象的属性值

4. 奇怪的属性名

1. JS 的骚操作 -- 数字变字符串的变法

let obj = {
    1:'a',
    3.2: 'b',
    1e2: true,
    1e-2: true,
    .234: true,
    0xFF: true
};

Object.keys(obj)
=>["1","100","255","3.2","0.01","0.234"]

JS 会自己换算数字再变字符串，所以加引号是最安全的

2. 变量作属性名

let p1 = 'name'
let obj = { p1 : 'XinYuanJieYi' }  // 这样写，属性名为 'p1'
let obj = { [p1]: 'XinYuanJieYi' }  // 这样写，属性名为 'name'

二、如何删除对象的属性

delete obj.xxx或delete obj['xxx'] 即可删除 obj 的 xxx 属性

'xxx' in obj === false 可以判断不含属性名

obj.xxx === undefined 无法判断是否含属性名，可能有也可能没有

三、如何查看对象的属性

1. 查看所有属性的方法

Object.keys(obj)可以查看自身所有属性

console.dir(obj)可以查看自身 + 共有属性

obj.hasOwnProperty('toString')可以判断一个属性是自身的还是共有的

2. 查看自身属性的方法

中括号语法：obj['key']
点语法：obj.key

优先使用中括号语法，点语法容易误导，让你以为 key 不是字符串

3. 两个例子

obj.name 等价于 obj['name']
obj.name 不等价于 obj[name]
简单来说，这里的 name 是字符串，而不是变量

let name = 'XinYuanJieYi'
obj[name] 等价于 obj['XinYuanJixYi']
而不是 obj['name'] 和 obj.name

四、如何修改或增加对象的属性

1. 直接赋值

let obj = {name: 'fank'}  // name 是字符串
obj.name = 'frank'  // name 是字符串
obj ['name']
obj[ name] =  'frank'  // 错，因为 name 值不确定
obj['na' + 'me'] = 'frank'
let key = 'name'; obj[key] = 'frank'
let key = 'name'; obj.key = 'frank' // 错
因为 obj.key 等价于 obj['key']

2. 批量赋值

Object.assign(obj, {age: 18,gender: 'woman'})

五、修改或增加共有属性

1. 不推荐使用 proto

let obj = {name: 'XinYuanJieYi'}
let obj2 = {name: 'QiaoBenHuanNai'}
let common = {kind: 'human'}
obj.__proto__ = common
obj2.proto__ = common

2. 推荐使用 Object.create

let obj = Object.create(common)
obj.name = 'XinYuanJieYi'
let obj2 = Object.create(common)
obj2.name = 'QiaoBenHuanNai'

六、一个问题

问：'name' in obj和obj.hasOwnProperty('name')的区别

答：'name' in obj是判断'name'在自身属性或共有属性有没有

obj.hasOwnProperty('name')是判断'name'是否是自身属性