javascript Array Methods(学习笔记)

ECMAScript 5 定义了9个新的数组方法,分别为:

1.forEach();  2.map();  3.filter();  4.every();  5.some();  6.reduce();  7.reduceRight();  8.indexOf();  9.lastIndexOf();

概述:首先,大多数的方法都接受一个函数作为第一个参数,并为数组里的每个元素(或者一些元素)执行这个函数.在稀疏数组中(索引不以0开始,并且元素不连续),不存在的数组元素不调用函数参数.大多数实例中,定义的函数(方法中的参数)包含三个参数:第一个是元素的值,第二个是元素的索引,第三个是数组本身.ECMAScript 5 数组方法不改变调用它们的数组,但是我们自己定义的函数可能会改变数组的值.接下来分别介绍具体方法:

forEach():

为数组中的每个元素执行指定操作.

array1.forEach(callbackfn[, thisArg])

参数:

参数	定义
array1	必选。 一个数组对象。
callbackfn	必选。 最多可以接受三个参数的函数。 对于数组中的每个元素，forEach 都会调用 callbackfn 函数一次。
thisArg	可选。 callbackfn 函数中的 this 关键字可引用的对象。 如果省略 thisArg，则 undefined 将用作 this 值。

参数

如果callback参数不是函数对象,则将引发TypeError异常.

备注:

对于数组中出现的每个元素，forEach 方法都会调用 callbackfn 函数一次（采用升序索引顺序）。 将不会为数组中缺少的元素调用回调函数。

除了数组对象之外，forEach 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数语法:

function callbackfn(value, index, array1)

你可使用最多三个参数来声明回调函数。

 

prototype源码:  (来源于官方文档)

 1 // Production steps of ECMA-262, Edition 5, 15.4.4.18

 2 // Reference: http://es5.github.io/#x15.4.4.18

 3 if (!Array.prototype.forEach) {

 4 

 5   Array.prototype.forEach = function(callback, thisArg) {

 6 

 7     var T, k;

 8 

 9     if (this == null) {

10       throw new TypeError(' this is null or not defined');

11     }

12 

13     // 1. Let O be the result of calling ToObject passing the |this| value as the argument.

14     var O = Object(this);

15 

16     // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".

17     // 3. Let len be ToUint32(lenValue).

18     var len = O.length >>> 0;

19 

20     // 4. If IsCallable(callback) is false, throw a TypeError exception.

21     // See: http://es5.github.com/#x9.11

22     if (typeof callback !== "function") {

23       throw new TypeError(callback + ' is not a function');

24     }

25 

26     // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.

27     if (arguments.length > 1) {

28       T = thisArg;

29     }

30 

31     // 6. Let k be 0

32     k = 0;

33 

34     // 7. Repeat, while k < len

35     while (k < len) {

36 

37       var kValue;

38 

39       // a. Let Pk be ToString(k).

40       //   This is implicit for LHS operands of the in operator

41       // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.

42       //   This step can be combined with c

43       // c. If kPresent is true, then

44       if (k in O) {

45 

46         // i. Let kValue be the result of calling the Get internal method of O with argument Pk.

47         kValue = O[k];

48 

49         // ii. Call the Call internal method of callback with T as the this value and

50         // argument list containing kValue, k, and O.

51         callback.call(T, kValue, k, O);

52       }

53       // d. Increase k by 1.

54       k++;

55     }

56     // 8. return undefined

57   };

58 }

具体应用如下:

 1 //defined the callback function

 2 function showResult(val,index,arr){

 3         document.write("value:"+val);

 4         document.write("index:"+index);

 5         document.write("<br />");

 6 }

 7 

 8 //defined an array and assignment two values

 9 var arrays = ["hello","world"];

10 

11 //invoked

12 arrays.forEach(showResult)

13 

14 //output

15 value:hello index:0

16 value:world index:1

 

map():

对数组的每个元素调用定义的回调函数并返回包含结果的数组.

注意:用法,参数和forEach()相似,但是map()要返回一个结果数组.参考上面forEach()的用法.直接上源码:

// Production steps of ECMA-262, Edition 5, 15.4.4.19

// Reference: http://es5.github.io/#x15.4.4.19

