Object常用的方法及开发中的使用场景

news/2025/1/19 3:22:03/

前端开发中,Object 对象提供了许多常用的方法,这些方法帮助我们操作对象的属性和结构。以下是常用的 Object 方法及其功能简要说明:


对象常用的方法

1. 创建对象

  • Object.create(proto[, propertiesObject])
    创建一个具有指定原型对象和属性的新对象。

    javascript">const proto = { greet: () => "Hello" };
    const obj = Object.create(proto);
    console.log(obj.greet()); // "Hello"
    
  • Object.assign(target, ...sources)
    将一个或多个源对象的属性拷贝到目标对象中。

    javascript">const target = { a: 1 };
    const source = { b: 2 };
    Object.assign(target, source);
    console.log(target); // { a: 1, b: 2 }
    

2. 操作属性

  • Object.keys(obj)
    返回对象的所有可枚举属性名的数组。

    javascript">const obj = { a: 1, b: 2 };
    console.log(Object.keys(obj)); // ["a", "b"]
    
  • Object.values(obj)
    返回对象的所有可枚举属性值的数组。

    javascript">const obj = { a: 1, b: 2 };
    console.log(Object.values(obj)); // [1, 2]
    
  • Object.entries(obj)
    返回对象的键值对数组,每个元素为 [key, value]

    javascript">const obj = { a: 1, b: 2 };
    console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]
    
  • Object.fromEntries(entries)
    将键值对数组转换为对象。

    javascript">const entries = [["a", 1], ["b", 2]];
    const obj = Object.fromEntries(entries);
    console.log(obj); // { a: 1, b: 2 }
    

3. 属性描述符

  • Object.defineProperty(obj, prop, descriptor)
    为对象添加或修改属性,使用属性描述符来设置配置。

    javascript">const obj = {};
    Object.defineProperty(obj, "name", {value: "John",writable: false,configurable: false,
    });
    console.log(obj.name); // "John"
    obj.name = "Doe"; // 无法修改
    
  • Object.defineProperties(obj, props)
    同时定义多个属性及其描述符。

    javascript">const obj = {};
    Object.defineProperties(obj, {name: { value: "John", writable: true },age: { value: 30, writable: false },
    });
    console.log(obj); // { name: "John", age: 30 }
    
  • Object.getOwnPropertyDescriptor(obj, prop)
    获取对象某个属性的描述符。

    javascript">const obj = { a: 1 };
    console.log(Object.getOwnPropertyDescriptor(obj, "a"));
    // { value: 1, writable: true, enumerable: true, configurable: true }
    
  • Object.getOwnPropertyDescriptors(obj)
    获取对象所有属性的描述符。

    javascript">const obj = { a: 1, b: 2 };
    console.log(Object.getOwnPropertyDescriptors(obj));
    

4. 检查属性

  • Object.hasOwn(obj, prop)
    判断对象是否有指定的自身属性(不包括原型链)。

    javascript">const obj = { a: 1 };
    console.log(Object.hasOwn(obj, "a")); // true
    console.log(Object.hasOwn(obj, "b")); // false
    
  • Object.is(value1, value2)
    比较两个值是否严格相等,类似 ===,但处理 NaN+0/-0 更精确。

    javascript">console.log(Object.is(NaN, NaN)); // true
    console.log(Object.is(0, -0)); // false
    

