Object.values() 、 Object.keys()

ops/2024/10/9 2:34:44/

拿到当前对象里面的value值

javascript">// 假设你有一个对象
const myObject = {name: 'Kimi',age: 30,country: 'Moon'
};// 获取对象的所有值
const values = Object.values(myObject);// 输出值数组
console.log(values); // ["Kimi", 30, "Moon"]

如果你需要在 Vue 组件中获取响应式对象的值,你可以使用同样的 Object.values() 函数。在 Vue 3 的组合式 API 中,如果你有一个响应式对象,例如 refreactive,你可以这样获取它的值:

javascript">import { reactive } from 'vue';// 创建一个响应式对象
const myReactiveObject = reactive({name: 'Kimi',age: 30,country: 'Moon'
});// 获取响应式对象的所有值
const values = Object.values(myReactiveObject);// 输出值数组
console.log(values); // ["Kimi", 30, "Moon"]

请注意,Object.values() 只能获取对象自身的可枚举属性值,不会获取继承的属性值。如果你的对象中包含了嵌套对象,那么返回的数组将只包含嵌套对象的引用,而不是嵌套对象的值。如果你需要递归地获取所有嵌套对象的值,你可能需要编写一个递归函数来实现这一点。 

 

拿到当前对象里面指定value值的key

javascript">// 假设你有一个对象
const myObject = {name: 'Kimi',age: 30,country: 'Moon'
};// 假设你想找到值为 'Moon' 的键
const valueToFind = 'Moon';
let keyForValue = '';for (const key of Object.keys(myObject)) {if (myObject[key] === valueToFind) {keyForValue = key;break; // 找到后立即退出循环}
}console.log(keyForValue); // 输出:country

在这个例子中,我们遍历了 myObject 的所有键,并检查每个键对应的值是否等于我们想要找的值 valueToFind。一旦找到匹配的值,我们就得到了对应的键 keyForValue

如果你的对象中有多个相同的值,并且你想要找到所有这些值的键,你可以稍微修改上面的代码来收集所有匹配的键:

javascript">const myObject = {name: 'Kimi',nickname: 'Kimi',age: 30,country: 'Moon'
};const valueToFind = 'Kimi';
const keysForValue = Object.keys(myObject).filter(key => myObject[key] === valueToFind);console.log(keysForValue); // 输出:["name", "nickname"]

在这个例子中,我们使用了 Array.prototype.filter() 函数来创建一个新数组,其中包含了所有与指定值相匹配的键。这样,如果对象中有多个相同的值,你就能获取到所有对应的键。


http://www.ppmy.cn/ops/122935.html

相关文章

『网络游戏』Tips弹窗队列【10】

修改脚本:DynamicWnd.cs 修改脚本:GameRoot.cs 运行项目 - Tips提示消息按顺序依次弹出显示 修改代码:GameRoot.cs 修改代码:LoginSys.cs 运行项目 设置初始化函数 将CreateWnd设置为隐藏 运行项目 本章结束

Linux 计划任务

1.常见定时计划任务设置方式: at: 突发性的,临时决定只执行一次的任务。 crontab: 定时性的,每隔一定的周期就需要重复执行一次的命令。 用#date 为参考时间 1.1 at 计划任务的使用: 使用…

五子棋双人对战项目(3)——匹配模块

目录 一、分析需求 二、约定前后端交互接口 匹配请求: 匹配响应: 三、实现游戏大厅页面(前端代码) game_hall.html: common.css: game_hall.css: 四、实现后端代码 WebSocketConfig …

0 代码自动化测试:RF 框架实现企业级 UI 自动化测试

RobotFramework框架可以作为公司要做自动化 但是又不会代码的一种临时和紧急情况的替代方案,上手简单。 现在大家去找工作,反馈回来的基本上自动化测试都是刚需!没有自动化测试技能,纯手工测试基本没有什么市场。 但是很多人怕代…

螺蛳壳里做道场:老破机搭建的私人数据中心---Centos下Docker学习03(网络及IP规划)

3 网络及IP规划 3.1 容器连接网络初步规划 规划所有容器与虚拟机的三张网卡以macvlan的方式进行连接(以后根据应用可以更改),在docker下创建nat、wifi、nei、wai四张网卡,他们和虚拟机及宿主机上NIC的相关连接参数如下表所示&am…

C++常见的内存错误和解决策略

目录 1.未初始化指针 (Uninitialized Pointer) 2.内存分配未成功却使用了它 3.野指针 (Dangling Pointer) 4.内存泄漏 (Memory Leak) 5.重复释放内存 (Double Free) 6.内存越界访问 (Buffer Overflow) 7.错误的数组删除方式 (Mismatched Delete) 8.栈内存溢出 (Stack O…

CSS 效果:实现动态展示双箭头

最近写了一段 CSS 样式,虽然不难,但实现过程比较繁琐。这个效果结合了两个箭头,一个突出,一个内缩,非常适合用于步骤导航或选项卡切换等场景。样式不仅仅是静态的,还可以通过点击 click 或者 hover 事件&am…

Spring Boot中线程池使用

说明:在一些场景,如导入数据,批量插入数据库,使用常规方法,需要等待较长时间,而使用线程池可以提高效率。本文介绍如何在Spring Boot中使用线程池来批量插入数据。 搭建环境 首先,创建一个Spr…