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 出生日期和身份证判断大全
Nov 13 Javascript
url 特殊字符 传递参数解决方法
Jan 01 Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
Vue.Draggable实现交换位置
Apr 07 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 FLEA中二叉树数组的遍历输出
2012/09/26 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
给Python入门者的一些编程建议
2015/06/15 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
对python周期性定时器的示例详解
2019/02/19 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python manage.py runserver流程解析
2019/11/08 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
公司出纳岗位职责
2013/12/07 职场文书
会计顶岗实习心得
2014/01/25 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书