javascript中的12种循环遍历方法1
1:for循环
let arr = [1,2,3];
for(let i =0;i<arr.length;i++){
console.log(i,arr[i])
}
//for循环是js中最常用的一个循环工具,经常用来数组的循环遍历,
2:for in循环
let obj = {name: 'xiao' ,age:'24'}
for(let i in obj){
console.log(i,obj[i]);
}
//for in 循环主要用于遍历普通对象,i 代表对象的 key 值,obj[i] 代表对应的 value,当用它来遍历数组时候,多数情况下也能达到同样的效果,但是你不要这么做,这是有风险的,因为 i 输出为字符串形式,而不是数组需要的数字下标,这意味着在某些情况下,会发生字符串运算,导致数据错误,比如:'52'+1 = '521' 而不是我们需要的 53。另外 for in 循环的时候,不仅遍历自身的属性,还会找到 prototype 上去,所以最好在循环体内加一个判断,就用 obj[i].hasOwnProperty(i),这样就避免遍历出太多不需要的属性。
3:while循环
let cars=[
"BMW"
,
"Volvo"
,
"Saab"
,
"Ford"
];
i=0;
while
(cars[i])
{
console.log(cars[i] +
"<br>"
)
i++;
};
let i = 3;
do
{
console.log(i)
i--;
}
while
(i>0)
let arr = [1,2,3];
arr.forEach(
function
(i,index){
console.log(i,index)
})
另外请注意,forEach 循环在所有元素调用完毕之前是不能停止的,它没有 break 语句,如果你必须要停止,可以尝试 try catch 语句,就是在要强制退出的时候,抛出一个 error 给 catch 捕捉到,然后在 catch 里面 return,这样就能中止循环了,如果你经常用这个方法,最好自定义一个这样的 forEach 函数在你的库里。
6:Array map()方法
let arr = [1,2,3];
let tt = arr.map(function(i){
console.log(i);
return i*2;
})
//map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
注意:map 和 forEach 方法都是只能用来遍历数组,不能用来遍历普通对象。
7:Array filter()方法
let arr = [1,2,3];
let tt= arr.filter(function(i){
return i > 1;
})
//filter 方法是 Array 对象内置方法,它会返回通过过滤的元素,不改变原来的数组。
8:Array some()方法
let arr =[1,2,3];
let tt = arr.some(function(i){
return i > 1;
})
//some() 方法用于检测数组中的元素是否满足指定条件(函数提供),返回 boolean 值,不改变原数组。
9:Array every()方法
let arr = [1,2,3];
let tt = arr.some(function(i){
return i > 1;
})
//every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供),返回 boolean 值,不改变原数组。
10:Array reduce()方法
let arr = [1,2,3];
let ad = arr.reduce(function(i,j){
return i + j;
})
//reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
11:Array reduceRight()方法
let arr = [1,2,3];
let ad = arr.reduceRight(function(i,j){
return i + j;
})
//reduceRight()方法,和 reduce() 功能是一样的,它是从数组的末尾处向前开始计算。
12:for of 循环
let arr = ['name','age'];
for(let i of arr){
console.log(i);
}
//for of 循环是 Es6 中新增的语句,用来替代 for in 和 forEach,它允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代(Iterable data)的数据结构,注意它的兼容性。
javascript中的12种循环遍历方法1的更多相关文章
- JavaScript 中的12种循环遍历方法
原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...
- javascript中的12种循环遍历方法
1.for (自定义条件) 循环 let arr = [1,2,3]; for(let i =0;i<arr.length;i++){ console.log(i,arr[i]) } 2.for ...
- JavaScript 中的常用12种循环遍历(数组或对象)的方法
1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 ...
- 好文:javascript中的四种循环
https://juejin.im/entry/5a1654e951882554b8373622?utm_medium=hao.caibaojian.com&utm_source=hao.ca ...
- javascript中常见的几种循环遍历
项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环.javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历. 一.for循环 for循环应该 ...
- ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转)
主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论. 通过本文你可以 ...
- ArrayList和LinkedList的几种循环遍历方式及性能对比分析
最新最准确内容建议直接访问原文:ArrayList和LinkedList的几种循环遍历方式及性能对比分析 主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性 ...
- ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转载)
原文地址: http://www.trinea.cn/android/arraylist-linkedlist-loop-performance/ 原文地址: http://www.trinea.cn ...
- 【转】ArrayList和LinkedList的几种循环遍历方式及性能对比分析
原文网址:http://www.trinea.cn/android/arraylist-linkedlist-loop-performance/ 主要介绍ArrayList和LinkedList这两种 ...
随机推荐
- Visual Studio的UTF-8问题
参考:https://www.jianshu.com/p/c51cbb2f20e1 一.在“工具”菜单找到“自定义”,然后按照图示操作. 二.选择“编码”.
- python requests访问https的链接,不打开fiddler的情况下不报错;若是打开fiddler则报ssl错误,请求中添加verify=False,会报警告;若不想看到警告,有3种方式;
import requests# import warnings# warnings.filterwarnings("ignore") #方法一#requests.packages ...
- shell脚本的输入以及脚本拥有特效地输出
shell脚本的输入以及脚本拥有特效地输出 shell脚本输入之read命令 之前是直接在sh 后加参数 现在是另一种方式 语法:read -参数 -p:给出提示符.默认不支持"\n&quo ...
- 四则运算web版需求规格说明书
目录 1引言... 4 1.1 目的... 4 1.2 背景... 4 1.3 术语... 4 1.4 预期读者与阅读建议... 5 1.5 参考资料... 6 1.6 需求描述约定... ...
- 【redis】安装redis
1.什么是redis? 非关系型数据库 2.为什么用redis? 非关系型数据库的一些优势,我这里用于缓存 3.怎么用redis? 安装,配置,用 4.怎么安装? 下载:http://download ...
- Tomcat服务部署与Nginx负载均衡配置
一.中间键产品介绍 目前来说IBM的WebSphere,Oracle的Weblogic占据了市场上java语言Web站点的部分份额,该两种软件都是商业化的软件,由于性能优越,可靠性高等优点应用于大型互 ...
- JSP还有必要学吗?这篇文章告诉你
阅读本文大概需要 12.4 分钟. 来源:http://suo.im/4wqRi7 作者:杨明翰 前戏 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以 ...
- STM32Cube在Main里判断USB是否已连接到电脑
首先添加这两个Includes: #include "usbd_def.h" #include "usbd_hid.h" 然后就可以在代码里用这个来判断是否有连 ...
- [数据分析]利用pandasticsearch批量读取ES
1.git地址 https://github.com/onesuper/pandasticsearch 2.建立连接 from pandasticsearch import DataFrame use ...
- 【前端知识体系-CSS相关】CSS布局知识强化
1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { ma ...