Object.keys()的使用方法及数组遍历

Object.keys()用于获得由对象属性名组成的数组，可与数组遍历相结合使用，非常好用。和for...in方法功能类似，但有使用区别！

数组遍历可以用for()或forEach()来实现，forEach()方法是ECMAScript5定义的遍历数组的一个新方法，按照索引的顺序挨个传递给定义的函数；

接下来就Object.keys()分别结合for()和forEach()使用进行运用，用console.info()输出到控制台，代码如下：

方法一：forEach()

// 创建对象
var person = {name: 'hjm',age: 18,school:"SKD University",home: 'China'
}// 用forEach()进行遍历
var keys = Object.keys(person).forEach(function (e) {console.log("person ", e, ": ", person[e]);
});

运行的结果如下图所示：

方法二：for()方法

// 创建一个对象
var person = {name: 'hjm',age: 18,school:"SKD University",home: 'China'
}// 获得对象属性名组成的数组
var keys = Object.keys(person);// 用于存储匹配的属性值
var value = [];// 用for进行遍历
for (var i = 0,len = keys.length; i < len; i++) {var key = keys[i];value[i] = person[key];console.log("person ", key, ": ", value[i]);
}

运行的结果如下图所示：

两种方法的结果是一样的，至于使用哪种方法，就智者见智，仁者见仁了。

for()：用起来比较容易上手，但太罗嗦；

forEach()：和相关的遍历方法结合，使得数组拥有简单而强大的函数式编程风格，更加强大。

Tips：for...in会遍历整个原型链，这可能不是你所期望的结果，然后从性能角度上看Object.keys会更优。在一些eslint的规则中也默认禁用了forin循环。

拓展： JS几种数组遍历方式总结（包括各自遍历的性能分析）：JS几种数组遍历方式总结_function__的博客-CSDN博客_js 数组遍历

【前端】Object.keys()的使用方法及数组遍历，Object.keys(object).forEach(e =＞ {您的代码})相关推荐

php的遍历方法,PHP数组遍历方法总结
在PHP中数组分为两类: 数字索引数组和关联数组. 其中数字索引数组和C语言中的数组一样,下标是为0,1,2- 而关联数组下标可能是任意类型,与其它语言中的hash,map等结构相似. 下面介绍PHP ...
Object类的各个方法及其作用
Object类的各个方法及其作用一.简介Object类 1.Object类是所有类的父类,即每个类都直接或简介继承自该类.所以一个Object类型的变量可以引用任何对象,不论是类实例还是数组. ...
Java方法实现数组的遍历、获取数组的最大值和最小值
1. Java方法的练习:数组遍历需求:设计一个方法用于数组遍历,要求遍历的结果是在一行上的.例如:[11, 22, 33, 44, 55] import java.util.Scanner;//需 ...
数组实例的entries(),keys() 和 values()方法
数组实例的entries(),keys() 和 values()方法 ES6 提供三个新的方法--entries(),keys()和values()--用于遍历数组.它们都返回一个遍历器对象(详见&l ...
前端百题斩【019】——数组中方法原理早知道
写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第19斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. js的Ar ...
前端表格导出为excel方法合集
前端表格导出为excel方法合集近来遇到了前端表格保存为excel的需求,通过查阅多方资料,总结了3种方法,下面一一进行展示,有不正确的地方,望指正.主要包括两种导出方法--纯前端导出和前端接收后端 ...
个人碰到的前端问题总结及解决方法1
个人碰到的前端问题总结及解决方法1 文章目录个人碰到的前端问题总结及解决方法1 1.如何判断内容是否超出容器宽度或高度? 2.如何使用jQuery隐藏元素? 3.如何实时监听方法?(想实现实时监听浏 ...
ECMA262 Edition5 Object,Object的属性和方法,Object.prototype的方法.
ES5,为Object添加了一批方法.了解这些方法,可以更好的理解属性描述符的应用. 所以还是很有必要读一读的.另外,这些方法用起来还是蛮给力的. 暂时对于ES5,就只放出这些吧,希望对大家有所帮助. ...
ajax post提交数组6,jQuery的ajax()、post()方法提交数组，参数[] 问题
当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List,或Integer[] 等数组对象进行接收. 比如: $.ajax({ type: "POST", u ...

【前端】Object.keys()的使用方法及数组遍历，Object.keys(object).forEach(e =＞ {您的代码})

Object.keys()的使用方法及数组遍历

方法一：forEach()

方法二：for()方法

【前端】Object.keys()的使用方法及数组遍历，Object.keys(object).forEach(e =＞ {您的代码})相关推荐

最新文章

热门文章