Object常用的方法及开发中的使用场景
在前端开发中,Object 对象提供了许多常用的方法,这些方法帮助我们操作对象的属性和结构。以下是常用的 Object 方法及其功能简要说明:
对象常用的方法
1. 创建对象
-
Object.create(proto[, propertiesObject])
创建一个具有指定原型对象和属性的新对象。const proto = { greet: () => "Hello" }; const obj = Object.create(proto); console.log(obj.greet()); // "Hello" -
Object.assign(target, ...sources)
将一个或多个源对象的属性拷贝到目标对象中。const target = { a: 1 }; const source = { b: 2 }; Object.assign(target, source); console.log(target); // { a: 1, b: 2 }
2. 操作属性
-
Object.keys(obj)
返回对象的所有可枚举属性名的数组。const obj = { a: 1, b: 2 }; console.log(Object.keys(obj)); // ["a", "b"] -
Object.values(obj)
返回对象的所有可枚举属性值的数组。const obj = { a: 1, b: 2 }; console.log(Object.values(obj)); // [1, 2] -
Object.entries(obj)
返回对象的键值对数组,每个元素为[key, value]。const obj = { a: 1, b: 2 }; console.log(Object.entries(obj)); // [["a", 1], ["b", 2]] -
Object.fromEntries(entries)
将键值对数组转换为对象。const entries = [["a", 1], ["b", 2]]; const obj = Object.fromEntries(entries); console.log(obj); // { a: 1, b: 2 }
3. 属性描述符
-
Object.defineProperty(obj, prop, descriptor)
为对象添加或修改属性,使用属性描述符来设置配置。const obj = {}; Object.defineProperty(obj, "name", {value: "John",writable: false,configurable: false, }); console.log(obj.name); // "John" obj.name = "Doe"; // 无法修改 -
Object.defineProperties(obj, props)
同时定义多个属性及其描述符。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)
获取对象某个属性的描述符。const obj = { a: 1 }; console.log(Object.getOwnPropertyDescriptor(obj, "a")); // { value: 1, writable: true, enumerable: true, configurable: true } -
Object.getOwnPropertyDescriptors(obj)
获取对象所有属性的描述符。const obj = { a: 1, b: 2 }; console.log(Object.getOwnPropertyDescriptors(obj));
4. 检查属性
-
Object.hasOwn(obj, prop)
判断对象是否有指定的自身属性(不包括原型链)。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更精确。console.log(Object.is(NaN, NaN)); // true console.log(Object.is(0, -0)); // false
5. 冻结、密封和扩展性
-
Object.freeze(obj)
冻结对象,防止修改和扩展。const obj = { a: 1 }; Object.freeze(obj); obj.a = 2; // 不起作用 -
Object.seal(obj)
防止对象新增或删除属性,但允许修改现有属性的值(属性必须是writable的)。const obj = { a: 1 }; Object.seal(obj); obj.b = 2; // 无法添加新属性 obj.a = 2; // 可以修改现有属性 -
Object.isFrozen(obj)
判断对象是否被冻结。const obj = Object.freeze({ a: 1 }); console.log(Object.isFrozen(obj)); // true -
Object.isSealed(obj)
判断对象是否被密封。const obj = Object.seal({ a: 1 }); console.log(Object.isSealed(obj)); // true -
Object.preventExtensions(obj)
阻止对象添加新属性,但允许修改或删除现有属性。const obj = { a: 1 }; Object.preventExtensions(obj); obj.b = 2; // 无法添加新属性 delete obj.a; // 可以删除现有属性 -
Object.isExtensible(obj)
判断对象是否可扩展。const obj = {}; console.log(Object.isExtensible(obj)); // true
6. 原型操作
-
Object.getPrototypeOf(obj)
获取对象的原型。const obj = {}; console.log(Object.getPrototypeOf(obj)); // {} -
Object.setPrototypeOf(obj, prototype)
设置对象的原型。const obj = {}; const proto = { greet: "Hello" }; Object.setPrototypeOf(obj, proto); console.log(obj.greet); // "Hello"
这些方法在操作对象时非常实用,可以帮助你轻松实现对象的创建、遍历、属性管理和扩展控制等功能。
开发中的常见使用场景
以下是 Object 常用方法结合开发中的实际使用场景的说明:
1. 数据拷贝和合并
方法:Object.assign
场景: 在开发中,经常需要合并多个对象的配置,如默认配置与用户自定义配置的合并。
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.keys、Object.values、Object.entries
场景: 筛选出对象中符合条件的键或值。例如,筛选出用户信息中有值的字段,用于提交表单。
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
场景: 后端返回的数组形式数据需要转换为对象形式便于前端使用。
const apiResponse = [["name", "Alice"], ["age", 25]];
const userData = Object.fromEntries(apiResponse);
console.log(userData); // { name: "Alice", age: 25 }
4. 数据校验
方法:Object.hasOwn
场景: 检查对象中是否存在某个属性,避免因访问未定义的属性导致错误。
const user = { name: "Alice", age: 25 };
if (Object.hasOwn(user, "age")) {console.log("Age is available"); // "Age is available"
}
5. 防止数据修改
方法:Object.freeze
场景: 在状态管理(如 Vuex、Redux)中,防止某些对象被意外修改。
const state = Object.freeze({ user: "Alice" });
state.user = "Bob"; // 无效操作,状态无法被修改
6. 限制对象属性
方法:Object.seal
场景: 禁止对象新增或删除属性,但允许修改现有属性值。例如,用于控制特定配置项。
const config = Object.seal({ theme: "dark", lang: "en" });
config.theme = "light"; // 修改成功
delete config.lang; // 无法删除属性
7. 防止扩展对象
方法:Object.preventExtensions
场景: 防止向对象中添加新属性,用于数据结构的保护。
const user = Object.preventExtensions({ name: "Alice" });
user.age = 25; // 无法添加新属性
8. 深入操作属性
方法:Object.defineProperty
场景: 自定义对象的属性行为,例如创建一个只读属性。
const user = {};
Object.defineProperty(user, "name", {value: "Alice",writable: false,configurable: false,
});
user.name = "Bob"; // 修改无效
console.log(user.name); // "Alice"
9. 原型继承
方法:Object.create
场景: 创建带有特定方法或属性的对象,常用于简单的原型继承。
const proto = { greet: () => "Hello" };
const user = Object.create(proto);
console.log(user.greet()); // "Hello"
10. 检查对象扩展性
方法:Object.isExtensible、Object.isSealed、Object.isFrozen
场景: 在严格模式下,检查某对象是否可以修改,用于调试和保护数据完整性。
const config = Object.freeze({ theme: "light" });
console.log(Object.isFrozen(config)); // true
11. 数据格式化
方法:Object.entries
场景: 将对象转为键值对数组,方便用于表格、日志记录等操作。
const user = { name: "Alice", age: 25 };
console.table(Object.entries(user));
// 输出表格形式
12. 比较数据的精确相等性
方法:Object.is
场景: 比较特殊值的相等性(例如 NaN 和 +0/-0),通常在算法验证中使用。
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(0, -0)); // false
总结:
Object 的方法在实际开发中涉及数据拷贝、筛选、转换、防护以及属性控制等核心场景。掌握这些方法不仅能提高代码的可读性,还能有效避免数据操作中的潜在问题。
相关文章:
Object常用的方法及开发中的使用场景
在前端开发中,Object 对象提供了许多常用的方法,这些方法帮助我们操作对象的属性和结构。以下是常用的 Object 方法及其功能简要说明: 对象常用的方法 1. 创建对象 Object.create(proto[, propertiesObject]) 创建一个具有指定原型对象和属性…...
SQL2000在win10上安装的方法
安装前最好先关闭防火墙和一些杀毒软件,因为这些软件在安装过程中可能会碰到注册表等一下杀毒软件比较敏感的地带,如果违反杀毒软件的规则会被当做病毒强行终止删除 首相找到C盘下window文件中的sysWOW64文件 鼠标右键,点击属性、安全、高级 …...
Windows图形界面(GUI)-QT-C/C++ - QT 对话窗口
公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 目录 模态对话框 非模态对话框 文件对话框 基本概念 静态函数 常见属性 颜色对话框 基本概念 静态函数 常见属性 字体对话框 基本概念 静态函数 常见属性 输入对话框 基本概念 …...
Java语言的数据结构
Java语言中的数据结构 引言 在计算机科学中,数据结构是指一种特定的方式来组织和存储数据,以便能够高效地进行访问和修改。Java作为一种广泛使用的编程语言,其内置的数据结构和集合框架为程序员提供了便利的工具来管理数据。本文将深入探讨…...
【12】Word:张老师学术论文❗
目录 题目 NO2 NO3 NO4 NO5 NO6 NO7.8 题目 NO2 布局→页面设置→纸张:A4→页边距:上下左右边距→文档网格:只指定行网格→版式:页眉和页脚:页脚距边界:1.4cm居中设置论文页码:插入…...
大疆最新款无人机发布,可照亮百米之外目标
近日,DJI 大疆发布全新小型智能多光旗舰 DJI Matrice 4 系列,包含 Matrice 4T 和 Matrice 4E 两款机型。DJI Matrice 4E 价格为27888 元起,DJI Matrice 4T价格为38888元起。 图片来源:大疆官网 DJI Matrice 4E DJI Matrice 4T D…...
《小迪安全》学习笔记05
目录 读取: 写入: (其中的读取和写入时我认为比较重要的,所以单独做成了目录,这里的读取和写入是指在进行sql注入的时候与本地文件进行的交互) 好久没发博客了。。。从这篇开始的小迪安全学习笔记就开始…...
56_多级缓存实现
1.查询Tomcat 拿到商品id后,本应去缓存中查询商品信息,不过目前我们还未建立Nginx、Redis缓存。因此,这里我们先根据商品id去Tomcat查询商品信息。此时商品查询功能的架构如下图所示。 需要注意的是,我们的OpenResty是在虚拟机,Tomcat是在macOS系统(或Windows系统)上,…...
每日进步一点点(网安)
今日练习题目是PHP反序列化,也学习一下说明是序列化和反序列化 1.PHP序列化 序列化是指将数据结构或对象转换为可传输或可储存的格式的过程。这通常需要将数据转换为字节流或者其他编码格式,以便在不同系统和应用程序之间进行传输或存储 在PHP中&…...
宝塔php7.4安装报错,无法安装,php8以上可以安装,以下的不行,gd库什么的都正常
宝塔的依赖问题导致的问题,最后手动挂载后才解决。。。废了三天三夜终于搞好了。。。。无语~ 建议:不要一直升级宝塔版本,升级前备份或者开服务商的实例镜像,方便恢复,不然,可就GG了࿵…...
SDL2:PC端编译使用
SDL2:PC端编译使用 1. SDL2:PC端编译使用1.1 安装必要的依赖1.2 下载编译SDL21.3 SDL2使用示例:Audio1.4 运行示例程序 1. SDL2:PC端编译使用 1.1 安装必要的依赖 首先,确保安装了编译SDL2所需的依赖库: …...
Windows 蓝牙驱动开发-蓝牙设备栈
蓝牙设备栈 蓝牙驱动程序堆栈包含 Microsoft 为蓝牙协议提供支持的核心部分。 有了这个堆栈,已启用蓝牙的设备可以彼此定位并建立连接。 在此类连接中,设备可以通过各种应用程序交换数据并彼此交互。 下图显示了蓝牙驱动程序堆栈中的模块,以…...
docker一张图理解
1、push 将本地的镜像上传到镜像仓库,要先登陆到镜像仓库。参数说明: –disable-content-trust : 忽略镜像的校验,默认开启 # 上传本地镜像myapache:v1到镜像仓库中。 docker push myapache:v1 1.2、search 从Docker Hub查找镜像。参数说明: –…...
RocketMQ、Kafka、RabbitMQ,如何选型?
如何根据应用场景选择合适的消息中间件? 分布式、微服务、高并发架构中,消息队列(Message Queue,简称MQ)扮演着至关重要的角色。 消息队列用于实现系统间的异步通信、解耦、削峰填谷等功能。 目前常见的MQ实现包括RabbitMQ、Rock…...
RabbitMQ故障全解析:消费、消息及日常报错处理与集群修复
文章目录 前言:1 消费慢2 消息丢失3 消息重复消费4 日常报错及解决4.1 报错“error in config file “/etc/rabbitmq/rabbitmq.config” (none): no ending found”4.2 生产者发送消息报错4.3 浏览器打开IP地址,无法访问 RabbitMQ(白屏没有结…...
无公网IP 实现外网访问本地 Docker 部署 Navidrome
Navidrome 是一款可以在 macOS、Linux、Windows以及 Docker 等平台上运行的跨平台开源音乐服务器应用,它支持传输常见的 MP3、FLAC、WAV等音频格式。允许用户通过 Web 界面或 API 进行音乐库的管理和访问。本文就介绍如何快速在 Linux 系统使用 Docker 进行本地部署…...
pnpm add 和 pnpm install 的区别?
文章目录 1. pnpm add2. pnpm install3. 总结应用场景示例 在使用 pnpm 管理项目依赖时, pnpm add 和 pnpm install 是两个常用的命令,但它们的功能和使用场景有所不同。以下是详细的解释: 1. pnpm add 功能:用于向项目的 pack…...
Linux:文件描述符fd、系统调用open
目录 一、文件基础认识 二、C语言操作文件的接口 1.> 和 >> 2.理解“当前路径” 三、相关系统调用 1.open 2.文件描述符 3.一切皆文件 4.再次理解重定向 一、文件基础认识 文件 内容 属性。换句话说,如果在电脑上新建了一个空白文档࿰…...
CPU负载与CPU使用率之区别
在日常的性能测试与系统监控中,CPU负载和CPU使用率是两个常见的指标,它们经常被提及,但也经常被混淆。本文将为你深入解析两者的区别,以及它们各自的意义和应用场景,让你更清楚地掌握这些关键性能指标。 存储、内存和 …...
C++实现设计模式---外观模式 (Facade)
外观模式 (Facade) 外观模式 是一种结构型设计模式,为子系统中的一组接口提供一个一致的界面。外观模式定义了一个更高层次的接口,使得子系统更容易使用。 意图 简化复杂子系统的接口。为客户端提供一个统一的入口,屏蔽子系统的内部细节。 …...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
区块链技术概述
区块链技术是一种去中心化、分布式账本技术,通过密码学、共识机制和智能合约等核心组件,实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点:数据存储在网络中的多个节点(计算机),而非…...
