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 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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自定义大小验证码的方法详解
2013/06/07 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
vue实现文字加密功能
2019/09/27 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
python实现登录与注册系统
2020/11/30 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
简述数组与指针的区别
2014/01/02 面试题
学雷锋月活动总结
2014/04/25 职场文书
学校文明单位申报材料
2014/05/06 职场文书
阅兵口号
2014/06/19 职场文书
2015年党性分析材料
2014/12/19 职场文书
mysql优化
2021/04/06 MySQL