总结JavaScript中的循环遍历定义一个数组和对象

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
const obj = {
a: 1,
b: 2,
c: 3,
d: 4
}

for()

经常用来遍历数组元素

遍历值为数组元素索引

or (let i = 0; len = arr.length, i < len; i++) {
console.log(i); // 0 1 2 3 4 5
console.log(arr[i]); // a b c d e f
}

forEach()

用来遍历数组元素

第一个参数为数组元素,第二个参数为数组元素索引,第三个参数为数组本身(可选)

没有返回值

console.log(item);   // a b c d e f
console.log(index); // 0 1 2 3 4 5
})

map()

用来遍历数组元素

第一个参数为数组元素,第二个参数为数组元素索引,第三个参数为数组本身(可选)

有返回值,返回一个新数组

every(),some(),filter(),reduce(),reduceRight()不再一一介绍,详细请看Js中Array方法有哪些?
let arrData = arr.map((item, index) => {
console.log(item); // a b c d e f
console.log(index); // 0 1 2 3 4 5
return item;
})
console.log(arrData); // ["a", "b", "c", "d", "e", "f"]

for...in

可循环对象和数组,推荐用于循环对象

用于循环对象时

循环值为对象属性

for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key); // a b c d 属性
console.log(obj[key]); // 1 2 3 4 属性值
}
}

用于遍历数组时

值为数组索引

for (let index in arr) {
console.log(index); // 0 1 2 3 4 5 数组索引
console.log(arr[index]); // a b c d e f 数组值
}

当我们给数组添加一个属性name

arr.name = '我是自定义的属性'

for (let index in arr) {
console.log(index); // 0 1 2 3 4 5 name (会遍历出我们自定义的属性)
console.log(arr[index]); // a b c d e f 我是自定义属性name
}

for...of

可循环对象和数组,推荐用于遍历数组

用于遍历数组时

遍历值为数组元素

for (let value of arr) {
console.log(value); // a b c d e f 数组值
}

用于循环对象时

须配合Object.keys()一起使用,直接用于循环对象会报错,不推荐使用for...of循环对象

循环值为对象属性

for (let value of Object.keys(obj)) {
console.log(value); // a b c d 对象属性
}

总结用于遍历数组元素使用:for(),forEach(),map(),for...of 用于循环对象属性使用:for...in

文章同步发布: https://www.geek-share.com/detail/2755529958.html

参考文章:

JavaScript循环遍历你会用哪些之小结篇

Javascript 数组循环遍历之forEach

JavaScript 中的12种循环遍历方法

你会用哪些JavaScript循环遍历的更多相关文章

  1. javascript循环遍历数组输出key value

    javascript循环遍历数组输出key value用$.each方法肯定不行的 所以采用如下方法<pre> markers = []; markers[2]=3; markers[3] ...

  2. JavaScript基础精华03(String对象,Array对象,循环遍历数组,JS中的Dictionary,Array的简化声明)

    String对象(*) length属性:获取字符串的字符个数.(无论中文字符还是英文字符都算1个字符.) charAt(index)方法:获取指定索引位置的字符.(索引从0开始) indexOf(‘ ...

  3. 手写js代码(一)javascript数组循环遍历之forEach

    注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...

  4. JavaScript数组循环遍历之forEach

    1.  js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2.  forEac ...

  5. JavaScript 中的12种循环遍历方法

    原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...

  6. javascript中常见的几种循环遍历

    项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环.javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历. 一.for循环 for循环应该 ...

  7. JavaScript 中的常用12种循环遍历(数组或对象)的方法

    1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 ...

  8. javascript中的12种循环遍历方法1

    1:for循环 let arr = [1,2,3]; for(let i =0;i<arr.length;i++){ console.log(i,arr[i]) } //for循环是js中最常用 ...

  9. json原理和jquey循环遍历获取所有页面元素

    1.json原理: javascript object notation (javascript 对象表示法) 是一种轻量级的数据交换语言,由javascript衍生而出,适用于.NET java c ...

随机推荐

  1. Spring Boot - 自定义 Banner 图案

    我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章,回复[资料],即可获得我精心整理的技术资料,电子书籍,一线大厂面试资料和优秀简历模板. 前言 ...

  2. Rabbitmqpool

    import pika import threading import random import uuid import json # 框架模块 from django.conf import se ...

  3. TVM部署预定义模型

    TVM部署预定义模型 本文通过深度学习框架量化的模型加载到TVM中.预量化的模型导入是在TVM中提供的量化支持之一. 本文演示如何加载和运行由PyTorch,MXNet和TFLite量化的模型.加载后 ...

  4. NVIDIA GPU上的直接线性求解器

    NVIDIA GPU上的直接线性求解器 NVIDIA cuSOLVER库提供了密集且稀疏的直接线性求解器和本征求解器的集合,它们为计算机视觉,CFD,计算化学和线性优化应用程序提供了显着的加速.cuS ...

  5. TensorFlow解析常量、变量和占位符

    TensorFlow解析常量.变量和占位符 最基本的 TensorFlow 提供了一个库来定义和执行对张量的各种数学运算.张量,可理解为一个 n 维矩阵,所有类型的数据,包括标量.矢量和矩阵等都是特殊 ...

  6. jvm调优的几种场景

    假定你已经了解了运行时的数据区域和常用的垃圾回收算法,也了解了Hotspot支持的垃圾回收器. 一.cpu占用过高 cpu占用过高要分情况讨论,是不是业务上在搞活动,突然有大批的流量进来,而且活动结束 ...

  7. Spring Cloud系列(四):断路器Hystrix

    上一篇介绍了负载均衡的配置方法,做负载均衡是为了保证高可用性,但是有时候服务提供者挂掉了,比如服务A调用了服务B,服务B又调用了服务C,然后有一天服务C的所有节点都挂掉了,这时服务B就会因为C异常而在 ...

  8. mybatis之模糊查询

    1.编写接口 List<User> getUserLike(String value); 2.编写映射文件 <select id="getUserLike" re ...

  9. UF_VEC 向量相关

    Open C UF_VEC2_addUF_VEC2_affine_combUF_VEC2_ask_perpendicularUF_VEC2_componentsUF_VEC2_convex_combU ...

  10. 痞子衡嵌入式:超级下载算法(RT-UFL)开发笔记番外(1) - JLinkScript妙用

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是超级下载算法开发笔记番外篇之JLinkScript妙用. JLinkScript 文件是配套 J-Link 调试器使用的脚本,这个脚本适 ...