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
//每个数组元素的值自加1
data.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, 所以返回false
console.log(arr.every(func1)); // => false
//所有值都大于0, 所以返回true
console.log(arr.every(func2)); // => true

console.log(arr.some(func1)); // => true
console.log(arr.some(func3)); // => false

执行结果相当于以下函数

//接上例
//相当于arr.every
function myEvery(a, func){
  for(var i = 0; i < a.length; i++){
    if(!func(arr[i], i, a))
      return false;
  }
  return true;
}
//相当于arr.some
function 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));  // => false
console.log(myEvery(arr, func2));  // => true
console.log(mySome(arr, func1));  // => true
console.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));  // => 15
console.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)); // => 1
console.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));  // => 1
console.log(myLastIndexOf(arr, 2));  // => 3

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

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

console.log(Array.isArray([]));  // => true
console.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([]));  // => true
console.log(isArray({})); // => false