5. 冻结、密封和扩展性

  • Object.freeze(obj)
    冻结对象,防止修改和扩展。

    javascript">const obj = { a: 1 };
    Object.freeze(obj);
    obj.a = 2; // 不起作用
    
  • Object.seal(obj)
    防止对象新增或删除属性,但允许修改现有属性的值(属性必须是 writable 的)。

    javascript">const obj = { a: 1 };
    Object.seal(obj);
    obj.b = 2; // 无法添加新属性
    obj.a = 2; // 可以修改现有属性
    
  • Object.isFrozen(obj)
    判断对象是否被冻结。

    javascript">const obj = Object.freeze({ a: 1 });
    console.log(Object.isFrozen(obj)); // true
    
  • Object.isSealed(obj)
    判断对象是否被密封。

    javascript">const obj = Object.seal({ a: 1 });
    console.log(Object.isSealed(obj)); // true
    
  • Object.preventExtensions(obj)
    阻止对象添加新属性,但允许修改或删除现有属性。

    javascript">const obj = { a: 1 };
    Object.preventExtensions(obj);
    obj.b = 2; // 无法添加新属性
    delete obj.a; // 可以删除现有属性
    
  • Object.isExtensible(obj)
    判断对象是否可扩展。

    javascript">const obj = {};
    console.log(Object.isExtensible(obj)); // true
    

6. 原型操作

  • Object.getPrototypeOf(obj)
    获取对象的原型。

    javascript">const obj = {};
    console.log(Object.getPrototypeOf(obj)); // {}
    
  • Object.setPrototypeOf(obj, prototype)
    设置对象的原型。

    javascript">const obj = {};
    const proto = { greet: "Hello" };
    Object.setPrototypeOf(obj, proto);
    console.log(obj.greet); // "Hello"
    

这些方法在操作对象时非常实用,可以帮助你轻松实现对象的创建、遍历、属性管理和扩展控制等功能。


开发中的常见使用场景

以下是 Object 常用方法结合开发中的实际使用场景的说明:

1. 数据拷贝和合并

方法:Object.assign
场景: 在开发中,经常需要合并多个对象的配置,如默认配置与用户自定义配置的合并。

javascript">const defaultConfig = { theme: "light", lang: "en" };
const userConfig = { lang: "zh" };
const finalConfig = Object.assign({}, defaultConfig, userConfig);
console.log(finalConfig); // { theme: "light", lang: "zh" }

2. 数据筛选

方法:Object.keysObject.valuesObject.entries
场景: 筛选出对象中符合条件的键或值。例如,筛选出用户信息中有值的字段,用于提交表单。

javascript">const formData = { name: "Alice", age: 25, email: "" };
const validFields = Object.entries(formData).filter(([key, value]) => value);
console.log(validFields); // [["name", "Alice"], ["age", 25]]

3. API 数据处理

方法:Object.fromEntries
场景: 后端返回的数组形式数据需要转换为对象形式便于前端使用。

javascript">const apiResponse = [["name", "Alice"], ["age", 25]];
const userData = Object.fromEntries(apiResponse);
console.log(userData); // { name: "Alice", age: 25 }

4. 数据校验

方法:Object.hasOwn
场景: 检查对象中是否存在某个属性,避免因访问未定义的属性导致错误。

javascript">const user = { name: "Alice", age: 25 };
if (Object.hasOwn(user, "age")) {console.log("Age is available"); // "Age is available"
}

5. 防止数据修改

方法:Object.freeze
场景: 在状态管理(如 Vuex、Redux)中,防止某些对象被意外修改。

javascript">const state = Object.freeze({ user: "Alice" });
state.user = "Bob"; // 无效操作,状态无法被修改

6. 限制对象属性

方法:Object.seal
场景: 禁止对象新增或删除属性,但允许修改现有属性值。例如,用于控制特定配置项。

javascript">const config = Object.seal({ theme: "dark", lang: "en" });
config.theme = "light"; // 修改成功
delete config.lang; // 无法删除属性

7. 防止扩展对象

方法:Object.preventExtensions
场景: 防止向对象中添加新属性,用于数据结构的保护。

javascript">const user = Object.preventExtensions({ name: "Alice" });
user.age = 25; // 无法添加新属性

8. 深入操作属性

方法:Object.defineProperty
场景: 自定义对象的属性行为,例如创建一个只读属性。

javascript">const user = {};
Object.defineProperty(user, "name", {value: "Alice",writable: false,configurable: false,
});
user.name = "Bob"; // 修改无效
console.log(user.name); // "Alice"

