JS遍历对象，获取key、value的几种方法

1. 使用for…in

let person = { name: '张三',age: '21',
}for(let key in person){if(Object.prototype.hasOwnProperty.call(person, key)){console.log('key-value',key,person[key])}
}
//key-value name 张三
//key-value age 21

为什么使用Object.prototype.hasOwnproperty.call(person, key)而不是person.prototype.hasOwnproperty(key)：
因为hasOwnproperty在js里并不是敏感词，因此可能当前对象有一个属性名叫hasOwnproperty，所以这里直接调原型链上的hasOwnproperty方法
call(person, key)的两个参数，第一个参数是this的指向对象，第二个参数是入参

2. 使用Object.keys()

let person = { name: '张三',age: '21',
}Object.keys(person).map(key => {console.log(key)
})
//name
//age
//Object.keys()返回自身的所有可枚举属性的数组:[name,age]
//Object.values()返回一个自身的所有可枚举属性值的数组：[张三,21]

3. 使用lodash库的map

平时使用lodash库比较多，最近发现lodash里map的迭代函数第二个参数是可以直接取到key的，原生js的map函数是不支持的。

import _ from 'lodash'let person = { name: '张三',age: '21',
}
_.map(person, (item, key) => {console.log('key-value',key,item)
})
//key-value name 张三
//key-value age 21

4. 使用Object.entries()

const object1 = {a: 'somestring',b: 42
};for (const [key, value] of Object.entries(object1)) {console.log(`${key}: ${value}`);
}// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed

JS遍历对象，获取key、value的几种方法相关推荐

js给对象动态添加属性的2种方法
js给对象动态添加属性的2种方法需求: 要给每个课程添加一个判断鼠标是否hover 分析: 因为数据是动态渲染的,所以需要动态的给他添加一个flag标记,就得在数据渲染之前先拿到,然后再添加一个自己 ...
js遍历对象的key和value
如果想要得到数组的键值对,可以用以下方法 object = {"name":"kejin","age":"18"}for ...
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遍历对象
分支循环结构分支结构 v-show的原理:控制元素样式是否显示 display:none <!DOCTYPE html> <html lang="en"> ...
js 遍历对象的几种方法
第一种: for......in const obj = {id:1,name:'zhangsan',age:18}for(let key in obj){console.log(key + '--- ...
js 遍历对象方法大全
目录前言键值对遍历(推荐) 键遍历值遍历尾言前言记录一下js遍历对象的方法,做个分类比较好记. 键值对遍历(推荐) 同时得到键(key)和值(value) for (let [key, v ...
android json 遍历keys,js遍历json的key和value的实例
原生js遍历json对象遍历json对象: 无规律: var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}]; for(var i=0 ...
遍历对象属性_细说JS遍历对象属性的N种方法
本人详细介绍了JS遍历对象N种方法,欢迎关注收藏. 遍历对象属性有五种方法,下图为一个场景对比图. 可以注意到两点: 只有for ... in 才可以遍历原型链属性,且只能遍历可枚举属性. Objec ...
js遍历（获取）ul中的li
js遍历(获取)ul中的li <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...