if (!Array.prototype.map) {



  Array.prototype.map = function(callback, thisArg) {



    var T, A, k;



    if (this == null) {

      throw new TypeError(' this is null or not defined');

    }



    // 1. Let O be the result of calling ToObject passing the |this| 

    //    value as the argument.

    var O = Object(this);



    // 2. Let lenValue be the result of calling the Get internal 

    //    method of O with the argument "length".

    // 3. Let len be ToUint32(lenValue).

    var len = O.length >>> 0;



    // 4. If IsCallable(callback) is false, throw a TypeError exception.

    // See: http://es5.github.com/#x9.11

    if (typeof callback !== 'function') {

      throw new TypeError(callback + ' is not a function');

    }



    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.

    if (arguments.length > 1) {

      T = thisArg;

    }



    // 6. Let A be a new array created as if by the expression new Array(len) 

    //    where Array is the standard built-in constructor with that name and 

    //    len is the value of len.

    A = new Array(len);



    // 7. Let k be 0

    k = 0;



    // 8. Repeat, while k < len

    while (k < len) {



      var kValue, mappedValue;



      // a. Let Pk be ToString(k).

      //   This is implicit for LHS operands of the in operator

      // b. Let kPresent be the result of calling the HasProperty internal 

      //    method of O with argument Pk.

      //   This step can be combined with c

      // c. If kPresent is true, then

      if (k in O) {



        // i. Let kValue be the result of calling the Get internal 

        //    method of O with argument Pk.

        kValue = O[k];



        // ii. Let mappedValue be the result of calling the Call internal 

        //     method of callback with T as the this value and argument 

        //     list containing kValue, k, and O.

        mappedValue = callback.call(T, kValue, k, O);



        // iii. Call the DefineOwnProperty internal method of A with arguments

        // Pk, Property Descriptor

        // { Value: mappedValue,

        //   Writable: true,

        //   Enumerable: true,

        //   Configurable: true },

        // and false.



        // In browsers that support Object.defineProperty, use the following:

        // Object.defineProperty(A, k, {

        //   value: mappedValue,

        //   writable: true,

        //   enumerable: true,

        //   configurable: true

        // });



        // For best browser support, use the following:

        A[k] = mappedValue;

      }

      // d. Increase k by 1.

      k++;

    }



    // 9. return A

    return A;

  };

}

 

具体实现:

 1 //defined callback function

 2 function AreaOfCircle(radius){

 3     var res = Math.PI(radius*radius);

 4     return res.toFixed(0);

 5 }

 6 

 7 //defined the array and assignment

 8 var arr = [10,20,30];

 9 

10 //invoked

11 var arrlist = arr.map(AreaOfCircle);

12 

13 //output

14 document.write(arrlist);

15 

16 314,1257,2827

 

filter():

返回数组中的满足回调函数中指定的条件的元素.

filter()方法的参数也如上,不过区别在于它返回一个包含回调函数为其返回 true 的所有值的新数组。 如果回调函数为 array1 的所有元素返回 false，则新数组的长度为 0。

 

prototype源码:

 1 if (!Array.prototype.filter) {

 2   Array.prototype.filter = function(fun/*, thisArg*/) {

 3     'use strict';

 4 

 5     if (this === void 0 || this === null) {

 6       throw new TypeError();

 7     }

 8 

 9     var t = Object(this);

10     var len = t.length >>> 0;

11     if (typeof fun !== 'function') {

12       throw new TypeError();

13     }

14 

15     var res = [];

16     var thisArg = arguments.length >= 2 ? arguments[1] : void 0;

17     for (var i = 0; i < len; i++) {

18       if (i in t) {

19         var val = t[i];

20 

21         // NOTE: Technically this should Object.defineProperty at

22         //       the next index, as push can be affected by

23         //       properties on Object.prototype and Array.prototype.

24         //       But that method's new, and collisions should be

25         //       rare, so use the more-compatible alternative.

26         if (fun.call(thisArg, val, i, t)) {

27           res.push(val);

28         }

29       }

30     }

31 

32     return res;

33   };

34 }

具体实现:

 1 // Define a callback function.

 2 function CheckIfPrime(value, index, ar) {

 3     high = Math.floor(Math.sqrt(value)) + 1;

 4     

 5     for (var div = 2; div <= high; div++) {

 6         if (value % div == 0) {

 7             return false;

 8         }

 9     } 

10     return true;

11 }

12 

13 // Create the original array.

14 var numbers = [31, 33, 35, 37, 39, 41, 43, 45, 47, 49, 51, 53];

15 

16 // Get the prime numbers that are in the original array. 

17 var primes = numbers.filter(CheckIfPrime);

18 

19 document.write(primes);

20 // Output: 31,37,41,43,47,53

 

以上资料整理官方文档和javascript权威指南