JS中的Object.keys怎么用?有什么作用?

object.keys用于获取对象自身可枚举属性名组成的数组。其基本用法是object.keys(obj),返回对象自身的可枚举属性数组,如遍历对象属性时可用object.keys(data).foreach处理每个键值对;判断对象是否为空可通过object.keys(obj).length === 0实现;还可提取对象键名用于进一步处理,如生成下拉菜单选项。但需注意:不可枚举属性、symbol属性不会被列出,且非对象参数会抛出错误。

JS中的Object.keys怎么用?有什么作用?

Object.keys 是 JavaScript 中一个非常实用的方法,用来获取对象自身的、可枚举的属性名,返回一个数组。它常用于遍历对象属性、判断对象是否为空等场景。

基本用法

Object.keys(obj) 接收一个对象作为参数,返回该对象所有可枚举属性组成的数组。例如:

const user = {  name: 'Tom',  age: 25,  gender: 'male'};console.log(Object.keys(user)); // 输出 ["name", "age", "gender"]

注意:它只处理对象自身的属性,不包括继承来的属性。

常见用途

1. 遍历对象属性

如果你需要对一个对象的所有键进行操作,比如打印每个键对应的值,可以这样写:

const data = { a: 1, b: 2, c: 3 };Object.keys(data).forEach(key => {  console.log(`${key}: ${data[key]}`);});

这种方式比 for...in 更可控,尤其在你想排除原型链上的属性时。

2. 判断对象是否为空

有时候你需要判断一个对象是不是“空”的,也就是有没有自己的属性:

function isEmpty(obj) {  return Object.keys(obj).length === 0;}console.log(isEmpty({})); // trueconsole.log(isEmpty({ key: 'value' })); // false

这个方法简单直接,适合很多实际场景。

3. 获取对象的键列表做进一步处理

比如你想把对象的键转换成下拉菜单选项:

const options = {  red: '#FF0000',  green: '#00FF00',  blue: '#0000FF'};const keys = Object.keys(options);// 可以传给组件渲染下拉框,或者生成表单标签等等

注意事项

不可枚举属性不会被包含
如果你用了 Object.defineProperty 设置某个属性为不可枚举,那它就不会出现在 Object.keys 的结果中。

Symbol 属性不会被列出
如果你用 Symbol 作为键名,也不会出现在结果里,需要用 Object.getOwnPropertySymbols() 来获取。

非对象参数会抛出错误(ES5 模式)
在严格模式下,传入 null 或者原始类型(如数字、字符串)会报错。建议使用前确保参数是对象。

总结一下

Object.keys 返回的是对象自身可枚举属性的数组。它在遍历、判断空对象、提取键名等场景非常有用。使用时要注意 Symbol 键和不可枚举属性的问题。

基本上就这些,不复杂但挺常用。

以上就是JS中的Object.keys怎么用?有什么作用?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1505514.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 03:45:24
下一篇 2025年12月20日 03:45:39

