for、forEach、for in、for of用法
循环遍历数组或者对象,for、forEach、for in 、 for of 使用最多
for循环
自Javascript诞生时就有,遍历数组,for 循环的语法如下:
for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
举例说明
var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
console.log(arr[i]); // 1 2 3 4 (输出结果)
}
forEach循环
从ES5开始 Javascript内置了forEach方法 遍历数组
let arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, idx, arr) {
console.log(val + ', index = ' + idx) // val是当前元素,index当前元素索引,arr数组
console.log(arr)
})
输出结果
a, index = 0
(4) ["a", "b", "c", "d"]
b, index = 1
(4) ["a", "b", "c", "d"]
c, index = 2
(4) ["a", "b", "c", "d"]
d, index = 3
(4) ["a", "b", "c", "d"]
写法简单了很多,但是也存在一个局限 就是你不能中断循环(使用break语句或使用return语句)。
for in循环
for-in循环实际是为循环”enumerable“对象而设计的
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d
console.log(obj[o]) //这个才是属性对应的值1,2,3,4
}
for - in 也可用来循环数组,但一般并不推荐
for of循环
它是ES6中新增加的语法
循环一个数组
let arr = ['China', 'America', 'Korea']
for (let o of arr) {
console.log(o) //China, America, Korea
}
但是它并不能循环一个普通对象
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of obj) {
console.log(o) //Uncaught TypeError: obj[Symbol.iterator] is not a function
}
但是可以循环一个拥有enumerable属性的对象。
如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()方法
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
console.log(o) // a,b,c,d
}
如果我们按对象所拥有的属性值进行循环,可使用内置的Object.values()方法
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
console.log(o) // 1,2,3,4
}
循环一个字符串
let str = 'love'
for (let o of str) {
console.log(o) // l,o,v,e
}
循环一个Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]
循环一个Set
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
循环一个类型化数组
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
}
// 0
// 255
for、forEach、for in、for of用法的更多相关文章
- JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别
JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别 :https://blog.csdn.net/hyupeng1006/a ...
- MyBatis从入门到精通(第4章):MyBatis动态SQL【foreach、bind、OGNL用法】
(第4章):MyBatis动态SQL[foreach.bind.OGNL用法] 4.4 foreach 用法 SQL 语句中有时会使用 IN 关键字,例如 id in (1,2,3).可以使用 ${i ...
- c:forEach 标签中varStatus的用法
c:forEach varStatus属性 current 当前这次迭代的(集合中的)项index 当前这次迭代从 0 开始的迭代索引count 当前这次迭代从 1 开始的迭代计数first 用来 ...
- JS中的 map, filter, some, every, forEach, for...in, for...of 用法总结
1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5]; let other = list.map((d, i) => { ...
- mybatis 中 foreach collection的三种用法
foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有 item,index,collection,open,separator,close. ...
- [转载]JS中 map, filter, some, every, forEach, for in, for of 用法总结
转载地址:http://codebay.cn/post/2110.html 1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5] ...
- mybatis 中 foreach collection的三种用法(转)
文章转自 https://blog.csdn.net/qq_24084925/article/details/53790287 oreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集 ...
- JS中 map, filter, some, every, forEach, for in, for of 用法总结
本文转载自:http://blog.csdn.net/gis_swb/article/details/52297343 1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let ...
- JSP中forEach和forTokens循环的用法
<%@page import="java.util.*"%> <%@ page language="java" contentType=&qu ...
- PHP中使用foreach时加&符号的用法
foreach时加&符号:遍历的同时改变原数组即修改数据或者增加数据. $arr = ['a', 'b', 'c']; foreach ($arr as $key => &$va ...
随机推荐
- Openstack object list 一次最多有一万个 object
When you request a list of containers or objects, Object Storage returns a maximum of 10,000 names f ...
- asList和ArrayList不得不说的故事
目录 简介 创建ArrayList UnsupportedOperationException asList 转换 总结 asList和ArrayList不得不说的故事 简介 提到集合类,ArrayL ...
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 图论--2-SAT--Ligthoj 1407 Explosion 三元关系枚举
Planet Krypton is about to explode. The inhabitants of this planet have to leave the planet immediat ...
- ln命令:软链接与硬链接的区别与应用
ln命令:软链接与硬链接的区别与应用 摘要 Linux系统中,链接是一个十分常见且实用的文件处理命令,它分为软链接和硬链接两种类型.软链接类似于Windows中的快捷方式,硬链接又有着与原文件保持同步 ...
- Android 开发技术周报 Issue#278
新闻 Pixel 4a渲染图曝光:或能成新款iPhone SE有力竞争者 Google Play商店为预注册的游戏和应用提供自动安装功能 Android最强单摄Pixel 4a样张曝光:1200万像素 ...
- 自定义View实战
PS:上一篇从0开始学自定义View有博友给我留言说要看实战,今天我特意写了几个例子,供大家参考,所画的图案加上动画看着确实让人舒服,喜欢的博友可以直接拿到自己的项目中去使用,由于我这个写的是demo ...
- Tarjan缩点割点(模板)
描述:https://www.luogu.com.cn/problem/P3387 给定一个 nn 个点 mm 条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权 ...
- Vuel路由跳转动画
1.App.vue中添加 <transition :name="animate"> <router-view/> </transition> e ...
- spring boot中使用AJAX请求,并将回调函数赋值给input输入框
HTML: <script>/* $(document).ready(function(){} 页面加载事件,加载完页面之后执行 */ $(document).ready(function ...