JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of
JavaScript中有非常多数组迭代方法,这里基本上吧所有的都介绍全了,我项目中比较喜欢的是forEach。

7、for in (for-in循环实际是为循环对象而设计的,for in也可以循环数组,但是不推荐这样使用,
for–in是用来循环带有字符串key的对象的方法)。
缺点:只能获得对象的键名,不能直接获取键值。
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// print: "obj.a = 1" "obj.b = 2" "obj.c = 3"
8、for of (在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。
for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)
等可迭代的数据结构等(不包括对象))。
// 字符串
let str = "hello";
for (let s of str) {
console.log(s); // h e l l o
}
// 遍历数组
let list = [1, 2, 3, 4, 5];
for (let e of list) {
console.log(e);
}
// print: 1 2 3 4 5
// 遍历对象
obj = {a:1, b:2, c:3};
for (let key of Object.keys(obj)) {
console.log(key, obj[key]);
}
// print: a 1 b 2 c 3
说明:对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。
一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。
// entries (entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。语法:array.entries())
IE11 及其更早的浏览器版本不支持 entries 方法
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
补充:对forEach, map 的补充。它俩都可以传三个参数 value数组中的当前项,index当前项的索引,array原始数组。
1. forEach 在对 item 进行修改的时候,如果 item 是原始类型的值,item 对应的 的内存地址实际并没有变化,进行操作的只是值。
如果 item 是 引用类型的值,item 对应多的内存地址也没有变化,但是内存地址对应的值,已经重写了。

2. map方法体现的是数据不可变的思想。该思想认为所有的数据都是不能改变的,只能通过生成新的数据来达到修改的目的,因此直接对数组元素或对象属性进行操作的行为都是不可取的。这种思想其实有很多好处,最直接的就是避免了数据的隐式修改。

以下代码为IE6-8 forEach,map的兼容写法:
Array.prototype.myForEach = function myForEach(callback,context){
context = context || window;
if('forEach' in Array.prototype){
this.forEach(callback,context);
return;
}
//IE6-8下自己编写回调函数执行的逻辑
for(var i = ,len = this.length; i < len;i++) {
callback && callback.call(context,this[i],i,this);
}
}
Array.prototype.myMap = function myMap(callback,context){
context = context || window;
if('map' in Array.prototype){
return this.map(callback,context);
}
//IE6-8下自己编写回调函数执行的逻辑
var newArr = [];
for(var i = ,len = this.length; i < len;i++) {
newArr.push(callback.call(context,this[i],i,this));
}
return newArr
}
var eachArr1 = [,,,,];
eachArr1.myForEach(function(item,index,arr){
arr[index] = item *
})
var eachArr2 = eachArr1.myMap(function(item,index){
return item * ;
})
console.log(eachArr1)
console.log(eachArr2)
---------------------
参考:https://www.cnblogs.com/shuiyi/p/5058524.html
JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of的更多相关文章
- 一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some
好吧,竟然不能单发一张图,不够200字啊不够200字! 在<JavaScript高级程序设计>中,分门别类介绍了非常多数组方法,其中迭代方法里面有6种,这6种方法在实际项目有着非常广泛的作 ...
- javascript中数组Array的方法
一.常用方法(push,pop,unshift,shift,join)push pop栈方法,后进先出var a =[1,2,3];console.log(a.push(40)); //4 返回数组的 ...
- JS中数组的迭代方法和归并方法
昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...
- 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight
做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...
- javascript中数组常用的方法和属性
前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属 ...
- javascript中五种迭代方法实例
温习一下js中的迭代方法. <script type="text/javascript"> var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]; ...
- javascript中数组常用的方法
在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. ...
- JavaScript之数组五大迭代方法总结
ES5定义了五个迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和运行该函数的作用域对象(可选的),作用域对象将影响this的值.传入这些方法中的函数会接收三个参数:数组的项的值.该项在数组中 ...
- Javascript中数组的判断方法
摘要: 1.数组检测的方法: 1) typeof . 2) instanceof . 3) constructor . 4) Object.prototype.toString. 5) Array.i ...
随机推荐
- CSS3伪元素、伪类选择器
伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...
- DELPHI调试出现disconnected session的解决办法
我在控制面板中,是禁用了UAC的,如下图 但是,在注册表中启用了UAC(EnableLUA), 工程中请求了管理员权限,如下图: 所以,整个权限请求混乱了. 解决办法,要么把注册表的LUA设置为0,要 ...
- Vs2010无法打开文件“Kernel32.lib”、无法打开“libcpmt.lib”"msvcprt.lib"
1.对于无法打开"Kernel"问题,即使复制lib文件到目录,仍然会出现最后的错误; 原因:WindowsSdk 安装失败! 方法:重装 microsoft SDK6.0 ,再在 ...
- 【技术累积】【点】【java】【3】编译和反编译
闲聊 擦,打脸了,但打完了还是得继续写呗,水着水着看呗. 概述 理解的不深入,但是实用. 总而言之:编译,是将书写的代码翻译为机器能够理解的代码:反编译,则是相反的过程. 来源在于语言的等级,一般认为 ...
- css 添加阴影
添加阴影,分为内阴影和外阴影. inset:内阴影. 不写默认外阴影. box-shadow: 水平位移 垂直位移 模糊半径 #box-shadow{ -moz-box-shadow:5px 5p ...
- ZBrush的双十一来了,然鹅...
不管是“光棍节”还是“剁手节” 似乎和我都没有什么关系 事实证明,我错了 今早竟然有不识趣的人发红包祝我单身快乐 纳尼,这是唱的哪一出? 我能直接怼回去,说不领么? 但好像又不是我的风格 哎,一个红包 ...
- ZBrush中的PolyPainting如何理解?
什么是PolyPainting? PolyPainting在ZBrush ®中是一种创建纹理的方法,该方法通过对每个多边形顶点应用单一RGB值来着色模型.此方法无需使用UV坐标.通过直接对顶点应用颜色 ...
- ZBrush快捷键与鼠标操作
ZBrush是一款3D图形绘制软件,功能十分强大,且比较复杂,除了菜单栏功能按钮,ZBrush还提供了一系列快捷键与鼠标操作,熟练掌握ZBrush快捷键与鼠标操作,可以帮助您大大节省图形创作时间.下面 ...
- 04 Django-ORM多表操作(进阶)
一.创建模型 下面我们通过图书管理系统,来设计出每张表之间的对应关系. 通过上图关系,来定义一下我们的模型类. from django.db import models class Book(mo ...
- ZJOI2015 幻想乡战略游戏 动态点分治_树链剖分_未调完
Description 傲娇少女幽香正在玩一个非常有趣的战略类游戏,本来这个游戏的地图其实还不算太大,幽香还能管得过来,但是不知道为什么现在的网游厂商把游戏的地图越做越大,以至于幽香一眼根本看不过来, ...