JavaScript 中的六种循环方法


Posted in Javascript onJanuary 06, 2021

Javascript中的遍历循环

1.for循环

对于数值索引的数组来说,可以使用标准的for循环来遍历值

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

2.for...in循环

for...in循环可以用来遍历对象的可枚举属性列表(包括原型链上的属性)

const myObject={};

Object.defineProperty(myobject,"a",{
  //可枚举
	enumerable:true,
  value:2,
})
Object.defineProperty(myobject,"b",{
  //不可枚举
	enumerable:false,
  value:2,
})

for(let k in myObject){
  console.log(k,myObject[k])
	// a 2
}
//使用for...in循环是无法直接获得属性值的,因为它实际遍历的是对象中的所有可枚举属性,
//所以你需要手动获得属性值.

在数组上应用for...in循环,不仅仅会包含所有数值索引,还会包含所有可枚举属性.

所以最好在对象上应用for...in循环。如果要遍历数组最好使用传统的for循环来遍历.

3.for...of循环

1.ES6新增的for...of循环

const arr=[1,2,3];
for(let value of arr){
  console.log(value)
  //1
  //2
  //3
}

for...of循环首先会向所有被访问的对象请求一个迭代器对象,然后通过调用迭代器对象的next()方法来遍历所有返回值

在数组中有内置的@@iterator,因此for...of可以直接应用在数组上。

使用内置的@@iterator遍历数组

const arr=[1,2,3];
//获取数组中的iterator对象:使用ES6中的符号Symbol.iterator来获取对象的@@iteraotr内部属性.
//@@iterator本身不是一个迭代器,而是一个返回迭代器对象的函数。
const it=arr[Symbol.iterator]();

it.next(); //{value:1,done:false}
it.next(); //{value:2,done:false}
it.next(); //{value:3,done:false}
it.next(); //{done:true}

//调用迭代器的next()方法会返回形式为{value:..,done:..}的值;
//value为当前的值,done是一个布尔值,表示是否还存在可以遍历的值

2.给对象定义@@iterator

const myObject={
  a:2,
  b:3
}
Object.defineProperty(myObject,Symbol.iterator,{
	enumerable:false,
  writeable:false,
  configurable:true,
  value:function(){
    let o=this;
    let idx=0;
    //对象中的属性数组
    let ks=Object.keys(o);
    return{
      value:o[ks[idx++]],
      done:(idx>ks.length);
    }
  }
})

const it=myObject[Symbol.iterator]();
it.next(); //{value:2,done:false}
it.next(); //{value:3,done:false}
it.next(); //{done:true}


for(let value of myObject){
	console.log(value);
}
// 2
// 3

4.foreach(...)

**forEach()** 方法对数组的每个元素执行一次给定的函数。

const arr = ['a', 'b', 'c'];
arr.forEach(element => console.log(element));
// a
// b
// c
arr.forEach(callback(currentValue [,index [,array]])[,thisArg])

5.some(...)

some()是对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true。

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
 
console.log( arr.some( function( item, index, array ){ 
  console.log( 'item=' + item + ',index='+index+',array='+array ); 
  return item > 3; 
})); 
// item=1,index=0,array=1,2,3,4,5,6
// item=2,index=1,array=1,2,3,4,5,6
// item=3,index=2,array=1,2,3,4,5,6
// item=4,index=3,array=1,2,3,4,5,6
// true

6.every(...)

every()是对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true。

var arr = [ 1, 2, 3, 4, 5, 6 ]; 

console.log( arr.every( function( item, index, array ){ 
  console.log( 'item=' + item + ',index='+index+',array='+array ); 
  return item > 3; 
}));
// item=1,index=0,array=1,2,3,4,5,6
// false

以上就是JavaScript 中的六种循环方法的详细内容,更多关于JavaScript 循环的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
jquery实现网页定位导航
Aug 23 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
JavaScript的一些小技巧分享
Jan 06 #Javascript
详解Vue2的diff算法
Jan 06 #Vue.js
如何利用JavaScript编写一个格斗小游戏
Jan 06 #Javascript
vuex的使用步骤
Jan 06 #Vue.js
一篇文章看懂JavaScript中的回调
Jan 05 #Javascript
原生js中运算符及流程控制示例详解
Jan 05 #Javascript
vue3.0中友好使用antdv示例详解
Jan 05 #Vue.js
You might like
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
理解Python中函数的参数
2015/04/27 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
python机器学习之神经网络(三)
2017/12/20 Python
Django中FilePathField字段的用法
2020/05/21 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
麦当劳辞职信范文
2014/01/18 职场文书
40岁生日感言
2014/02/15 职场文书
总经理助理的职责
2014/03/14 职场文书
销售经理竞聘书
2014/03/31 职场文书
软件项目实施计划书
2014/05/02 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
维稳承诺书
2015/01/20 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