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的更多相关文章

  1. 一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some

    好吧,竟然不能单发一张图,不够200字啊不够200字! 在<JavaScript高级程序设计>中,分门别类介绍了非常多数组方法,其中迭代方法里面有6种,这6种方法在实际项目有着非常广泛的作 ...

  2. javascript中数组Array的方法

    一.常用方法(push,pop,unshift,shift,join)push pop栈方法,后进先出var a =[1,2,3];console.log(a.push(40)); //4 返回数组的 ...

  3. JS中数组的迭代方法和归并方法

    昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...

  4. 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight

    做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...

  5. javascript中数组常用的方法和属性

    前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属 ...

  6. javascript中五种迭代方法实例

    温习一下js中的迭代方法. <script type="text/javascript"> var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]; ...

  7. javascript中数组常用的方法

    在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. ...

  8. JavaScript之数组五大迭代方法总结

    ES5定义了五个迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和运行该函数的作用域对象(可选的),作用域对象将影响this的值.传入这些方法中的函数会接收三个参数:数组的项的值.该项在数组中 ...

  9. Javascript中数组的判断方法

    摘要: 1.数组检测的方法: 1) typeof . 2) instanceof . 3) constructor . 4) Object.prototype.toString. 5) Array.i ...

随机推荐

  1. parseint和isNaN用法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. sql中数据库连接与断开式连接有什么区别?

    连接式指的是对数据的操作在 conn.Open() 与 conn.Close()之间: 断开式连接指的是 conn.Open()打开连接之后,先将数据放入adapter中,然后关闭连接(conn.Cl ...

  3. bootstrap3的 progress 进度条

    : 2.3版               3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: <!DOCTYPE html PUBLIC & ...

  4. vue.js怎样将时间戳转化为日期格式

    <!-- value 格式为13位unix时间戳 --><!-- 10位unix时间戳可通过value*1000转换为13位格式 --> export function for ...

  5. git基础讲解

    idea :https://blog.csdn.net/autfish/article/details/52513465 eclipse:https://blog.csdn.net/yang57266 ...

  6. JsonPluginsUtil

    package utils; import java.lang.reflect.Field;import java.text.SimpleDateFormat;import java.util.Arr ...

  7. 【CF666E】Forensic Examination - 广义后缀自动机+线段树合并

    广义SAM专题的最后一题了……呼 题意: 给出一个长度为$n$的串$S$和$m$个串$T_{1\cdots m}$,给出$q$个询问$l,r,pl,pr$,询问$S[pl\cdots pr]$在$T_ ...

  8. 【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装

    // 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本 ...

  9. [总结-动态规划]经典DP状态设定和转移方程

    马上区域赛,发现DP太弱,赶紧复习补上. #普通DP CodeForces-546D Soldier and Number Game 筛法+动态规划 待补 UVALive-8078 Bracket S ...

  10. [POJ 3621] Sighting Cows

    01分数规划的基本裸题. 因为路线一定是个环,所以找个最优比率生成环即可 二分一个比值,check一下即可. #include <queue> #include <cstdio> ...