你会用哪些JavaScript循环遍历
总结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循环遍历数组输出key value
javascript循环遍历数组输出key value用$.each方法肯定不行的 所以采用如下方法<pre> markers = []; markers[2]=3; markers[3] ...
- JavaScript基础精华03(String对象,Array对象,循环遍历数组,JS中的Dictionary,Array的简化声明)
String对象(*) length属性:获取字符串的字符个数.(无论中文字符还是英文字符都算1个字符.) charAt(index)方法:获取指定索引位置的字符.(索引从0开始) indexOf(‘ ...
- 手写js代码(一)javascript数组循环遍历之forEach
注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...
- JavaScript数组循环遍历之forEach
1. js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2. forEac ...
- JavaScript 中的12种循环遍历方法
原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...
- javascript中常见的几种循环遍历
项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环.javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历. 一.for循环 for循环应该 ...
- 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 ...
- 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中最常用 ...
- json原理和jquey循环遍历获取所有页面元素
1.json原理: javascript object notation (javascript 对象表示法) 是一种轻量级的数据交换语言,由javascript衍生而出,适用于.NET java c ...
随机推荐
- Spring Boot - 自定义 Banner 图案
我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章,回复[资料],即可获得我精心整理的技术资料,电子书籍,一线大厂面试资料和优秀简历模板. 前言 ...
- Rabbitmqpool
import pika import threading import random import uuid import json # 框架模块 from django.conf import se ...
- TVM部署预定义模型
TVM部署预定义模型 本文通过深度学习框架量化的模型加载到TVM中.预量化的模型导入是在TVM中提供的量化支持之一. 本文演示如何加载和运行由PyTorch,MXNet和TFLite量化的模型.加载后 ...
- NVIDIA GPU上的直接线性求解器
NVIDIA GPU上的直接线性求解器 NVIDIA cuSOLVER库提供了密集且稀疏的直接线性求解器和本征求解器的集合,它们为计算机视觉,CFD,计算化学和线性优化应用程序提供了显着的加速.cuS ...
- TensorFlow解析常量、变量和占位符
TensorFlow解析常量.变量和占位符 最基本的 TensorFlow 提供了一个库来定义和执行对张量的各种数学运算.张量,可理解为一个 n 维矩阵,所有类型的数据,包括标量.矢量和矩阵等都是特殊 ...
- jvm调优的几种场景
假定你已经了解了运行时的数据区域和常用的垃圾回收算法,也了解了Hotspot支持的垃圾回收器. 一.cpu占用过高 cpu占用过高要分情况讨论,是不是业务上在搞活动,突然有大批的流量进来,而且活动结束 ...
- Spring Cloud系列(四):断路器Hystrix
上一篇介绍了负载均衡的配置方法,做负载均衡是为了保证高可用性,但是有时候服务提供者挂掉了,比如服务A调用了服务B,服务B又调用了服务C,然后有一天服务C的所有节点都挂掉了,这时服务B就会因为C异常而在 ...
- mybatis之模糊查询
1.编写接口 List<User> getUserLike(String value); 2.编写映射文件 <select id="getUserLike" re ...
- UF_VEC 向量相关
Open C UF_VEC2_addUF_VEC2_affine_combUF_VEC2_ask_perpendicularUF_VEC2_componentsUF_VEC2_convex_combU ...
- 痞子衡嵌入式:超级下载算法(RT-UFL)开发笔记番外(1) - JLinkScript妙用
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是超级下载算法开发笔记番外篇之JLinkScript妙用. JLinkScript 文件是配套 J-Link 调试器使用的脚本,这个脚本适 ...