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

今天这篇文章给大家总结一下我们日常开发中一些常用的Object的操作方法，希望可以对各位有所帮助。

01、JavaScript对象有两种类型

Native：在ECMAScript标准中定义和描述，包括JavaScript内置对象（数组，日期对象等）和用户自定义对象；

Host：在主机环境（如浏览器）中实现并提供给开发者使用，比如Windows对象和所有的DOM对象；

02、创建对象并添加成员

最简单的方法（即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 } }

03、访问对象属性

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"

04、删除对象属性

利用关键字 delete

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

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

05、作为函数参数

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

06、枚举对象的属性

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

for in: 会遍历对象中所有的可枚举属性（包括自有属性和继承属性）

Object.keys(): 会返回一个包括所有的可枚举的自有属性的名称组成的数组

Object.getOwnPropertyNames(): 会返回自有属性的名称 （不管是不是可枚举的）

1)、 for...in 会遍历对象中所有的可枚举属性（包括自有属性和继承属性）

const obj = {
    itemA: 'itemA',
    itemB: 'itemB'
}

// 使用Object.create创建一个原型为obj的对象 （模拟继承来的属性）
var newObj = Object.create(obj) 

n