数组遍历和对象遍历的常用方法

1.数组的遍历

1.1 for循环

for循环是最常用的一种循环方式,特别适用于已知遍历次数的情况下,它由三部分组成(初始化表达式、循环条件、循环迭代器),这三个表达式用分号进行分割。

ini 复制代码
       const array=[1,2,3,4,5];
        for(let i=0;i<array.length;i++){
            console.log(array[i]);
        }

1.2 foreach方法

foreach是javascript方法内置的一种数组的方式,用于遍历数组的每个元素并执行指定的回调函数,回调函数接受三个参数,当前元素的值element、当前元素的索引index、正在遍历的数组array。

c 复制代码
        const array = [1, 2, 3, 4, 5];
        array.forEach((Element, index, array) => {
            console.log(Element);
            console.log(index);
        })
  • foreach没有返回值,也不会改变原数组
  • 无法终止

1.3 for.....of循环(适用于数组和可迭代对象)

for...of可用于遍历的可迭代对象(数组、字符串、Set、Map等)

c 复制代码
   const array = [1, 2, 3, 4, 5];
        for (let item of array) {
            console.log(item);

        }
  • 可以用break、continue、return来终止循环

1.4 map方法

用于对数组的每个值执行指定的操作,并返回一个新数组,新数组的元素是原数组经过操作后的结果。同样需要传递一个回调函数作为参数,回调函数接受三个参数,当前元素的值element、当前元素的索引index、正在遍历的数组array。

c 复制代码
        const array = [1, 2, 3, 4, 5];
        const newarray = array.map((Element) => {
            return Element * 2
        })
        console.log(newarray);
  • 不会对空数组进行检测
  • map无法遍历对象,仅适用于数组的遍历

1.5 reduce方法

reduce方法用于对数组的每个元素进行累积操作,并返回一个最终的累积结果。同样需要传递一个回调函数,该回调函数有四个参数:累积值accumulator、当前元素element、当前元素的索引index、正在遍历的数组array。

c 复制代码
      const array = [1, 2, 3, 4, 5];
        const newarray = array.reduce((accumulator,Element) => {
            return accumulator+Element
        })
        console.log(newarray);
ini 复制代码
      const result = allValues.value.reduce((acc, value, index) => {
        const key = `question${index + 1}`;
        acc[key] = value;
        return acc;
      }, {} as QuestionAnswerObject);
  • reduce不会改变原数组。
  • reduce可以接受一个可选初始值initialValue作为第二个参数。如果提供了初始值,累积值accumulator的初始值将为该值;如果未提供初始值,则累积值将作为数组的第一个元素,且从数组的第二个元素开始进行累积操作。
  • 如果数组为空,且未提供初始值,则reduce方法会抛出一个错误TypeError。在处理可能为空的数组时,要确保提供合适的初始值。

2.对象的遍历

2.1for...in循环

for..in循环是一种用于遍历对象的属性循环结构,它可以遍历对象的可枚举性。

typescript 复制代码
        const object = { a: 1, b: 2, c: 3 }
        for (item in object) {
            console.log(item + ":" + object[item]);

        }
  • for..in遍历的是对象的属性,而不是值
  • 它会遍历对象的可枚举属性,包括自身属性和其原型链上面的属性,如果只需要遍历对象自身的属性,可以使用object.hasOwnProperty()方式进行过滤

2.2 object.keys

返回的是键的数组,这些属性的顺序与手动遍历该对象的属性一致。

typescript 复制代码
        const object = { a: 1, b: 2, c: 3 }
        // for (item in object) {
        //     console.log(item + ":" + object[item]);
        // }
        console.log(        Object.keys(object));

2.3object.values

返回的是值的数组,这些属性的顺序与手动遍历该对象的属性一致。

typescript 复制代码
        const object = { a: 1, b: 2, c: 3 }
        // for (item in object) {
        //     console.log(item + ":" + object[item]);
        // }
        console.log(        Object.values(object));
相关推荐
Hooray14 分钟前
前端暗黑模式的适配艺术
前端·vue.js·视觉设计
恋猫de小郭15 分钟前
解析华为 DevEco Code 和小米 MiMo Code,都基于 OpenCode ,有什么区别?
android·前端·ios
IT_陈寒16 分钟前
Vue的响应式让我原地裂开,你们也有这情况吗
前端·人工智能·后端
问心无愧051334 分钟前
ctfshow web入门114
android·前端·笔记
晓得迷路了38 分钟前
栗子前端技术周刊第 133 期 - Angular v22、React 编译器 Rust 版、pnpm 11.5...
前端·javascript·css
一个被程序员耽误的厨师40 分钟前
02-架构篇-前端怎么反客为主把AI编排权拿回到自己手里
前端·人工智能·架构
羊羊小栈1 小时前
基于混合检索RAG的食品生产质量问答系统(BGE_BM25_大语言模型)
前端·人工智能·语言模型·自然语言处理·毕业设计·大作业
烤代码的吐司君1 小时前
Redis 服务配置与使用
前端·bootstrap·html
之歆1 小时前
Ajax 基础技术深度解析:XHR 从入门到跨域
前端·ajax·okhttp
怕浪猫1 小时前
Electron 开发实战(十四):实战项目|从零搭建轻量化桌面代码编辑器
前端·electron·node.js