Object.keys()

这篇具有很好参考价值的文章主要介绍了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'}
 *  ]
 * 
*/

Object.keys(),javascript,前端,react

        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)

Object.keys(),javascript,前端,react

Object.keys(),javascript,前端,react文章来源地址https://www.toymoban.com/news/detail-794017.html

到了这里,关于Object.keys()的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(65)
  • Object.keys方法之详解

    Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。 Object.keys(obj) 要返回其枚举自身属性的对象。 一个表示给定对象的所有可枚举属性的字符串数组。 Object.keys() 返回一个所有元素为字

    2024年02月07日
    浏览(36)
  • vue的双向绑定Object.definedProperty(obj,key,{set,get})

    vue的代码方式

    2024年02月06日
    浏览(33)
  • Python 中出现AttributeError: ‘Event‘ object has no attribute ‘key‘

    《python编程从入门到实践》中在学习外星人入侵项目中运行程序时出现报错 AttributeError: \\\'Event\\\' object has no attribute \\\'key\\\' 错误代码如下: 运行错误提示 导致错误的原因为“ #按Q键退出游戏”这部分程序中“elif event.key == pygame.K_q:”这句语句写在了与 事件类型 “event.type == pygame

    2024年02月11日
    浏览(74)
  • hive中get_json_object函数不支持解析json中文key

    今天在 Hive 中 get_json_object 函数解析 json 串的时候,发现函数不支持解析 json 中文 key。 例如: 我们希望的结果是得到姓名对应的值 张三 ,而运行之后的结果为 NULL 值。 我们希望的结果是得到姓名对应的值 张三 ,而运行之后的结果为 18 。 是什么原因导致的呢?我们查看

    2024年02月12日
    浏览(57)
  • Stable Diffusion出现错误: AttributeError: ‘NoneType‘ object has no attribute ‘keys‘

    Stable Diffusion的ControlNet插件的 style风格迁移模型 在第一次使用时需要在启动器后台下载1.6G的文件,但可能是因为网络原因导致下载的文件不完整,然后我们再次加载是就会出现 AttributeError: ‘NoneType’ object has no attribute ‘keys’ 错误。 去Stable Diffusion的ControlNet的预处理器文件

    2024年02月11日
    浏览(45)
  • 面试题:react、 vue中的key有什么作用? (key的内部原理)

    1.虚拟DOM中key的作用: key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟DON】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下: 2.对比规则: (1). 旧虚拟DOM 中找到了与 新虚拟DOM 相同的key: .若虚拟DOM中内容没变,直接使

    2024年02月04日
    浏览(37)
  • Java8使用stream流给List<Map<String,Object>>分组(多字段key)

    Java8使用 stream流 给ListMapString,Object根据字段key 分组 一、项目场景: 从已得到的List集合中,根据某一元素(这里指map的key)进行分组,筛选出需要的数据。 如果是SQL的话则使用 group by 直接实现,代码的方式则如下: 使用到stream流的 Collectors.groupingBy() 方法。 二、代码实现 1、首

    2024年02月02日
    浏览(65)
  • 解决 JavaScript 输出为 [object Object] 的问题

    🙈作者简介:练习时长两年半的Java up主 🙉个人主页:程序员老茶 🙊 ps:点赞👍是免费的,却可以让写博客的作者开兴好久好久😎 📚系列专栏:Java全栈,计算机系列(火速更新中) 💭 格言:种一棵树最好的时间是十年前,其次是现在 🏡动动小手,点个关注不迷路,感

    2024年02月04日
    浏览(43)
  • React一般可以用哪些值作为key?

    在 React 中,key 是用来帮助 React 核对 Virtual DOM 中的节点是否发生变化的。key 值唯一且稳定有助于提高渲染性能,因为 React 可以根据 key 值判断哪些元素需要重新渲染。 一般来说,以下属性可以作为 key 值: 数据库中的 ID:如果数据源有一个唯一的标识符,如数据库中的 ID,

    2024年01月20日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包