JavaScript日常开发中常用的Object操作方法

本文内容：

1. 介绍对象的两种类型
2. 创建对象并添加属性
3. 访问对象属性
4. 删除对象属性
5. 作为函数参数
6. 枚举对象的属性
7. 数据类型检测
8. Object常用的API

一、JavaScript对象有两种类型

1. Native：在ECMAScript标准中定义和描述，包括JavaScript内置对象（数组，日期对象等）和用户自定义对象；
2. Host：在主机环境（如浏览器）中实现并提供给开发者使用，比如Windows对象和所有的DOM对象；

二、创建对象并添加成员

最简单的方法（即Object Literal，对象字面变量），之后便可以向它添加属性。

字面量：字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字面量。

// 1. 创建空对象后，在添加属性
const obj = { }
obj.uname = 'dengke'
obj.fn = () => {
    console.log('ggg')
}
console.log(obj) // { uname: 'dengke', fn: ƒ }

// 2. 创建对象并且直接添加属性 (常用)
const obj1 = {
    uname：'dengke',
    fn: () => {
        console.log('ggg')
    }
}
console.log(obj1) // { uname: "dengke", fn: ƒ }
复制代码
复制代码

补充

• 扩展运算符（spread）是三个点（…）也可以创建对象（返回一个新对象），注意这是一个浅拷贝

const obj = { name: 'dengke' }
const obj1 = { 
    age: 18,
    temp: {
        a: 10
    }
}

const obj2 = { ...obj, ...obj1 }
console.log(obj2) // { name: 'dengke', age: 18, temp: { a: 10 } }

obj2.temp.a = 20
console.log(obj2) // { name: 'dengke', age: 18, temp: { a: 20 } }
console.log(obj1) // { name: 'dengke', age: 18, temp: { a: 20 } }
复制代码
复制代码

三、访问对象属性

const obj = {\
    info: 'wakaka',\
    inner: {\
        a: 10,\
        b: 20\
    },\
    arr: [1, 2],\
    sayHi: (name) => {\
        console.log(`hi,${name}`)\
    }\
}\
\
// 用 dot(点 .) 的方式访问\
console.log(obj.info) // wakaka\
console.log(obj.inner) // {"a":10,"b":20}\
console.log(obj.arr) // [1,2]\
obj.sayHi('dengke') // hi,dengke\
\
// 用 [] 的方式访问\
console.log(obj['info']) // wakaka\
console.log(obj['inner']) // {"a":10,"b":20}\
console.log(obj['arr']) // [1,2]\
obj['sayHi']('dengke') // hi,dengke
复制代码

• 如果要访问的对象不存在，可以使用 逻辑运算符 || 指定默认值

只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。

只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

console.log(obj.age || 18) // 18
复制代码

• 很多时候，我们想根据这个值是否为空来做接下来的操作，可以使用空值运算符 (??)  （es11）

有一个冷门运算符??可以判断undefined和null，这样是比较符合普遍需求的。

const age = 0 
const a = age ?? 123 
console.log(a) // 0
复制代码

• 可选链式操作符（?.）  （es11）

这是当对象上没有这个键的时候，不会报错，而是赋值undefined

const foo = { name: "zengbo" } 
let a = foo.name?.toUpperCase() // "ZENGBO" 
let b = foo.name?.firstName?.toUpperCase() // "undefined"
复制代码

四、删除对象属性

1. 利用关键字 `delete`
   复制代码

const o = {
    p: 10,
    m: 20
}

delete o.p
console.log(o) // { m: 20 }
// 删除对象的属性后，在访问返回 undefined
console.log(o.p) // undefined
复制代码

五、作为函数参数

const displayPerson = (person) => {
    console.log(`name: ${person.name || '无名氏'}`)
     console.log(`age: ${person['age'] || 0}`)
}

displayPerson({ name: 'dengke', age: 18 })
// name: dengke
// age: 18

displayPerson({ })
// name: 无名氏
// age: 0
## 六、枚举对象的属性

在JS里面枚举对象属性一共有三种方法：

1.  for in: 会遍历对象中所有的可枚举属性（包括自有属性和继承属性）
1.  Object.keys(): 会返回一个包括所有的可枚举的自有属性的名称组成的数组
1.  Object.getOwnPropertyNames(): 会返回自有属性的名称 （不管是不是可枚举的）

**1. `for...in`** 会遍历对象中**所有的可枚举属性**（包括自有属性和继承属性）```
复制代码