当前位置: 首页 > news >正文

JS遍历数组和对象的常用方法有哪些?

在JavaScript中,遍历数组和对象的常用方法有很多。以下是一些常用的方法:
遍历数组

    for 循环:
        这是最传统的遍历数组的方法。

    javascript

var array = [1, 2, 3, 4, 5];  
for (var i = 0; i < array.length; i++) {  
    console.log(array[i]);  

}

for...of 循环(ES6+):

    专门用于遍历可迭代对象(包括数组、Map、Set、String、TypedArray、函数的 arguments 对象等等)。

javascript

var array = [1, 2, 3, 4, 5];  
for (var item of array) {  
    console.log(item);  

}

forEach 方法:

    forEach 是数组的一个方法,用于遍历数组的每个元素。

javascript

var array = [1, 2, 3, 4, 5];  
array.forEach(function(item) {  
    console.log(item);  

});

map 方法:

    map 方法也用于遍历数组,但通常用于生成新的数组,通过函数处理每个元素。

javascript

var array = [1, 2, 3, 4, 5];  
var newArray = array.map(function(item) {  
    return item * 2;  
});  

console.log(newArray); // [2, 4, 6, 8, 10]

filter 方法:

    filter 方法用于过滤数组中的元素,返回满足条件的元素组成的新数组。

javascript

var array = [1, 2, 3, 4, 5];  
var filteredArray = array.filter(function(item) {  
    return item > 3;  
});  

console.log(filteredArray); // [4, 5]

reduce 方法:

    reduce 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个输出值。

javascript

var array = [1, 2, 3, 4, 5];  
var sum = array.reduce(function(accumulator, currentValue) {  
    return accumulator + currentValue;  
}, 0);  

    console.log(sum); // 15

    some 和 every 方法:
        some 测试数组中是否至少有一个元素通过由提供的函数实现的测试。
        every 测试数组的所有元素是否都通过了由提供的函数实现的测试。

遍历对象

    for...in 循环:
        用于遍历对象的可枚举属性(包括继承的属性)。

    javascript

var obj = {a: 1, b: 2, c: 3};  
for (var key in obj) {  
    if (obj.hasOwnProperty(key)) { // 过滤掉继承的属性  
        console.log(key, obj[key]);  
    }  

}

Object.keys() 方法:

    返回一个表示给定对象的所有可枚举属性的字符串数组(不包括继承的属性)。

javascript

var obj = {a: 1, b: 2, c: 3};  
Object.keys(obj).forEach(function(key) {  
    console.log(key, obj[key]);  

});

Object.values() 方法(ES2017+):

    返回一个给定对象自身可枚举属性的值组成的数组,其排列与使用 for...in 循环的顺序相同(两者的主要区别是 for-in 循环枚举原型链中的属性)。

javascript

var obj = {a: 1, b: 2, c: 3};  
Object.values(obj).forEach(function(value) {  
    console.log(value);  

});

相关文章:

  • 千益畅行,旅游卡真相,成本与赋能潜力
  • CSS打印设置页眉页脚
  • #QT(QCharts绘制曲线)
  • Dify vs Langchain:AI应用开发的全面分析
  • abstract 的 method 是否可同时是 static,是否可同时是 native,是否可同时是 synchronized?
  • SpringBoot快速入门-上
  • 用户需求分析揭秘:最佳实践与策略
  • 计算机网络——传输层重要协议(TCP、UDP)
  • ABBYY 15软件下载-ABBYY FineReader 15中文版下载附加详细安装步骤
  • 鸿蒙实现自定义Tabbar样式,显示数字红点提示
  • 什么是LLM?看这一篇就够了!
  • k8s 1.28 搭建rabbitmq集群
  • 充电学习—2、开关电源基本原理
  • 【ARMv8/ARMv9 硬件加速系列 3 -- SVE 指令语法及编译参数详细介绍】
  • 26 种 prompt 套路,驯服大模型
  • Angular 响应式表单 基础例子
  • ECMAScript入门(七)--Module语法
  • Java 9 被无情抛弃,Java 8 直接升级到 Java 10!!
  • Java 实战开发之spring、logback配置及chrome开发神器(六)
  • Java 网络编程(2):UDP 的使用
  • Java-详解HashMap
  • Java小白进阶笔记(3)-初级面向对象
  • linux学习笔记
  • Making An Indicator With Pure CSS
  • Python进阶细节
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • Vue2.x学习三:事件处理生命周期钩子
  • 分布式任务队列Celery
  • 分类模型——Logistics Regression
  • 开年巨制!千人千面回放技术让你“看到”Flutter用户侧问题
  • 前端学习笔记之原型——一张图说明`prototype`和`__proto__`的区别
  • 《TCP IP 详解卷1:协议》阅读笔记 - 第六章
  • ​​​​​​​​​​​​​​Γ函数
  • ​猴子吃桃问题:每天都吃了前一天剩下的一半多一个。
  • #ubuntu# #git# repository git config --global --add safe.directory
  • #每天一道面试题# 什么是MySQL的回表查询
  • $.ajax()参数及用法
  • (floyd+补集) poj 3275
  • (南京观海微电子)——I3C协议介绍
  • (亲测有效)推荐2024最新的免费漫画软件app,无广告,聚合全网资源!
  • (十五)Flask覆写wsgi_app函数实现自定义中间件
  • (收藏)Git和Repo扫盲——如何取得Android源代码
  • (转) 深度模型优化性能 调参
  • (转)http协议
  • *** 2003
  • .equals()到底是什么意思?
  • .NET Core Web APi类库如何内嵌运行?
  • .net core 依赖注入的基本用发
  • .NET版Word处理控件Aspose.words功能演示:在ASP.NET MVC中创建MS Word编辑器
  • .net用HTML开发怎么调试,如何使用ASP.NET MVC在调试中查看控制器生成的html?
  • /tmp目录下出现system-private文件夹解决方法
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛(朱雀组)
  • []我的函数库
  • [16/N]论得趣
  • [Algorithm][动态规划][子序列问题][最长递增子序列][摆动序列]详细讲解