Object.keys()

目录

1、Object.keys() 是什么?

 2、Object.keys(obj) 用法:

        2.1  如果对象是一个对象,会返回对象的属性名组成的数组;

        2.2  如果对象是一个数组,则返回索引组成的数组:

        2.3   如果是字符串,返回索引值数组

        2.4  常用技巧

3、Object.values(obj)和Object.keys()是相反的操作

 3.1   Object.values()的应用:

        3.1.1  如果是简单的一层对象

        3.1.2  如果是对象里嵌套着对象

        3.1.3 如果是数组里嵌套对象


1、Object.keys() 是什么?

        1.  遍历对象(必须包含属性和方法的对象);
        2.  返回对象中每一项key的数组(遍历一个对象,返回一个全是key的数组)

 2、Object.keys(obj) 用法:

        2.1  如果对象是一个对象,会返回对象的属性名组成的数组;
Object.keys()用法示例:
let obj={a:1, b:2, c:3}
Object.keys(obj)
 // ['a', 'b', 'c']

        2.2  如果对象是一个数组,则返回索引组成的数组:
let arr = [1,2,3,4,5,6]
Object.keys(arr) // ["0", "1", "2", "3", "4", "5"]

let arr = ['a', 'b', 'c', 'd'];
console.log(Object.keys(arr)); //['0', '1', '2', '3']
        2.3   如果是字符串,返回索引值数组
let str = "12345字符串"
Object.keys(str) // ["0", "1", "2", "3", "4", "5", "6", "7"]

        2.4  常用技巧
  	 const arrObject = [
        { a: 1, b: 2, c: 3 },
        { a: 2, b: 2, c: 3 },
        { a: 3, b: 3, c: 3 },
      ];
      let res = arrObject.reduce(
        (pre, cur) => {
          Object.keys(pre).forEach((i) => {
            pre[i] = pre[i] + cur[i];
          });
          return pre;
        },
        { a: 0, b: 0, c: 0 }
      );
      console.log("re", res); // { a: 6, b: 7, c: 9 }

3、Object.values(obj)和Object.keys()是相反的操作

        Object.values(obj)返回值是一个包含对象自身的所有可枚举属性值的数组。

 3.1   Object.values()的应用:
        3.1.1  如果是简单的一层对象
var obj = {name: '光', age: '18', height: '177'}

const res= Object.values(obj);
console.log(res)  //  ['光', '18', '177']
        3.1.2  如果是对象里嵌套着对象
var obj = {
  gt: {name: 'xx',age: '18',height: '177'},
  xd: {name: 'yy',age: '12',height: '190'},
  xe: {name: 'ss',age: '10',height: '188'}
}

const res = Object.values(obj);
console.log(res)  
// 
/**
 *  [
 *    {name: 'xx', age: '18', height: '177'},
 *    {name: 'yy', age: '12', height: '190'},
 *    {name: 'ss', age: '10', height: '188'}
 *  ]
 * 
*/

        3.1.3 如果是数组里嵌套对象

        处理数据,比如后端返回的数据是obj形式的,想要对相同的数据进行层级归类

var obj = [
  {dhp:'熊出没',name:"光头强",age:'18',tall:'170'},
  {dhp:'熊出没',name:"熊大",age:'12',tall:'190'},
  {dhp:'熊出没',name:"熊二",age:'10',tall:'188'},
  {dhp:'羊村记事',name:"喜洋洋",age:'8',tall:'60'},
  {dhp:'羊村记事',name:"沸羊羊",age:'9',tall:'80'},
  {dhp:'羊村记事',name:"懒洋洋",age:'10',tall:'60'},
  {dhp:'西游记',name:"孙悟空",age:'500',tall:'130'},
  {dhp:'西游记',name:"猪八戒",age:'150',tall:'140'},
  {dhp:'西游记',name:"白龙马",age:'200',tall:'150'}
]

