Object.keys()

目录

[1、Object.keys() 是什么?](#1、Object.keys() 是什么?)

[2、Object.keys(obj) 用法:](#2、Object.keys(obj) 用法:)

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

[2.2 如果对象是一个数组,则返回索引组成的数组:](#2.2 如果对象是一个数组,则返回索引组成的数组:)

[2.3 如果是字符串,返回索引值数组](#2.3 如果是字符串,返回索引值数组)

[2.4 常用技巧](#2.4 常用技巧)

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

[3.1 Object.values()的应用:](#3.1 Object.values()的应用:)

[3.1.1 如果是简单的一层对象](#3.1.1 如果是简单的一层对象)

[3.1.2 如果是对象里嵌套着对象](#3.1.2 如果是对象里嵌套着对象)

[3.1.3 如果是数组里嵌套对象](#3.1.3 如果是数组里嵌套对象)


1、Object.keys() 是什么?

1.遍历对象(必须包含属性和方法的对象);

  1. 返回对象中每一项key的数组(遍历一个对象,返回一个全是key的数组)

2、Object.keys(obj) 用法:

2.1 如果对象是一个对象,会返回对象的属性名组成的数组;
javascript 复制代码
Object.keys()用法示例:
let obj={a:1, b:2, c:3}
Object.keys(obj)
 // ['a', 'b', 'c']
2.2 如果对象是一个数组,则返回索引组成的数组:
javascript 复制代码
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 如果是字符串,返回索引值数组
javascript 复制代码
let str = "12345字符串"
Object.keys(str) // ["0", "1", "2", "3", "4", "5", "6", "7"]
2.4 常用技巧
javascript 复制代码
  	 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 如果是简单的一层对象
javascript 复制代码
var obj = {name: '光', age: '18', height: '177'}

const res= Object.values(obj);
console.log(res)  //  ['光', '18', '177']
3.1.2 如果是对象里嵌套着对象
javascript 复制代码
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形式的,想要对相同的数据进行层级归类

javascript 复制代码
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)
相关推荐
拉不动的猪13 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程22 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸2 小时前
2、中医基础入门和养生
前端·后端