首页 > 网站 > WEB开发 > 正文

javascript Array Methods(学习笔记)

2024-04-27 14:15:18
字体:
来源:转载
供稿:网友

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.1122     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 032     k = 0;33 34     // 7. Repeat, while k < len35     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 operator41       // b. Let kPresent be the result of calling the Hasproperty internal method of O with argument Pk.42       //   This step can be combined with c43       // c. If kPresent is true, then44       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 and50         // 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 undefined57   };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 //invoked12 arrays.forEach(showResult)13 14 //output15 value:hello index:016 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.19if (!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 //invoked11 var arrlist = arr.map(AreaOfCircle);12 13 //output14 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 at22         //       the next index, as push can be affected by23         //       properties on Object.prototype and Array.prototype.24         //       But that method's new, and collisions should be25         //       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
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表