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.hqwc.cn/news/339396.html

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

相关文章

MySQL 8.0 InnoDB Tablespaces之Temporary Tablespaces(临时表空间)

文章目录 MySQL 8.0 InnoDB Tablespaces之Temporary Tablespaces(临时表空间)会话临时表空间会话临时表空间的磁盘分配和回收会话临时表空间的创建创建临时表和查看临时表信息会话临时表空间相关的设置参数innodb_temp_tablespaces_dir 全局临时表空间查…

力扣最热一百题——只出现一次的数字

这个合集已经很久没有更新了,今天来更新更新~~~ 目录 力扣题号 题目 题目描述 示例 提示 题解 Java解法一:Map集合 Java解法二:位运算 C位运算代码 力扣题号 136. 只出现一次的数字 - 力扣(LeetCode) 下述题…

mac 快捷键

mac 程序坞 ctrlaltD:打开程序坞 调度中心 Ctrl键↑: 调度中心 Ctrl键↓:应用程序窗口 F11 : 显示桌面 输入法 Ctrl键空格: 切换输入法 Ctrl键Alt(Option)空格: 切换输入法 截屏 帮助 Ctrl键shift键/: 显示帮助

Vue-13、Vue深度监视

1、监视多级结构中某个属性的变化 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>watch深度监视</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm…

Mac安装nvm以及使用nvm安装node

1. 安装nvm命令 git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout git describe --abbrev0 --tags2. 配置环境变量 vi ~/.bash_profileexport NVM_DIR"$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] &&…

Provide/Inject 依赖注入(未完待续)

父组件传递给子组件数据&#xff0c;通过props&#xff0c;但是需要逐层传递 provide/Inject 的推出就是为了解决这个问题&#xff0c;它提供了一种组件之间共享此类值的方式,不必通过组件树每层级显示地传递props 目的是为了共享那些被 认为对于一个组件树而言是全局的数据 p…

揭秘 Gossip 协议:节点之间的悄悄话

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 揭秘 Gossip 协议&#xff1a;节点之间的悄悄话 前言Gossip协议简介Gossip 协议的工作原理Gossip 协议的优势Gossip协议的实际应用 前言 在分布式系统中&#xff0c;节点之间的信息传递如同社交中的悄…

Unity报错:[SteamVR] Not Initialized (109)的解决方法

问题描述 使用HTC vive 头像进行SteamVR插件的示例场景进行测试&#xff0c;发现头显场景无法跳转到运行场景&#xff08;Unity 项目可以运行&#xff0c;仅出现警告&#xff09;。 具体如下&#xff1a; [SteamVR] Not Initialized (109) [SteamVR] Initialization failed…

ISO11898-CAN网络拓扑结构 (125K~1Mbps)

ISO11898 标准的物理框图如下图 可理解为一个高速闭环 CAN 总线网络&#xff1b;CAN 闭环总线网络允许总线最大长度为 40m;最高速度为 1Mbps;可以看到总线的两端各有一个 120Ω 的电阻&#xff0c;此电阻作为阻抗匹配功能&#xff0c;以减少回波反射;节点就是不同的设备&#…

前端开发学习与发展建议,错过很可惜

对有志学习前端开发的同学,这里有几点建议: 1. 掌握前端三剑客HTML,CSS和JavaScript 这三项技术是前端开发的基石,必须扎实掌握。要理解每项技术的功能和特点,并通过实践项目熟练运用。 2. 了解前端组件库和框架 目前较流行的前端框架有Vue.js、React.js和AngularJS等。这些…

招投标系统是Electron的纯内网编辑Office Word,可以设置部分区域可编辑,其他的地方不能编辑吗?

问题&#xff1a; 我们是招投标系统的开发公司&#xff0c;框架是用的Electron&#xff0c;需要在纯内网的环境下编辑Office Word&#xff0c;可以设置部分区域可编辑&#xff0c;其他的地方不能编辑吗&#xff08;如下红框位置&#xff09;并且在用户忘记填写一些区域的时候做…

ROS2学习笔记一:安装及测试

目录 前言 1 ROS2安装与卸载 1.1 安装虚拟机 1.2 ROS2 humble安装 2 ROS2测试 2.1 topic测试 2.2 小海龟测试 2.3 RQT可视化 2.4 占用空间 前言 ROS2的前身是ROS&#xff0c;ROS即机器人操作系统&#xff08;Robot Operating System&#xff09;,ROS为了“提高机器人…