文档章节

深入了解JavaScript 中的For循环之详解

苏南-首席填坑官
 苏南-首席填坑官
发布于 01/10 08:19
字数 1871
阅读 17
收藏 0

JavaScript 循环. 如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。 我们可以这样输出数组的值,循环提供了一种快速和简单的方式去做一些重复的事。JavaScript入门的这个章节会介绍在JavaScript中存在哪些不同的迭代语句,常用的循环遍历方法for()循环forEachmap()for..infor..ofjquery:$.each()forEach() & map()forEach(),map()是es5新增的循环遍历方法。

前言:

​ 今天我想分享一个有关于循环筛选的知识点,也许是前端小白的你首先想到的是用for循环做筛选,但我这种小菜鸟想到的就是map(工作中很喜欢用= =),学过数据结构的小伙伴也肯定知道,线性表这些跟循环也息息相关,包括你出去面试的时候或许你遇到过这样的问题,map和forEach的区别?去重的几种方式?说实话,forEach我真的很少用,但不满足于现状的我,觉得应该多学习几种。我是前端挖坑妹,准备好了么?一起粗发~

正文:

​ 在代码示例中我会用到es6中的语言,如果你还不是很了解,你可以看看阮老师的es6.(= =我也是一点一点跟着看的。)

1.map

​ 先说一下最常用的map.利用map方便获得对象数组中的特定属性值们.它返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

//将a02品牌的标价全部加100
const clothesArr=[
  {username:"sunan",haveA02:false,basePrice:30},
  {username:"fenshuajiang",haveA02:true,basePrice:10},
  {username:"huixin",haveA02:true,basePrice:20}
]//苏南的专栏 交流:912594095、公众号:honeyBadger8

clothesArr.map(
	item=>item.haveA02?{...item,basePrice:item.basePrice+100}:item
)
  • map() 不会对空数组进行检测。

  • map() 不会改变原始数组。

2.filter

​ filter和map相比,它也接受一个函数,并把接受的函数依次作用于每个元素,返回值为true和false,true留下,false扔掉!看看例子~

const filterArr = [1,2,3,4,5,6,7,8,9,10];//这里我只想要3的倍数

const newArr = filterArr.filter((x) => x % 3 == 0);

console.log(newArr);//(3) [3, 6, 9]

这里需要注意:

  • filter() 不会对空数组进行检测。

  • filter() 不会改变原始数组,所以你需要赋值到新数组上。

3.forEach

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身,数组中有几项,那么传递进去的匿名回调函数就需要执行几次.

const forEachArr=[1,2,3,4,5];//计算所有数组的和
var sum=0;
forEachArr.forEach((value,index,array)=>{
    sum+=value;  
    });//苏南的专栏 交流:912594095、公众号:honeyBadger8
console.log(sum);//15

这里需要注意:

  • forEach() 对于空数组是不会执行回调函数的。
4.for in

以前觉得这个不常用,但现在真的很感谢有这个函数,因为最近项目中解决了很多问题,尤其是对象拿value值的时候,先来说说对数组的时候怎么用。

const forInArr=[1,2,3,4,5]
for(let index in forInArr){
    console.log(index,forInArr[index]);
}
//0 1
//1 2
//2 3
//3 4
//4 5

用for in不仅可以对数组便利,也可以对enumerable(可枚举)对象操作

const forInObj={
  '111':{name:'huixin',size:'m'},
  '222':{name:'sunan',size:'l'},
  '333':{name:'fenshuajiang',size:'s'}
};//这个时候我只想取到value值传给后端,key值不要。
for(let index in forInObj){
    console.log(index,forInObj[index]);
}
//111 {name: "huixin", size: "m"}
//222 {name: "sunan", size: "l"}
//333 {name: "fenshuajiang", size: "s"}

在这里插播一个问题:给你一个对象,去掉里面属性值为null、""或者undefined的属性

let objs={
  a:false,
  b:null,
  c:undefined,
  d:''
}

const dataType=(obj)=>{
    if (obj===null) return "Null";
    if (obj===undefined) return "Undefined";
    return Object.prototype.toString.call(obj).slice(8,-1);
};

const filtrateValue=(obj)=>{
    var param = {};
    if ( obj === null || obj === undefined || obj === "" ) return param;
    for ( var key in obj ){
        if ( dataType(obj[key]) === "Object" ){
            param[key] = filtrateValue(obj[key]);
        }else if(  obj[key] !== null && obj[key] !== undefined && obj[key] !== ""  ){//苏南的专栏 交流:912594095、公众号:honeyBadger8
            param[key] = obj[key];
        }
    }
    return param;
};
filtrateValue(objs);

//{a: false}
5.for of

在es6 中新增了一个 for of 循环,这个还没怎么用过,以后要多用才能记得住,看看例子~

const forOfArr='huixin';
for(let value of forOfArr) {  
        console.log(value);  
};
//h
//u
//i
//x
//i
//n

for in总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值

注意:for of不能对对象用

6.set

Set类似于数组,但是成员的值都是唯一的,没有重复的值,也没有索引。用set.size表示伪数组长度

var setArr= [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3];//数组去重
var set = new Set(setArr);
var newArr = new Array(...set);
console.log(newArr);//(7) [7, 8, 82, 839, 49, 329, 3]
7.some

这个函数,我觉得只是检测数组中是否有某个元素,符合条件,符合返回true。如果没有满足条件的元素,则返回false。感觉有点像|字符。

