ECMAScript 5中的数组方法

(JavaScript权威指南 笔记)

ECMAScript 5定义了几个新的数组方法, 根据功能可以分为

• 遍历 - forEach;
• 映射 - map;
• 过滤 - filter;
• 检测 - every和some;
• 简化 - reduce和reduceRight;
• 搜索 - indexOf和lastIndexOf;
• 判断 - Array.isArray;

下面一一介绍

forEach - 遍历

函数原形:

arr.forEach(func);

此方法会从头到尾的遍历数组, 并为每个元素调用参数中指定的函数, 没有返回值.
参数func的原形:

function func(value[, index[, arr]]);

参数含义:

• value: 数组元素值;
• index: 元素索引;
• arr: 当前数组本身;

例如:

var data = [1,2,3,4,5];//计算数组元素的和var sum = 0;data.forEach(function (value){ sum += value;});console.log("当前数组的和为: " + sum); // => 15//每个数组元素的值自加1data.forEach(function(v, i, a){ arr[i] = v + 1;});console.log(data); // => [2,3,4,5,6]

注意: forEach会自动跳过稀疏数组中缺少的元素, 如

var arr = [0,1];arr[3] = null;arr[4] = undefined;arr[5] = 9;function func(value,index, arr){  console.log(index + " --> " + value);}arr.forEach(func);

上例中的输出结果:

0 –> 0
1 –> 1
3 –> null
4 –> undefined
5 –> 9

对应js的实现函数如下(输出结果于上例相同):

//接上例function myForEach(a, func){  //for(var i = 0; i < a.length; i++){  //  if(i in a)  //    func(arr[i], i, a);  //}  //或者  for(var i in a){    func(arr[i], i, a);  }}myForEach(arr, func);

还有, 此方法无法在所有元素都传递给调用的函数之前终止遍历 . 也就是说, 没有像for循环中使用的相应的break语句. 如果要提前终止, 必须把forEach方法放在try块中, 并能抛出一个异常;

map - 映射

newArr = arr.map(func);

将调用数组的每个元素传递给参数中指定的函数(这里是func), func的返回值将作为map返回数组对应位置的新元素;
参数func的原形和上述forEach是一样的, 只是需要返回值:

function func(value[, index[, arr]]);

参数含义:

• value: 数组元素值;
• index: 元素索引;
• arr: 当前数组本身;
• 该函数必须返回一个值, 否则将没有意义;

实例

var arr = [1,2];function mapFunc(value){  return value*value;}var b = arr.map(mapFunc);console.log(b); // => [ 1, 4 ]console.log(arr); // => [ 1, 2 ]

从输出可以看出, map返回的是一个新数组, 并不修改调用的原数组, 上述实例相当于:

//接上例function myMap(a, func){  var c = [];  for(var i = 0; i < a.length; i++){    c[i] = func(arr[i], i, a);  }  return c;}console.log(myMap(arr, mapFunc));

另外需要注意的是, 如果是稀疏数组, 返回的也是相同方式的稀疏数组, 具有相同的长度, 相同的确实元素;

filter - 过滤

arr.filter(func);

返回的数组元素时调用数组的一个子集(包含参数func返回为true的元素), 不改变原数组,
参数func的原形和上述forEach是一样的, 只是需要返回值:

function func(value[, index[, arr]]);

参数含义:

• value: 数组元素值;
• index: 元素索引;
• arr: 当前数组本身;
• 该函数返回一个布尔值, 确定filter返回数组中是否包含对应元素;

例如

var arr = [1,2,3,4,5];function mapFunc(value, index, arr){  return value > 3;}var b = arr.filter(mapFunc)console.log(b); // => [4,5]console.log(arr); // => [1,2,3,4,5]

执行结果相当于以下函数

//接上例function myFilter(a, func){  var c = [];  for(var i = 0; i < a.length; i++){    if(func(arr[i], i, a))      c.push(a[i]);  }  return c;}console.log(myFilter(arr, mapFunc));  // => [4,5]

注意: filter会跳过稀疏数组中缺少的元素, 他的返回数组总是稠密的;

every和some - 检测

这两个方法用来对数组中的元素应用参数中的函数进行检测

arr.every(func);
arr.some(func);