// 封装一个方法
function getNewList(data) {
  let newObj = {}
  obj.forEach((item, index) => {   
  let { dhp } = item    // 解构出每一个对象里面 dhp字段的值---值值值
  
  if (!newObj[dhp]) {   // 如果在这个新对象里面没有找到,则新增一个对象
    
    newObj[dhp] = {    // 重构对象
      dhp,   
      children: [],
    }
  }
  // 如果在对象里面找到有相同的 dhp 字段的值,则Push进入children里面
  newObj[dhp].children.push(item)
  })
  let newArr = Object.values(newObj)
  return newArr
}

const list = getNewList(obj);
console.log(list)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/311353.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【微服务】日志搜集es+kibana+filebeat+redis+logstash(单机)

日志搜集系统搭建 基于7.17.16版本 ps: 项目是toB的,日志量不大 前置准备 软件下载 7.17.16版本。8.x版本需要JDK11 elastic.co/downloads/past-releasesJDK java8 Linux elastic 软件不能以root用户启动,需要创建用户 sudo useradd elastic #给此…

【Redis】Redis持久化方式

Redis 中有两种持久化方式,分别为 RDB 和 AOF。 RDB RDB 全称 Redis Database Backup file,也叫做 Redis 数据快照。简单来说就是把 Redis 中的数据记录到磁盘中。当 Redis 实例故障重启后,从磁盘读取快照文件,恢复数据。 RDB有…

Vue新手村(二)

目录 1、计算属性 2、事件修饰符 2.1、stop事件修饰符 2.2、prevent事件修饰符 2.3、self事件修饰符 2.4、once事件修饰符 3、按键修饰符 3.1、enter回车键 1、计算属性 计算属性: computed:vue官方提供一个计算属性作用:在完成某种业…

文件上传进阶绕过技巧(一)和靶场实战

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与学习之用,读者将信息做其他用途,由Ta承担全部法律及连带责任,文章作者不承担任何法律及连带责任。 0、环境准备 请移步《文件上传靶场实战:upl…

【C语言刷题每日一题#牛客网HJ73】——计算日期到天数转换(给定日期,计算是该年的第几天)

目录 问题描述 思路分析 数据结构构建部分 计算部分 代码实现 结果测试 此问题解决方法不唯一,这里介绍的是一种使用数组和循环实现的简单办法 问题描述 思路分析 问题的要求是输入一个日期,计算这是当年的第几天——要解决这个问题,逻…

S7-200SMART实例之冒泡法排序子程序

需求分析 编写程序实现冒泡法排序的算法。 冒泡法排序是一种简单的排序算法。因其过程如同水中气泡最终会上浮到水面一样,故被形象地称为“冒泡法排序”。 实现原理 根据以上需求分析可以按以下步骤实现算法: 1.比较相邻的元素。如果第一个比第二个…

Java面试题之JVM

Java面试题之JVM 1. JVM的组成部分及其作用?2. JVM的堆和栈的区别?3. 简述一下垃圾回收机制?(垃圾回收的原理?)4. 垃圾回收器都有什么?该怎么选择?5. 如何判断垃圾可以回收了?6. 垃圾回收算法有…

c++学习笔记-STL案例-机房预约系统1-准备工作

前言 准备工作包括:需求分析、项目创建、主菜单实现、退出功能实现 目录 1 机房预约系统需求 1.1 简单介绍 1.2 身份介绍 1.3 机房介绍 1.4 申请介绍 1.5 系统具体要求 1.6 预约系统-主界面思维导图 2 创建项目 2.1 创建项目 2.2 添加文件 ​编辑 3 创建…

小程序基础学习(事件处理)

概述&#xff1a;点击某一个标题&#xff0c;使标题选中增加不同颜色。 <!--pages/four/four.wxml--> <navigation-bar title"牧原" back"{{false}}" color"black" background"#FFF"></navigation-bar> <view c…

讲讲关于跨域的问题,什么是跨域?怎么办?

文章目录 什么是跨域如果非同源&#xff0c;共有三种行为受到限浏览器客户端和向服务器跨域请求的判定流程 跨域问题演示参考 以下内容为我结合他人知识进行的自我总结, 如有错误欢迎指出~ 什么是跨域 跨域就是不同的域名下的资源访问&#xff0c;会被浏览器的本地安全策略阻…

CISP-DSG证书含金量分析

