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.mzph.cn/news/614690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode:滑动窗口

目录 1.定长滑动窗口 1.1 几乎唯一子数组的最大和(使用map来计数) 1.2 长度为k子数组中的最大和 2.不定长滑动窗口 2.1 最多k个重复元素的最长子数组 2.2 绝对差不超过限制的最长连续子数组(multiset) 2.3 将x减到0的最小操作数(正难则反 逆向思维) 2.4 统计…

Leetcode2982. 找出出现至少三次的最长特殊子字符串 II

Every day a Leetcode 题目来源:2982. 找出出现至少三次的最长特殊子字符串 II 解法1:字符串分割 分类讨论 按照相同字母分组,每组统计相同字母连续出现的长度。例如 aaaabbbabb 把 a 分成一组,组内有长度 4 和长度 1&#x…

Mac上使用phpstudy+vscode配置PHP开发环境

使用的工具: 1、系统版本 2、vs code code 3、phpstudy_pro 一、下载vs code code以及必要的插件 1、vs code下载 点击vs code官网下载 选择对应的版本,一般电脑会自动识别对应的版本,点击下载,然后傻瓜式安装! 2…

Go模板后端渲染时vue单页面冲突处理

go后端模版语法是通过 {{}} ,vue也是通过双花括号来渲染的,如果使用go渲染vue的html页面的时候就会报错,因为分别不出来哪个是vue的,哪个是go的,既可以修改go的模板语法 template.New("output").Delims(&qu…

谷歌浏览器安装不在默认安装位置Selenium无法打开解决方法

Selenium之cannot find Chrome binary错误-CSDN博客 上面是我找的解决方案的链接 通过option.setBinary()的方法来指定谷歌浏览器的实际运行文件路径; 下面是结合我这边具体情况下写的代码 option.setBinary()中的路径是谷歌浏览器运行文件的路径;Sy…

python进行简单的app自动化测试(pywinauto)+ 截屏微信二维码

一、开始需要了解准备 1、安装 pip install pywinauto2、选择(后面会通过工具进行判断用哪个) 3、自动化控制进程的范围 示例 Application单进程 Desktop多进程 4、程序辅助检测工具 3中的下载连接 链接 点击放大镜拖到对应位置即可 二、简单的开始…

【C语言】ipoib驱动 - ipoib_cm_post_receive_srq_rss函数

一、ipoib_cm_post_receive_srq_rss函数定义 static int ipoib_cm_post_receive_srq_rss(struct net_device *dev,int index, int id) {struct ipoib_dev_priv *priv ipoib_priv(dev);struct ipoib_recv_ring *recv_ring priv->recv_ring index;struct ib_sge *sge;stru…

Redis(四)事务

文章目录 事务Redis事务 vs 数据库事务常用命令总结 事务 一个队列中、一次性、顺序性、排他性执行一系列命令 官网https://redis.io/docs/interact/transactions/ Redis事务 vs 数据库事务 概述详述1、单独的隔离操作Redis的事务仅仅是保证事务里的操作会被连续独占的执行&a…

原生微信小程序-两次设置支付密码校验,密码设置二次确认

效果 具体代码 1、wxml <view style"{{themeColor}}"><view classcontainer><view class"password_content"><view wx:if{{type 1}}><view class"title"><view class"main_title">设置支付密码…

WXUI 基于uni-app x开发的高性能混合UI库

uni-app x 是什么&#xff1f; uni-app x&#xff0c;是下一代 uni-app&#xff0c;是一个跨平台应用开发引擎。 uni-app x 没有使用js和webview&#xff0c;它基于 uts 语言。在App端&#xff0c;uts在iOS编译为swift、在Android编译为kotlin&#xff0c;完全达到了原生应用…

紫光展锐5G扬帆出海 | Blade系列勇当拉美5G先锋

5G对拉丁美洲&#xff08;简称“拉美”&#xff09;绝大多数消费者来说还是一个新鲜技术。GSMA报告显示&#xff0c;过去五年&#xff0c;拉美运营商在移动网络方面的资本开支大部分用于部署4G网络。但在5G网络方面拉美也在积极大力投入中&#xff0c;紧跟全球5G发展大潮&#…

Google I/O大会:Android 13

3个体验升级的方向 以智能手机为场景核心、 扩大智能终端的应用边界以及实现多设备间更好地协同。具体到系统体验层&#xff0c;安卓13将支持图标颜色随主题更换、为不同应用设定使用的语言、新的媒体中心界面等等&#xff0c;同时谷歌也推出了自家的钱包应用&#xff08;Goog…

Golang+Qt合作 : go-echarts + QWebEngineView

简介 无聊使用了一下go-echarts, 使用Qt在C/S模式下嵌入使用B/S框架的简单例子 材料 Qt 5.15.0 MSVC-2019-64bit Golang1.14.3 go-echarts 代码 Golang (Server端) 浏览器 localhost:8081 可以进行访问, 示例来自于 https://go-echarts.github.io/go-echarts/docs/kline …

mysql的gtid主从复制,从库误操作更新操作,

一&#xff1a;查看mysql的从库&#xff0c;发现sql进程状态 “no”.提示执行传输过来的binlog日志&#xff0c;执行失败&#xff0c; 二&#xff1a;查看主库对应的二进制日志的gtid地方。插入一些数据。 # mysqlbinlog --base64-outputdecode-rows -v mysql-bin.000001 |gre…

2019年认证杯SPSSPRO杯数学建模C题(第一阶段)保险业的数字化变革全过程文档及程序

2019年认证杯SPSSPRO杯数学建模 基于 CART 决策树和 SVR 的客户续保概率预测 C题 保险业的数字化变革 原题再现&#xff1a; 车险&#xff0c;即机动车辆保险。保险自身是一种分散风险、消化损失的经济补偿制度&#xff0c;车险即为分散机动车辆在行驶过程中可能发作的未知风…

21道Java Spring MVC综合面试题详解含答案(值得珍藏)

1.概述 1.1 什么是Spring MVC&#xff1f;简单介绍下你对Spring MVC的理解&#xff1f; Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架&#xff0c;通过把模型-视图-控制器分离&#xff0c;将web层进行职责解耦&#xff0c;把复杂的web应用分成…

CMake入门教程【高级篇】文件操作(file)

😈「CSDN主页」:传送门 😈「Bilibil首页」:传送门 😈「动动你的小手」:点赞👍收藏⭐️评论📝 文章目录 1.概述2.使用说明3.完整代码示例4.实际使用中的技巧1.概述 在 CMake 项目中,file 命令是一个多功能工具,用于执行各种文件操作,如读写文件、复制和重命名文…

Docker介绍安装及使用

目录 引言一、什么是Docker?二、Docker的优势三、Docker的架构四、Docker的安装五、Docker的基本使用六、Docker与传统虚拟化的比较七、Docker的应用场景八、总结 引言 在现代的软件开发和部署中&#xff0c;容器化技术已经成为了一种趋势。Docker作为容器化技术的领先者&…

N-137基于springboot,vue运动会报名管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vueAvueElementUI 服务端技术&#xff1a;springbootmybatis 本项…

Elasticsearch聚合优化 | 聚合速度提升5倍!

1、聚合为什么慢&#xff1f; 大多数时候对单个字段的聚合查询还是非常快的&#xff0c; 但是当需要同时聚合多个字段时&#xff0c;就可能会产生大量的分组&#xff0c;最终结果就是占用 Elasticsearch大量内存&#xff0c;从而导致 OOM 的情况发生。 实践应用发现&#xff0…