参数func的原形于上述filter是一样的, 这里就不说了;
当且仅当针对数组中的所有元素调用判定函数都返回true, every()才返回true;
相反, 当且仅当针对数组中的所有元素调用判定函数都返回false, every()才返回false;
实例:

var arr = [1,2,3,4,5];function func1(value, index, arr){  return value > 3;}function func2(value, index, arr){  return value > 0;}function func3(value, index, arr){  return value >5;}//不是所有值都大于3, 所以返回falseconsole.log(arr.every(func1)); // => false//所有值都大于0, 所以返回trueconsole.log(arr.every(func2)); // => trueconsole.log(arr.some(func1)); // => trueconsole.log(arr.some(func3)); // => false

执行结果相当于以下函数

//接上例//相当于arr.everyfunction myEvery(a, func){  for(var i = 0; i < a.length; i++){    if(!func(arr[i], i, a))      return false;  }  return true;}//相当于arr.somefunction mySome(a, func){  for(var i = 0; i < a.length; i++){    if(func(arr[i], i, a))      return true;  }  return false;}console.log(myEvery(arr, func1));  // => falseconsole.log(myEvery(arr, func2));  // => trueconsole.log(mySome(arr, func1));  // => trueconsole.log(mySome(arr, func3));  // => false

注意: 这两个方法不会遍历所有元素, 一旦确认返回值, 就会停止遍历(类似于上述我写的myEvery和mySome);

reduce和reduceRight - 简化

arr.reduce(func[, initValue])
arr.reduceRight(func[, initValue])

这两个方法会使用参数中的函数将数组元素进行组合, 并返回单个元素;

• func: 用于合并的函数;
• initValue: 合并前的初始值, 此值会作为func第一次被调用时的第一个参数

reduce从数组的正方向(0/1/2…..length-1)开始,reduceRight从数组的反方向(length-1/length-2/…..0)开始

func原形

function func(lastResult, value);

参数含义

• lastResult: 上轮计算的结果, 第一次调用时, 此值为initValue(reduce的第二个参数, 如果有 )或者arr[0](当没有传入initValue时, 会取数组的第一个元素, 如果是reduceRight, 为最后一个元素 )
• value: 当前轮的元素值

实例:

var arr = [1,2,3,4,5];function func1(lastResult, value){  return lastResult + value;}console.log(arr.reduce(func1)); // => 15

对应的js实现:

function myReduce(a, func, initValue){  var rtn = initValue || a[0];  for(var i = initValue?0:1; i < a.length; i++){    rtn = func(rtn, a[i]);  }  return rtn;}function myReduceRight(a, func, initValue){  var rtn = initValue || a[a.length - 1];  for(var i = initValue?(a.length - 1):(a.length - 2); i >=0; i--){    rtn = func(rtn, a[i]);  }  return rtn;}console.log(myReduce(arr, func1,0));  // => 15console.log(myReduceRight(arr, func1,0));  // => 15

indexOf和lastIndexOf - 搜索

arr.indexOf(value);
arr.lastIndexOf(value);

搜索整个数组中具有给定值(value)的元素, 并返回第一次找到的元素所在的索引, 如果没有找到返回-1;
有些朋友可能记得字符串对象中有这两个方法, 其实这里的用法和字符串是一样的
下面直接看实例:

var arr = [1,2,3,2,1];console.log(arr.indexOf(2)); // => 1console.log(arr.lastIndexOf(2)); // => 3

对应js实现

function myIndexOf(a, value){  for(var i = 0; i < a.length; i++){    if(a[i] === value){      return i;    }  }  return -1;}function myLastIndexOf(a, value){  for(var i = a.length - 1; i >=0; i--){    if(a[i] === value){      return i;    }  }  return -1;}console.log(myIndexOf(arr, 2));  // => 1console.log(myLastIndexOf(arr, 2));  // => 3

Array.isArray - 判断对象是否为数组对象

这是一个静态方法, 用来判断参数是否为数组对象, 例如

console.log(Array.isArray([]));  // => trueconsole.log(Array.isArray({})); // => false

对应的js实现代码

var isArray = Function.isArray || function (o){    return typeof o === "object" && Object.prototype.toString.call(o) === "[object Array]";  }console.log(isArray([]));  // => trueconsole.log(isArray({})); // => false