js遍历对象key,value

这篇具有很好参考价值的文章主要介绍了js遍历对象key,value。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

声明一个对象:

let obj = {
    name: 'Kamen',
    age: '23',
    hobby: 'eat eat eat'
  }

方法一:转化为操作数组forEach遍历

遍历对象属性

//遍历对象属性
Object.keys(obj).forEach(key => {
    console.log(key)
  })

js遍历对象key,value
关于Object.keys()方法
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

例子

// 简单数组
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// 类数组对象
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// 具有随机键顺序的类数组对象
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo 是一个不可枚举的属性
const myObj = Object.create({}, {
  getFoo: {
    value() { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

遍历对象属性值

//遍历对象属性值
Object.values(obj).forEach(val => {
  console.log(val)
})

js遍历对象key,value
关于Object.values()方法
object .values()静态方法返回给定对象自己的可枚举字符串键属性值的数组。

例子

const obj = { foo: "bar", baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// Array-like object
const arrayLikeObj1 = { 0: "a", 1: "b", 2: "c" };
console.log(Object.values(arrayLikeObj1)); // ['a', 'b', 'c']

// Array-like object with random key ordering
// When using numeric keys, the values are returned in the keys' numerical order
const arrayLikeObj2 = { 100: "a", 2: "b", 7: "c" };
console.log(Object.values(arrayLikeObj2)); // ['b', 'c', 'a']

// getFoo is a non-enumerable property
const myObj = Object.create(
  {},
  {
    getFoo: {
      value() {
        return this.foo;
      },
    },
  },
);
myObj.foo = "bar";
console.log(Object.values(myObj)); // ['bar']

方法二:for/in遍历

for( let key in obj ){
    //遍历对象属性
    console.log(key)
    //遍历对象属性值
    console.log(obj[key])
  }

js遍历对象key,value
注意:该方法会继承原型链的所有属性,例如:

Object.prototype.pet = 'open'
for( let key in obj ){
  console.log(key)
  console.log(obj[key])
}
console.log(obj)

js遍历对象key,value
上述情况可以使用hasOwnProperty避免:

Object.prototype.pet = 'open'
  for( let key in obj ){
    if (obj.hasOwnProperty(key) === true){
      console.log(key)
      console.log(obj[key])
    }
  }
  console.log(obj)

js遍历对象key,value文章来源地址https://www.toymoban.com/news/detail-514327.html

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

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

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

相关文章

  • Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象,实现局部刷新的功能,vue中JS 对象动态添加键值对

    适用场景: vue中定义的map对象 map : { name : \\\'xxx\\\' } 接口回显map格式的数据 data :{ key : value} 都可以通过以下方式拿到key和value的值 VUE 获取对象{}的key值  vue根据对象id删除数组中的对象,实现局部刷新的功能 方法一:使用过滤器 注:这个一般是根据对象id 方法二:使用splice() 注

    2024年02月08日
    浏览(54)
  • 【C++】map值自定义key,value排序(含ccfcsp第四次认证第二题演示和map遍历方法)

    sort仅仅支持pair,vector,数组等排序,不支持对map的排序 所以如果想用sort对map排序的话,只需要把map转换为vector即可: 再输出vector,即可得到我们想要的结果 如果想要在map遍历的时候,可以直接输出排序的结果,大不了把原来的map删掉,再把vector的内容重新赋值进去就行了

    2024年02月09日
    浏览(49)
  • js遍历对象的方法

    遍历 对象的方法         一、for...in                二、Object.keys()         三、Object.getOwnPropertyNames() 一、for...in                  for in循环是最基础的遍历对象的方式,它还会得到对象原型链上的属性 二、Object.keys()         Object.keys()是ES5新增的一

    2024年02月16日
    浏览(48)
  • JavaScript:js数组/对象遍历方法

    一、js遍历方法 序号 方法 描述 1 for 使用最基本的for循环可以遍历数组 2 for of for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值,而不是索引。 3 for in for...in语句用来遍历对象的可

    2024年02月09日
    浏览(56)
  • JS中遍历对象的方法讲解

    在JavaScript中,有几种常用的方法可以用来遍历对象: 使用for…in循环可以遍历一个对象中的所有可枚举属性。它会将属性名逐个赋值给循环变量,并执行循环体内的代码。 例如: for…in循环会遍历对象自身的可枚举属性以及继承的可枚举属性。如果只想遍历对象自身的属性

    2024年02月09日
    浏览(32)
  • JS遍历对象的方法及特点

    1、定义一个对象 控制台输出的obj中,原型Object上添加了height和major 2、使用 for…in 循环遍历对象的属性 for…in遍历属性时,包含该实例对象的 自有属性 和该实例对象上的 原型属性 ,不包含不可枚举的属性 控制台输出结果: 根据输出结果可知for……in 遍历对象会遍历实例对

    2024年01月19日
    浏览(33)
  • 〖大前端 - 基础入门三大核心之JS篇㊿〗- 面向对象之对象的方法、遍历、深浅克隆

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月04日
    浏览(75)
  • JavaScript获取数组对象里面的键(key)和值(value)

    知识专栏 专栏链接 JavaScript知识专栏 https://blog.csdn.net/xsl_hr/category_12024214.html?spm=1001.2014.3001.5482 有关JavaScript的相关知识可以前往JavaScript知识专栏查看复习!! 在后台管理系统的项目开发中,对于 后端接口返回的数据进行处理 是一件很重要的事情。有时候返回的值是 json格式

    2023年04月15日
    浏览(43)
  • JS对Json数组进行抽取 获取key: “value“

    这篇文章 不是拿key或value 是 抽取需要的 key: “value” 【必须是单一数组 若是多组数据需要for循环】 // row 是json串 !!! 一、我有一个单一的json【row】 只要 id 和 appStatus 且分开成新数组 二、我有一个单一的json【row】 只要 id 和 appStatus 不分开在一起 方式1:row[0] 括号里面用数字

    2023年04月24日
    浏览(38)
  • Python之字典一个key对应多个value

    python的字典是一个key对应一个value,如果想要一个key对应多个value,那么可以用以下几种方法来实现。 输出结果如下: 输出结果如下: 输出结果如下: defaultdict是Python内建dict类的一个子类,其使用一个factory_function作为输入,这个factory_function可以是list、set、str等等。 在实际

    2024年02月08日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包