js的数组ECMAScript 5加入的方法(一)

原创 2015年07月07日 22:02:15

ECMAScript 5新增了9个数组实例的方法,分别是map、forEach、filter、every、some、reduce、reduceRight、indexOf和lastIndexOf。其中,前7个与函数式(functional)操作有关。

这些方法可以在数组上使用,也可以在字符串和类似数组的对象上使用,这是它们不同于传统数组方法的一个地方。

在用法上,这些方法的参数是一个函数,这个作为参数的函数本身又接受三个参数:数组的当前元素elem、该元素的位置index和整个数组arr(详见下面的实例)。另外,上下文对象(context)可以作为第二个参数,传入forEach(), every(), some(), filter(), map()方法,用来绑定函数运行时的上下文。

map方法,forEach方法

map方法对数组的所有成员依次调用一个函数,根据函数结果返回一个新数组,原数组并没有改变

<script type="text/javascript">
     var a = [1, undefined, 2];
     var log = function(n){ return n+1 };
     var b = a.map(log);
     console.log(b[0]+"-"+b[1]+"-"+b[2]);
      //2-NaN-3 
</script>
只要数组的成员可以被索引到,map方法就不会跳过它。 map的回掉函数参数有三位,分别代表当前元素,当前元素的索引,数组本身
var f = function(elem, index, arr){ return elem+1 };
[1, undefined, 2].map(f); // [2, NaN, 3]
[1, null, 2].map(f); // [2, 1, 3]
[ 1, , 2,].map(f) // [2, undefined, 3]
有时候需要对字符串进行遍历

var upper = function (x) { console.log(x.toUpperCase()); };
//方法一
[].map.call('abc', upper)
// [ 'A', 'B', 'C' ]
<pre name="code" class="html" style="color: rgb(34, 34, 34); line-height: 31px;">//方法二
'abc'.split('').map(upper)// [ 'A', 'B', 'C' ]


map方法还可以接受第二个参数,表示回调函数执行时this所指向的对象。

foreach()方法功能同map,区别在于一是:没有返回值,二是会跳过数组的空位。

['a', , 'c'].map(upper)
//A
//C
foreach第二个参数 绑定回调函数的this关键字 同map函数

var out = [];

[1, 2, 3].map(function(elem, index, arr){
   this.push(elem * elem);
}, out);
console.log(out[0]);
console.log(out[1]);
console.log(out[2]);

filter方法

filter,见名知意,就是过滤,对每个数组成员调用回调函数过滤复合条件的元素组成新数组,并返回
var b = [1, 2, 3, 4, 5].filter(function (elem){
	  return (elem > 3);
	})
console.log(b.length); //2
console.log(b[0]);   //4
console.log(b[1]);   //5
console.log(b[2]);  //undefined
filter方法同样有第二个参数,意思同上

var Obj = function () {
	  this.MAX = 3;
	};
	var myFilter = function(item) {
	  if (item > this.MAX) { //this 代表对象Obj
	    return true;
	  }
	};
<span style="white-space:pre">	</span>var arr = [2,8,3,4,1,3,2,9];
	var c = arr.filter(myFilter, new Obj())
	console.log(c[0]);
	console.log(c[1]);
	console.log(c[2]);
	// [8, 4, 9]







版权声明:本文为博主原创文章,未经博主允许不得转载。

ECMAScript中数组的各种方法的整理

自己整理的ECMAScript中数组类型的各种方法,举例通俗易懂,还是觉得自己总结几遍记得比较牢靠。共勉...
  • khadijiah
  • khadijiah
  • 2017年08月23日 22:21
  • 136

js的数组ECMAScript 5加入的方法(二)

some方法,every方法 这两个方法类似“断言”(assert),用来判断数组成员是否符合某种条件。some方法对所有元素调用一个测试函数,只要有一个元素通过该测试,就返回true,否则...
  • tustyao
  • tustyao
  • 2015年07月07日 23:01
  • 337

ECMAScript5新JavaScript API入门

ECMAScript5 给出了一系列新的API接口,这些接口在新的浏览器中大部分是被支持的,IE9,Chrome,FirFor都支持,也有少量API不是所有浏览器都支持,以下内容仅介绍大部分被支持的A...
  • shyleoking
  • shyleoking
  • 2012年03月08日 08:57
  • 11880

EcmaScript5和EcmaScript6规范一览表

EcmaScript5.1规范于2011年6月发布,现在主流的浏览器基本上都已经支持,这些浏览起包括IE9、IE10,ff21及其以上,safari6及其以上,opera12及其以上都已经基本支持。具...
  • houyaowei
  • houyaowei
  • 2016年05月18日 15:35
  • 2268

ECMAscript到底是什么?它和JavaScript的关系?

要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA, 希望这种语言能够成为国际标准。次年,ECM...
  • liona_koukou
  • liona_koukou
  • 2016年08月17日 10:23
  • 2609

ECMAScript5 严格模式,JSON,及其它

ECMAScript5 严格模式,JSON,及其它 ECMAScript5 规范自推出以来, 对javascript的发展产生了蛮大的影响。这篇文章是我翻译自John Resig(jQuer...
  • whereismatrix
  • whereismatrix
  • 2015年05月10日 15:10
  • 1342

ECMAScript 5严格模式

原先不知道写js还有一个“严格模式”的概念,虽然基本不会用到,但也补一补自己这个知识缺陷吧! ECMAScript 5 引入了严格模式(strict mode)的概念。严格模式是为JavaScr...
  • kobetmacone
  • kobetmacone
  • 2015年07月21日 15:43
  • 331

重识Javascript系列---ECMAScript内置对象

ECMAScript对象是很特殊且比较难理解是一部分,因为她确实太过”自由”,涵盖的内容也非常的多,比如上一篇(变量)提到的引用型变量都属于对象类型,包括函数在内··堪称···变态,认真脸。依旧不谈什...
  • WRian_Ban
  • WRian_Ban
  • 2016年04月17日 20:41
  • 352

JavaScript之EcmaScript5中geter和setter

我在搞懂JavaScript的getter和setter之前,通过百度搜索在网上看了很多别人写的文章,个人的内心是表示很气愤的,因为大家都是一知半解,很多博主都并没有真正的理解这个语法的用处。虽然ge...
  • Brave_Coder
  • Brave_Coder
  • 2017年05月01日 10:26
  • 251

ECMAScript和JavaScript的关系

一个常见的问题是,ECMAScript和JavaScript到底是什么关系?要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript的创造者Netscape公司,决定将JavaScrip...
  • liuk10
  • liuk10
  • 2016年03月08日 18:14
  • 14342
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js的数组ECMAScript 5加入的方法(一)
举报原因:
原因补充:

(最多只允许输入30个字)