详细讲一讲 JavaScript中对象的常用方法

这篇文章非常的重要和干货,基础对于很多人来说都是不重视的点,可往往更应该重视,在大厂中基础比一切都重要,好好看完这篇文章,你一定会收获满满!

1.Object.keys() - 获取对象的所有键:

javascript 复制代码
const user = {
    name: 'John',
    age: 30,
    city: 'New York'
}

// 获取所有键名
const keys = Object.keys(user)
console.log(keys)  // ['name', 'age', 'city']

// 实际应用:遍历对象
Object.keys(user).forEach(key => {
    console.log(`${key}: ${user[key]}`)
})

2.Object.values() - 获取对象的所有值:

javascript 复制代码
const user = {
    name: 'John',
    age: 30,
    city: 'New York'
}

// 获取所有值
const values = Object.values(user)
console.log(values)  // ['John', 30, 'New York']

// 实际应用:计算总和
const prices = {
    apple: 1,
    banana: 2,
    orange: 3
}
const total = Object.values(prices).reduce((sum, price) => sum + price, 0)

3.Object.entries() - 获取键值对数组:

javascript 复制代码
const user = {
    name: 'John',
    age: 30
}

// 转换为键值对数组
const entries = Object.entries(user)
console.log(entries)  // [['name', 'John'], ['age', 30]]

// 实际应用:转换为 Map
const userMap = new Map(Object.entries(user))

// 遍历键值对
Object.entries(user).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
})

4.Object.assign() - 合并对象:

javascript 复制代码
// 基础合并
const target = { a: 1 }
const source = { b: 2 }
Object.assign(target, source)
console.log(target)  // { a: 1, b: 2 }

// 多个源对象
const result = Object.assign({}, 
    { a: 1 }, 
    { b: 2 }, 
    { b: 3 }  // 后面的会覆盖前面的
)
console.log(result)  // { a: 1, b: 3 }

// 实际应用:克隆对象
const clone = Object.assign({}, original)

// 注意:这是浅拷贝

5.Object.freeze() - 冻结对象:

javascript 复制代码
const user = {
    name: 'John',
    age: 30
}

// 冻结对象
Object.freeze(user)

// 尝试修改会失败(严格模式下会报错)
user.name = 'Jane'  // 无效
delete user.age     // 无效
user.newProp = 'test'  // 无效

// 检查是否冻结
console.log(Object.isFrozen(user))  // true

// 注意:只冻结一层
const nested = {
    user: {
        name: 'John'
    }
}
Object.freeze(nested)
nested.user.name = 'Jane'  // 仍然可以修改嵌套对象

6.Object.seal() - 密封对象:

javascript 复制代码
const user = {
    name: 'John',
    age: 30
}

// 密封对象
Object.seal(user)

// 可以修改现有属性
user.name = 'Jane'  // 有效

// 但不能添加或删除属性
delete user.age     // 无效
user.newProp = 'test'  // 无效

// 检查是否密封
console.log(Object.isSealed(user))  // true

7.hasOwnProperty() - 检查自有属性:

javascript 复制代码
const user = {
    name: 'John'
}

// 检查属性是否属于对象本身
console.log(user.hasOwnProperty('name'))  // true
console.log(user.hasOwnProperty('toString'))  // false

// 安全的检查方式
const has = Object.prototype.hasOwnProperty.call(user, 'name')

8.Object.defineProperty() - 定义属性:

javascript 复制代码
const user = {}

// 定义属性
Object.defineProperty(user, 'name', {
    value: 'John',
    writable: true,     // 是否可写
    enumerable: true,   // 是否可枚举
    configurable: true  // 是否可配置
})

// 定义访问器属性
Object.defineProperty(user, 'fullName', {
    get() {
        return `${this.firstName} ${this.lastName}`
    },
    set(value) {
        [this.firstName, this.lastName] = value.split(' ')
    }
})

9.Object.create() - 创建对象:

javascript 复制代码
// 创建具有指定原型的对象
const person = {
    sayHi() {
        console.log('Hi!')
    }
}

const user = Object.create(person, {
    name: {
        value: 'John',
        writable: true
    }
})

user.sayHi()  // 继承的方法

10.解构和展开运算符:

javascript 复制代码
const user = {
    name: 'John',
    age: 30,
    city: 'New York'
}

// 解构赋值
const { name, age } = user

// 重命名
const { name: userName } = user

// 默认值
const { country = 'USA' } = user

// 展开运算符
const clone = { ...user }

// 合并对象
const merged = { ...obj1, ...obj2 }
相关推荐
JustHappy18 分钟前
古法编程秘籍(七):互联网到底是什么?把两台电脑怎么说话搞懂就够了
前端·后端·网络协议
老毛肚22 分钟前
jeecg-boot-base-core 02 day
javascript·python
snow@li22 分钟前
SEO-文章标题:写文章时候,分类+主标题+大纲+解释 作为标题 / 不点进去也知道全文覆盖什么 / 标题即架构
前端
yaoxin52112328 分钟前
434. Java 日期时间 API - Period 基于日期的时间段
java·开发语言·python
凡人叶枫1 小时前
Effective C++ 条款30:透彻了解 inlining 的里里外外
linux·开发语言·c++·嵌入式开发·effective c++
学逆向的1 小时前
C++纯虚函数
开发语言·c++·网络安全
kyriewen1 小时前
Git Commit 前自动修复代码风格?配置 Husky + lint-staged,从此 CR 只聊逻辑
前端·git·面试
小和尚同志2 小时前
AI 自动化测试探索(一):Playwright MCP
前端·人工智能·aigc
程序员二叉2 小时前
【JUC】ThreadLocal底层原理|内存泄漏|弱引用|跨线程传递方案
java·开发语言·面试·职场和发展·juc
程序员二叉2 小时前
【JUC】线程池全套深度详解|参数|流程|拒绝策略|调优|异常处理
java·开发语言·jvm·算法·面试·juc