js遍历对象key,value
声明一个对象:
let obj = {name: 'Kamen',age: '23',hobby: 'eat eat eat'}
方法一:转化为操作数组forEach遍历
遍历对象属性
//遍历对象属性
Object.keys(obj).forEach(key => {console.log(key)})
关于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)
})
关于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])}
注意:该方法会继承原型链的所有属性,例如:
Object.prototype.pet = 'open'
for( let key in obj ){console.log(key)console.log(obj[key])
}
console.log(obj)
上述情况可以使用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相关推荐
- 分支结构||分支循环结构||使用原生js遍历对象
分支循环结构 分支结构 v-show的原理:控制元素样式是否显示 display:none <!DOCTYPE html> <html lang="en"> ...
- js遍历对象的几种方法
js遍历对象的几种方法 第一种: for......in const obj = {id:1,name:'zhangsan',age:18 }for(let key in obj){console.l ...
- js遍历对象(js遍历对象的所有属性)
js 遍历对象的3种方法 第一种: for......in const obj = { id:1, name:'zhangsan', age:18 } for(let key i ...
- js 遍历对象方法大全
目录 前言 键值对遍历(推荐) 键遍历 值遍历 尾言 前言 记录一下js遍历对象的方法,做个分类比较好记. 键值对遍历(推荐) 同时得到键(key)和值(value) for (let [key, v ...
- 遍历对象属性_细说JS遍历对象属性的N种方法
本人详细介绍了JS遍历对象N种方法,欢迎关注收藏. 遍历对象属性有五种方法,下图为一个场景对比图. 可以注意到两点: 只有for ... in 才可以遍历原型链属性,且只能遍历可枚举属性. Objec ...
- JS中对象key为数字的使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>JS中 ...
- JS声明对象key为变量
JS声明对象key为变量 给对象的键加方括号即可,如下: const roomName = room.roomName const roomDetail = { [roomName]: roomDes ...
- js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
1.给对象添加属性:使用 object.prop 或object['prop'] 给对象添加属性 let obj={};obj.name="zhangsan";obj[" ...
- js 遍历对象的方式
1. for in 循环 for in 循环诞生于es5,主要用于遍历对象的可枚举属性(自有属性.继承自原型的属性).可枚举,可理解为可遍历,是由属性的enumerable值决定的,在js中基本包 ...
最新文章
- ArcIMS .NET Link的开发配置
- What’s the Difference between a Hue, Tint, Shade and Tone ?
- SCI如何确保PDF中的图片够清晰?
- graphpad导出图片不居中_从GraphPad Prism一键导出满足期刊要求的图表
- 初一辍学学php能行吗_《夺冠》破7亿,辍学的农村姑娘成排球女王,朱婷:百炼才能成钢...
- docker学习指南
- Global.asax.cs中的方法(包括自定义方法)的含义
- 互联网的的一些历史资料收集
- media query学习笔记
- C++ 开源密码库之OpenSSL的使用
- Kafka序列化器,分区器,拦截器,消息累加器
- blender 2.8的基本使用和使用形态键(Shape key)做帧动画
- SpringBoot启动报错:Failed to introspect Class [XXX] from ClassLoader
- 普通table表格样式大全
- 【Android】Android开源项目分类汇总
- synchronized 是什么意思?
- webSocket抓包分析
- 虚拟机套娃折腾之路:在ESXI的WIN10上跑Android模拟器并直通显卡
- linux运行rcp,Linux rcp 命令
- 博世中国区总裁陈玉东:100亿欧元的智能家居市场大有可为