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的parseInt 取整使用
May 09 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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实现修改新闻时删除图片的方法
2015/05/12 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python中如何导入类示例详解
2019/04/17 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python for循环及基础用法详解
2019/11/08 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
高一学生期末评语
2014/04/25 职场文书
爱耳日活动总结
2014/04/30 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
个人总结与自我评价
2015/02/14 职场文书
原告代理词范文
2015/05/25 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
外出培训学习心得体会
2016/01/18 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
MySQL Server 层四个日志
2022/03/31 MySQL