数组 filter、some、map、foreach的操作分别有什么作用?

1.背景介绍

ECMAScript5为数组定义了5个迭代方法。every()、filter()、forEach()、map()、some()。这5个方法都接收两个参数:运行的函数和运行该函数的作用域对象this的值。

循环(loop),指的是在满足条件的情况下,重复执行同一段代码。比如,while语句。

迭代(iterate),指的是按照某种顺序逐个访问列表中的每一项。比如,for语句。

遍历(traversal),指的是按照一定的规则访问树形结构中的每个节点,而且每个节点都只访问一次。

递归(recursion),指的是一个函数不断调用自身的行为。比如,以编程方式输出著名的斐波纳契数列。

大家好,我是IT修真院深圳分院第03期学员,一枚正直善良的web程序员。

2.知识剖析

2.1、数组方法

every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

forEach():对数组中的每一项运行给定函数。这个方法没有返回值。

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

2.2、some()

some方法为数组中的每一个元素执行一次callback函数,直到找到一个使得callback返回一个“真值”(即可转换为布尔值true的值)。如果找到了这样一个值,some将会立即返回true。否则,some返回false。

语法:arr.some(callback[, thisArg])

2.3、every()

every方法为数组中的每个元素执行一次callback函数,直到它找到一个使callback返回false(表示可转换为布尔值false的值)的元素。

如果发现了一个这样的元素,every方法将会立即返回false。否则,callback为每一个元素返回true,every就会返回true。

语法:arr.every(callback[, thisArg])

2.4、filter()

filter()函数,它利用指定的函数确定是否在返回的数组中包含某一项,数组中的每个元素调用一次提供的函数,

然后构造一个所有值的新数组,也就是会过滤出符合条件的项。

语法:var newArray = arr .filter(callback [,thisArg ])

2.5、map()

map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

map方法会给原数组中的每个元素都按顺序调用一次callback函数。

callback每次执行后的返回值(包括undefined)组合起来形成一个新数组。

语法:let new_array = arr.map(function callback(currentValue, index, array) {// Return element for new_array}[, thisArg])

2.6、forEach()

forEach方法按升序为数组中含有效值的每一项执行一次callback函数。与for循环一样。

语法:array.forEach(callback(currentValue, index, array){//do something}, this)

array.forEach(callback[, thisArg])

3.常见问题

every()、filter()、some()、map()、forEach()的用法?

4 解决方案

4.1、map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。例如下面例子:map方法会对数组每一项运行函数,再返回新的数组。

varnumbers=[1,4,9];

vardoubles=numbers.map(function(num){returnnum*2;});

// doubles数组的值为: [2, 8, 18]

// numbers数组未被修改: [1, 4, 9]

4.2、every方法为数组中的每个元素执行一次callback函数,直到它找到一个使callback返回false(表示可转换为布尔值false的值)的元素。如果发现了一个这样的元素,every方法将会立即返回false。否则,callback为每一个元素返回true,every就会返回true。

例如下面例子:只有全部大于十才会返回true,当有一个小于十就会返回false。

functionisBigEnough(element,index,array){return(element>=10);}

varpassed=[12,5,8,130,44].every(isBigEnough);    // passed is false

passed=[12,54,18,130,44].every(isBigEnough);     // passed is true

4.3、some方法和every方法相对,只要有一个返回true,some方法就会返回true

例如下面例子:当数组项全部小于10 some方法就会返回false,当数组项有一个大于10返回true。

functionisBiggerThan10(element,index,array){returnelement>10;}[2,5,8,1,4].some(isBiggerThan10);   // false

[12,5,8,1,4].some(isBiggerThan10);   // true

4.4、filter方法返执行会调函数后的数组

下面例子数组的元素由原数组中值大于 10 的元素组成:

functionisBigEnough(element){returnelement>=10;}

varfiltered=[12,5,8,130,44].filter(isBigEnough);

// filtered is [12, 130, 44]

4.5、forEach方法与for循环一样,按升序为数组中含有效值的每一项执行一次callback函数

constarr=['a','b','c'];

arr.forEach(function(element){console.log(element);});

// a

// b

// c


7.参考文献

参考1:javascript高级程序设计

参考2:MDN web技术文档https://developer.mozilla.org/zh-CN/docs/Web

参考3:js数组操作--使用迭代方法替代for循环


1、什么是迭代?

迭代(iterate),指的是按照某种顺序逐个访问列表中的每一项。比如,for语句。

2、map()和forEach()有什么区别

map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

forEach方法与for循环一样,按升序为数组中含有效值的每一项执行一次callback函数。其实都是对数组每一项执行方法,区别是map()会返回结果数组,forEach()不反回数组。


3、forEach()方法与for循环有什么区别?

本质上没有区别,只是写法不同而已。都是按升序为数组中含有效值的每一项执行一次callback函数


(&&&欢迎交流-----812271639)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容