var someArr = [2, 13, 18, 20];//检测是否有人小于18岁
let outcome=someArr.some( (age)=>{ return age<18})
console.log(outcome);//true

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

8.every

这个函数,检测数组中是否有某个元素,不符合条件,有一个为false,则返回false。如果都满足条件的元素,则返回true。感觉有点像&字符。

var someArr = [2, 13, 18, 20];//检测是否都是未成年
let outcome=someArr.every((age)=>{ return age<18})
console.log(outcome);//false

注意: every() 不会对空数组进行检测。

注意: every() 不会改变原始数组。

9.reduce

​ 最后一个,reduce,刚接触前端的时候,我也不明白,现在到是知道那么一丢丢了。这个方法有点不同,4个参数。接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

​ prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev

​ cur:当前的元素

​ index:当前的索引

​ arr:循环的数组

var reduceArr = [1,2,3,4,5]//求和
 
var str = reduceArr.reduce((prev,cur,index,arr)=>{
	return prev + cur ;//苏南的专栏 交流:912594095、公众号:honeyBadger8
})

console.log(str);//15

10.Object.keys(obj)

朋友小机灵又帮我添加了一个,可以遍历对象

const forInObj={
  '111':{name:'huixin',size:'m'},
  '222':{name:'sunan',size:'l'},
  '333':{name:'fenshuajiang',size:'s'}
};//苏南的专栏 交流:912594095、公众号:honeyBadger8
Object.keys(forInObj).map(item=>console.log(item,forInObj[item]));

//111 {name: "huixin", size: "m"}
//222 {name: "sunan", size: "l"}
//333 {name: "fenshuajiang", size: "s"}

总结

学了这么多,不一定强制我在工作中一定要用到,玩的顺手就好,毕竟每天进步一点点,心里才踏实,哈哈。我是前端挖坑妹,一个每天给自己挖坑的妹子,下次见哈~

IT平头哥联盟主要分享前端、测试 等领域的积累(前端开发、HTML、CSS/CSS3、新手上路、javascript、js、自动化、性能、接口系列),苏南,首席填坑官,平头哥,蜜獾,个人博客——宝剑锋从磨砺出 梅花香自苦寒来,曾想仗剑走天涯 后来BUG太多就没去了,苏南的专栏

觉得不错的话,请记得关注支持我们哦~

其他

作者:前端挖坑妹 链接:http://susouth.com/ 交流:912594095、公Z号:honeyBadger8 本文原创,著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权,非商业转载请注明原链接及出处。

© 著作权归作者所有

苏南-首席填坑官
粉丝 2
博文 21
码字总数 54603
作品 0
深圳
前端工程师
私信 提问
《你不知道的JavaScript》系列分享专栏

《你不知道的JavaScript》系列分享专栏 你不知道的JavaScript”系列就是要让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途 《你不知道的JavaScrip...

开元中国2015
2018/12/01
0
0
浅谈js的事件循环(Event Loop)

事件循环是js这门语言的一大特点。 了解事件循环机制,有助于日常开发中遇到的一些异步问题。 而且还是前端面试一经常考点。 故本人结合一些文章和个人的一些开发经验,浅淡一下 一,js是一门...

田小菜
05/08
0
0
每个JavaScript工程师都应懂的33个概念

摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:stephentian Fundebug经授权转载,版权归原作者所有...

Fundebug
2018/10/30
0
0
JavaScript开发者应懂的33个概念

简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。 本篇文章是参照 @leonardomso 创立,英文版项目地址在这里。 ...

大灰狼的小绵羊哥哥
2018/10/22
0
0
Underscore _.template 方法使用详解

https://github.com/hanzichi/underscore-analysis/issues/26 前文 浅谈 Web 中前后端模板引擎的使用 我们简单了解了模板引擎在前后端的应用场景,本文重点深入 Underscore 的模板函数 _.te...

壹峰
2018/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 常用注解说明

实体类 @Entity (实体类注解) @Table(可指定表名) @Data(可缺省get/set) @Id (指定属性主键) @GeneratedValue(指定主键生成规则)

兜兜毛毛
42分钟前
0
0
局域网能互相ping通,ubuntu虚拟机不能上外网

【问题】 桥接模式老是无法上网,查看本机IP发现被分配了一个私网地址,猜测应该是虚拟DHCP服务器没有打开,于是查看Ubuntu的网络配置: /etc/network/interfaces 发现没有dhcp配置的信息,只...

tahiti_aa
今天
1
0
以太坊助记词PHP开发包简介

以太坊助记词PHP开发包用来为PHP以太坊应用增加助记词和层级确定密钥支持能力。下载地址:以太坊助记词php开发包 。 1、开发包概述 以太坊助记词PHP开发包主要包括以下特性: 生成符合BIP39...

汇智网教程
昨天
2
0
系统监控-分布式调用链Skywalking

1. 为什么要使用分布式调用链技术? 随着公司业务的高速发展,公司服务之间的调用关系愈加复杂,如何理清并跟踪它们之间的调用关系就显的比较关键。线上每一个请求会经过多个业务系统,并产生...

秋日芒草
昨天
6
0
告诉自己的一些建议

摆脱学生心态 尽快发挥自己价值,让公司感知自己的存在,才是王道 选择比努力重要 自己附着的平台的经济体要是一个快速崛起的行业 转行趁早,年龄越大选择成本越高 趁早大量试错,学习新领域...

林怡丰
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部