CISP-DSG证书的含金量主要体现在以下几个方面&#x1f447; 1️⃣专业知识 CISP-DSG认证要求持有者具备深入的数据an全治理知识&#xff0c;包括数据分类、数据隐私、合规性、风险管理等。&#x1f4d2;这些知识对于处理和保护组织的敏感数据至关重要&#xff0c;因此具有高含金…

ubantu中的docker安装

1.Ubuntu Docker 安装 | 菜鸟教程 (runoob.com) 我就是看这个教程进行操作的 2.执行下面两步&#xff0c;就算是安装完成了 3.启动&#xff0c;并检查是否安装成功&#xff1a; 4.安装之后&#xff0c;怎么用&#xff0c;那就是自己随便探索咯&#xff0c;可以看博客&#xf…

【已解决】c语言编写的lib如何调用

本博文源于笔者在vs2015正在编写的lib想要调用的问题&#xff0c;正常的操作是将项目生成lib&#xff0c;但是然后又如何操作呢&#xff0c;本博文就是解决这样的问题 文章目录 问题再现步骤1&#xff1a;编写lib.h与lib.c步骤2&#xff1a;生成lib步骤3&#xff1a;添加用得到…

【昕宝爸爸小模块】HashMap用在并发场景存在的问题

HashMap用在并发场景存在的问题 一、✅典型解析1.1 ✅JDK 1.8中1.2 ✅JDK 1.7中1.3 ✅如何避免这些问题 二、 ✅HashMap并发场景详解2.1 ✅扩容过程2.2 ✅ 并发现象 三、✅拓展知识仓3.1 ✅1.7为什么要将rehash的节点作为新链表的根节点3.2 ✅1.8是如何解决这个问题的3.3 ✅除了…

c#图片作为鼠标光标

图片转换为鼠标光标代码如下&#xff1a; private void Form1_Load(object sender, EventArgs e) {//button1.Cursor System.Windows.Forms.Cursors.Hand;Bitmap bmp new Bitmap("780.jpg");Cursor cursor new Cursor(bmp.GetHicon());button1.Cursor cursor;} …

黑马程序员JavaWeb开发|案例:tlias智能学习辅助系统(4)员工管理|修改员工、配置文件

指路&#xff08;1&#xff09;&#xff08;2&#xff09;&#xff08;3&#xff09;&#x1f447; 黑马程序员JavaWeb开发|案例&#xff1a;tlias智能学习辅助系统&#xff08;1&#xff09;准备工作、部门管理_tlias智能学习辅助系统的需求分析-CSDN博客https://blog.csdn.n…

可狱可囚的爬虫系列课程 11:Requests中的SSL

一、SSL 证书 SSL 证书是数字证书的一种&#xff0c;类似于驾驶证、护照、营业执照等的电子副本。SSL 证书也称为 SSL 服务器证书&#xff0c;因为它是配置在服务器上。 SSL 证书是由受信任的数字证书颁发机构 CA 在验证服务器身份后颁发的&#xff0c;其具有服务器身份验证和…

Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别

DOM和BOM的区别 我们都指代&#xff0c;javascript由三个部分组成&#xff1a; ECMAScript&#xff1a;描述了JS的语法和基本对象 BOM(浏览器对象)&#xff1a;与浏览器交互的方法和对象 DOM(文档对象模型)&#xff1a;处理网页内容的方法和接 ps&#xff1a;根据宿主&#x…

桌面微信多开小工具正式发布

本博客站点已全量迁移至 DevDengChao 的博客 https://blog.dengchao.fun , 后续的新内容将优先在自建博客站进行发布, 欢迎大家访问. 社牛: 我需要同时登录多个微信, 一个微信已经满足不了我了! Android: 让我看看系统里有没有自带的多开功能, 不行的话去应用市场下一个多开软…

DLT:dlt-daemon示例解析2

DLT&#xff1a;dlt-daemon示例解析 回顾一下上期第一个示例打印DLT日志的流程。 这次来分析第二个示例。 目录dlt-daemon/examples/example2/下有以下文件 CMakeLists.txt dlt_id.h example2.c example2.xml 其中example2.xml编译用不到&#xff0c;里面描述了一些程序的…
最新文章