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

最新推荐文章于 2023-01-10 23:04:06 发布

转载最新推荐文章于 2023-01-10 23:04:06 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lijinblogs/p/5894672.html

文章标签：

#javascript #ViewUI

本文介绍JavaScript中数组的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 ( v, i) {
		       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;
  }

转载于:https://www.cnblogs.com/lijinblogs/p/5894672.html