9. 原型继承

方法:Object.create
场景: 创建带有特定方法或属性的对象,常用于简单的原型继承。

javascript">const proto = { greet: () => "Hello" };
const user = Object.create(proto);
console.log(user.greet()); // "Hello"

10. 检查对象扩展性

方法:Object.isExtensibleObject.isSealedObject.isFrozen
场景: 在严格模式下,检查某对象是否可以修改,用于调试和保护数据完整性。

javascript">const config = Object.freeze({ theme: "light" });
console.log(Object.isFrozen(config)); // true

11. 数据格式化

方法:Object.entries
场景: 将对象转为键值对数组,方便用于表格、日志记录等操作。

javascript">const user = { name: "Alice", age: 25 };
console.table(Object.entries(user)); 
// 输出表格形式

12. 比较数据的精确相等性

方法:Object.is
场景: 比较特殊值的相等性(例如 NaN+0/-0),通常在算法验证中使用。

javascript">console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(0, -0)); // false

总结:

Object 的方法在实际开发中涉及数据拷贝、筛选、转换、防护以及属性控制等核心场景。掌握这些方法不仅能提高代码的可读性,还能有效避免数据操作中的潜在问题。


http://www.ppmy.cn/news/1564297.html

相关文章

linux 下 Doris 单点部署

目录 1. Doris 下载 2. 环境准备 2.1 Linux 操作系统版本需求 2.2 部署依赖 3. Doris 部署 3.1 修改系统配置 3.1.1 修改系统句柄数 3.1.2 关闭swap分区 3.1.3 修改最大内存映射区域数量 3.2 开放端口 3.3 fe 部署 3.4 be 部署 3.5 be添加到Doris集群 4 验证 4.…

【机器学习:二十、拆分原始训练集】

1. 如何改进模型 模型的改进需求 在机器学习任务中,模型性能的提升通常受限于训练数据、模型架构、优化方法及超参数设置等。模型改进的目标是在测试数据上表现更优,避免过拟合或欠拟合。 常见的改进方向 增大训练数据集:通过数据增强或获…

阿里云轻量应用服务器全新升级,通用型实例峰值带宽高达200Mbps

火伞云1月13日消息,阿里云推出首款全新升级的轻量应用服务器“通用型实例”。新的服务器实例面向中小企业和开发者创新设计,升级支持4vCPU实例规格满足更多通用计算小算力场景需求,标配200Mbps峰值带宽可有效应对突发业务流量,同时…

Vue.js组件开发-如何实现表头搜索

在Vue.js组件开发中,实现表头搜索通常涉及在表格组件的表头添加输入框,并让用户能够输入搜索关键字来过滤表格数据。 以下是一个使用Element UI的el-table组件实现表头搜索的示例: 一、准备阶段 ‌确保Element UI已安装‌: 确保…

第8篇:从入门到精通:掌握Python异常处理

第8篇:异常处理 内容简介 本篇文章将深入探讨Python中的异常处理机制。您将学习异常的基本概念与类型,掌握使用try-except块处理异常的方法,了解finally语句的作用,以及如何抛出和定义自定义异常。通过丰富的代码示例&#xff0…

OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数,它基于已知的相机参数和相对位置&am…

iOS - 内存屏障的使用场景

内存屏障的使用是为了解决以下几个关键问题: 1. CPU 乱序执行 // 没有内存屏障时,CPU 可能乱序执行 void example() {// 这两行代码可能被 CPU 重排序a 1; // 操作1flag true; // 操作2 }// 使用内存屏障确保顺序 void safeExample() {a 1;…

Mac上安装Label Studio

在Mac上安装Anaconda并随后安装Label Studio,可以按照以下步骤进行: 1. 在Mac上安装Anaconda 首先,你需要从Anaconda的官方网站下载适用于Mac的安装程序。访问Anaconda官网,点击“Download Anaconda”按钮,选择适合M…