ES5新语法forEach和map及封装原理

### forEach

在es5中提供了forEach方法进行遍历,其实就是模仿了jQuery中each方法,不过将 i 于v进行了调换,下面两种方法进行对比一下

 var arr = [ 11, 22, 33 ,44,55];
 var res = $.each( arr, function ( i, v ) {
	console.log( i + ‘, ‘ + v );
	return false/true;//判断循环是否结束
});
 console.log( res ); // 返回遍历的数组

var res = arr.forEach(function ( v, i ) {
	console.log( i + ‘, ‘ + v );
	return true;
});
 console.log( res ); // 返回遍历的数组

### map  

              var arr = [ 11, 22, 33 ,44];
		var res = arr.map( function ( i, v) {
		       console.log( i + ‘, ‘ + v );
			return v * 2;
		});
		console.log( res );//返回新数据

### 封装

 function forEach( arr, func ) {
    var i;
    // 在 ES5 中还引入了 Array.isArray 的方法专门来判断数组
    if ( arr instanceof Array || arr.length >= 0) {
        //传入的是数组
      for ( i = 0; i < arr.length; i++ ) {
        func.call( arr[ i ], arr[ i ],i );
      }
    } else {
      //传入的是对象
      for ( i in arr ) {
        func.call( arr[ i ],  arr[ i ],i);
      }
    }
    return arr;
  }
  function map( arr, func ) {
    var i, res = [], tmp;
    if ( arr instanceof Array || arr.length >= 0 ) {
      for ( i = 0; i < arr.length; i++ ) {
        tmp = func( i,arr[ i ]);
        if ( tmp != null ) {
          res.push( tmp );
        }
      }
    } else {
      for ( i in arr ){
        tmp = func( i,arr[ i ]);
        if ( tmp != null ) {
          res.push( tmp );
        }
      }
    }
    return res;
  }

  

  

时间: 2024-11-05 13:51:46

ES5新语法forEach和map及封装原理的相关文章

ECMAScript新语法、特性总结

前言 从2015年的ES6开始,JavaScript的语言标准每年都在更新,其中尤其以ES6的力度之大,到现在ES10已经发布,这里总结一下新语法. 参考:阮一峰 ECMAScript 6 教程 .ECMAScript 6入门 .1.5万字概括ES6全部特性 声明变量 const   块级作用域,变量被const声明后不允许改变,通常在声明时定义 let 块级作用域 注意点: 变量提升: var存在变量提升,const.let不存在变量提升,意思是:var声明的变量在声明之前可以访问,访问到的值

JavaScript数组方法--flat、forEach、map

今天到flat了,一个第一次知道该方法还是看到一个面试题,别人给了个答案,用到了flat才知道的方法. 前面也写过关于这道面试题的文章,<一道关于数组的前端面试题>. 这里再来说说吧! flat:flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回.不考虑他所谓指定深度,直白一点来说,就是数组扁平化,也就是把一个有多层嵌套的数组,提取为一个只有一层的数组.同样,先看用法吧: var elements = ['Fire', 'Wind',

.NET中那些所谓的新语法之三:系统预定义委托与Lambda表达式

开篇:在上一篇中,我们了解了匿名类.匿名方法与扩展方法等所谓的新语法,这一篇我们继续征程,看看系统预定义委托(Action/Func/Predicate)和超爱的Lambda表达式.为了方便码农们,.Net基类库针对实际开发中最常用的情形提供了几个预定义好的委托,这些委托可以直接使用,无需再重头定义一个自己的委托类型.预定义委托在.Net基类库中使用的比较广泛,比如在Lambda表达式和并行计算中都大量地使用,需要我们予以关注起来! /* 新语法索引 */ 1.自动属性 Auto-Impleme

.NET中那些所谓的新语法之一:自动属性、隐式类型、命名参数与自动初始化器

开篇:在日常的.NET开发学习中,我们往往会接触到一些较新的语法,它们相对以前的老语法相比,做了很多的改进,简化了很多繁杂的代码格式,也大大减少了我们这些菜鸟码农的代码量.但是,在开心欢乐之余,我们也不禁地对编译器内部到底为我们做了哪些事儿而感到好奇?于是,我们就借助反编译神器,去看看编译器到底做了啥事!其实本篇中很多都不算新语法,对于很多人来说可能都是接触了很久了,这里主要是针对.NET的老版本来说,是一个“相对”的新语法. /* 新语法索引 */ 1.自动属性 Auto-Implemente

JS的forEach和map方法的区别,还有一个$.each

forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each(),长得和forEach()有点像,功能也类似.但是从本质上还是有很大的区别的,那么我们探探究竟. 一.forEach和map语法 语法: //forEach array.forEach(callback(currentValue, index, array){ //do something }, this)

JavaScript中的数组遍历forEach()与map()方法以及兼容写法

原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是我

ES5新特性:理解 Array 中增强的 9 个 API

为了更方便的对JS中Array进行操作,ES5规范在Array的原型上新增了9个方法,分别是forEach.filter.map.reduce.reduceRight.some.every.indexOf 和 lastIndexOf,本文将对这几个方法进行详细的讲解,并对每一个方法进行原型扩展,以兼容不支持ES5的浏览器. forEach(callback[,thisArg]) 在ES5之前,我们可以通过for和for in 两种方式来遍历数组,而ES5引入了一个新方法forEach,使数组遍历

for-in和for-of,forEach和Map

for-in和for-of 1. for-in循环实际是为循环"enumerable"对象而设计的,是用来循环带有字符串key的对象的. 使用for in会遍历数组所有的可枚举属性,包括原型.所以for in更适合遍历对象,不要使用for in遍历数组. var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop])

forEach和map和for方法的区别

那么接下来,我继续做分析,为什么更推荐用.map(),而不是.forEach()? 首先,.map()要比.forEach()执行速度更快.虽然我也说过执行速度不是我们需要考虑的主要因素,但是他们都比for()要更好用,那肯定要选更优化的一个. 第二,.forEach()的返回值并不是array.如果你想用函数式编程写个链式表达式来装个逼,.map()将会是你不二的选择. 来看下面这个例子: var arr = [1, 2, 3]; console.log( arr.map(function(i