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

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

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 数组遍历


相关文章
|
28天前
|
前端开发 JavaScript 开发者
水墨代码:前端川的诞生——在夏日阴雨中启航
【前端川】网站于农历五月初一(2024年6月6日)上线,融合水墨画与现代前端技术,呈现独特的水墨代码美学。创建者陈川分享技术心得与实战经验,网站特色包括水墨风格界面、技术深度解析及实战案例。在夏日雨中启航,"前端川"致力于为开发者提供灵感与帮助,探索前端技术的无限可能。
63 17
|
2月前
|
前端开发 JavaScript API
前端代码书写规范
前端代码规范提升项目可维护性和团队协作效率。关注项目命名清晰简洁、一致性,组件命名使用驼峰式且具描述性。JS遵循4空格缩进,分号结束语句,CSS按逻辑排序,HTML注重语义化。注释要功能性、文档化且简洁。遵循规范能减少错误,增强团队沟通。
104 3
|
2月前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
29 0
|
17天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
26 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
4天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
|
6天前
|
JSON 关系型数据库 MySQL
MySQL中GROUP_CONCAT与JSON_OBJECT、GROUP BY的巧妙结合:打造高效JSON数组汇总
MySQL中GROUP_CONCAT与JSON_OBJECT、GROUP BY的巧妙结合:打造高效JSON数组汇总
8 1
|
11天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
18 2
|
22天前
|
前端开发 JavaScript 安全
微前端架构采用 TypeScript 提升开发效率和代码可靠性
【6月更文挑战第12天】微前端架构采用 TypeScript 提升开发效率和代码可靠性。TypeScript 的类型安全防止了微前端间的类型错误,智能提示与自动补全加速开发,重构支持简化代码更新。通过定义公共接口和使用 TypeScript 编写微前端,确保通信一致性与代码质量。在构建流程中集成 TypeScript,保证构建正确性。总之,TypeScript 在微前端架构中扮演关键角色,推荐用于大型前端项目。
46 4
|
1天前
|
前端开发 API
支付系统27-------梳理一下支付按钮,前端的代码
支付系统27-------梳理一下支付按钮,前端的代码
|
2天前
|
前端开发 JavaScript API
前端 JS 经典:数组新增 API
前端 JS 经典:数组新增 API
4 0