相关推荐

  • 为什么position: sticky失效了?

    position: sticky失效? 在提供的代码中,下方使用position: sticky的toutou元素似乎失效了。究其原因,并非position: sticky失效,而是存在其他因素遮挡了该元素。 具体来说,下方使用el-table组件渲染的表格具有position: relative的…

    2025年12月24日
    000
  • 如何直接访问 Sass 地图变量的值?

    直接访问 sass 地图变量的值 在 sass 中,我们可以使用地图变量来存储一组键值对。而有时候,我们可能需要直接访问其中的某个值。 可以通过 map-get 函数直接从地图中获取特定的值。语法如下: map-get($map, $key) 其中: $map 是我们要获取值的 sass 地图变量。…

    2025年12月24日
    000
  • 如何解决 Antd Pagination 分页组件初始渲染异常问题?

    Antd Pagination 分页组件渲染异常 在初始渲染 Antd Table 表单时,有时会遇到分页组件样式异常的问题。具体表现为,第一次加载时分页组件样式错误,而刷新页面后样式正常。 问题分析 初次加载时分页组件渲染异常可能是由于多个原因造成的: CSS 加载顺序:Antd 分页组件的样式可…

    2025年12月24日
    000
  • Vue 中控制子组件渲染:v-if 和 visible 哪个不导致组件销毁?

    vue 通过 props 中的值控制子组件根元素中的 v-if 时, 子组件页面的渲染机制 在 vue 中,通过 props 中的值控制子组件根元素中的 v-if, 可实现子组件的显示和隐藏。对于不同的控制方式,组件页面渲染机制也不同。 方案 1: 使用 v-if 控制 在 v-if 为 false…

    2025年12月24日
    000
  • 如何修复 Antd Pagination 分页组件首次加载时样式异常的问题?

    修复 antd pagination 分页组件渲染异常 在使用 antd 库时,用户经常遇到的问题是 pagination 分页组件在首次渲染时样式异常。刷新页面后,样式会恢复正常。 问题分析: 导致此问题的原因可能是 css 加载顺序。首次加载时,pagination 组件的 css 可能尚未完全…

    2025年12月24日
    000
  • v-if 与 props 变量交互时子组件渲染机制如何?

    vue 子组件 v-if 与 props 变量 背景介绍 vue 中,可以通过父组件的 props 传递数据给子组件。而子组件中,可以用 v-if 指令控制元素的渲染。本文探讨当父组件通过 props 改变 v-if 变量时,子组件渲染的机制。 方案分析 有两种方案可以实现此目的: 方案 1:v-i…

    2025年12月24日
    000
  • 使用 React 构建二维码生成器

    介绍 在本教程中,我们将使用 react 创建一个 qr 代码生成器 web 应用程序。对于那些希望了解集成 api、管理状态和生成动态内容的人来说,该项目是理想的选择。 项目概况 二维码生成器允许用户通过输入内容、调整大小和选择背景颜色来创建二维码。它利用公共 api 生成 qr 码并将其显示在屏…

    2025年12月24日
    000
  • 我如何编写 CSS 选择器

    CSS 方法有很多,但我都讨厌它们。有些多(顺风等),有些少(BEM、OOCSS 等)。但归根结底,它们都有缺陷。 当然,人们使用这些方法有充分的理由,并且解决的许多问题我也遇到过。因此,在这篇文章中,我想写下我自己的关于如何保持 CSS 井井有条的指南。 这并不是一个任何人都可以开始使用的完整描述…

    2025年12月24日
    000
  • 深入理解CSS框架与JS之间的关系

    深入理解CSS框架与JS之间的关系 在现代web开发中,CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项,可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言,可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系,…

    2025年12月24日
    000
  • HTML+CSS+JS实现雪花飘扬(代码分享)

    使用html+css+js如何实现下雪特效?下面本篇文章给大家分享一个html+css+js实现雪花飘扬的示例,希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行:http://hai…

    2025年12月24日 好文分享
    500
  • 10款好看且实用的文字动画特效,让你的页面更吸引人!

    图片和文字是网页不可缺少的组成部分,图片运用得当可以让网页变得生动,但普通的文字不行。那么就可以给文字添加一些样式,实现一下好看的文字效果,让页面变得更交互,更吸引人。下面创想鸟就来给大家分享10款文字动画特效,好看且实用,快来收藏吧! 1、网页玻璃文字动画特效 模板简介:使用css3制作网页渐变底…

    2025年12月24日 好文分享
    000
  • tp5如何引入css文件

    tp5引入css文件的方法:1、将css文件放在public目录下的static文件里即可;2、在页面引入中写上“”语句即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 其实很简单,只需要将css,js,image文件放在这个目录下即可 页…

    2025年12月24日
    000
  • 聊聊CSS 与 JS 是如何阻塞 DOM 解析和渲染的

    本篇文章给大家介绍一下css和js阻塞 dom 解析和渲染的原理。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 hello~各位亲爱的看官老爷们大家好。估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其…

    2025年12月24日
    200
  • js如何修改css样式

    js修改css样式的方法:1、使用【obj.className】来修改样式表的类名;2、使用【obj.style.cssTest】来修改嵌入式的css;3、使用【obj.className】来修改样式表的类名;4、使用更改外联的css。 本教程操作环境:windows7系统、css3版,DELL G…

    2025年12月24日
    000
  • 如何使用纯CSS、JS实现图片轮播效果

    本篇文章给大家详细介绍一下使用纯css、js实现图片轮播效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 .carousel {width: 648px;height: 400px;margin: 0 auto;text-align: center;position: a…

    2025年12月24日
    000
  • js如何修改css

    js修改css的方法:1、使用【obj.style.cssTest】来修改嵌入式的css;2、使用【bj.className】来修改样式表的类名;3、使用更改外联的css文件,从而改变元素的css。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 js修改css的方法: 方法…

    2025年12月24日
    000
  • js如何改变css样式

    js改变css样式的方法:1、使用cssText方法;2、使用【setProperty()】方法;3、使用css属性对应的style属性。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 js改变css样式的方法: 第一种:用cssText div.style.cssText…

    2025年12月24日
    000
  • 为什么css放上面js放下面

    css放上面js放下面的原因:1、在加载html生成DOM tree的时候,可以同时对DOM tree进行渲染,这样可以防止闪跳,白屏或者布局混乱;2、javascript加载后会立即执行,同时会阻塞后面的资源加载。 本文操作环境:Windows7系统、HTML5&&CSS3版,DE…

    2025年12月24日
    000
  • 推荐六款移动端 UI 框架

    作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率。 一、MUI         最接近原生APP体验的高性能前端框架,追求性能体验,是我们开始启动MUI项目的…

    2025年12月24日
    000
  • css如何实现图片的旋转展示效果(代码示例)

    本篇文章给大家带来内容是通过代码示例介绍使用css+js实现图片的旋转展示,制作一个手动操作的“无限”照片轮播图。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就开始介绍如何实现效果。 1、构建图像轮播框架 首先是HTML。它有点难以阅读,因为我们删除了元素之间的任何空格…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信