zoukankan      html  css  js  c++  java
  • ECMAScript5下Array的方法

    声明:ECMAScript不会兼容IE8及以下版本IE浏览器。

    一、迭代方法

    注:这些迭代方法不会影响数组的值。

    每个方法都有两个参数:

     array.方法(执行函数体,当前作用域(比如this,这个可以省略,用处不大));

    而该执行函数体也有三个参数,分别是 函数体(数组项,该项index,该项所在的数组);

    5个方法如下:

    every:对每个数组中的item都执行该方法,综合执行结果返回一个布尔值,类似于且的关系,成员执行结果全为true,则为true

    some:原理和every相同,但是类似于或的关系。

    map:对数组中的每一项调用执行函数体,返回该函数执行后的数组。

    filter:对数组中每一项调用函数体,返回该函数执行后的布尔值为true的项所组成的数组。

    forEach:对数组中的每一项执行函数体,无返回值。

    下面来看看执行的结果:

    var arr = ["sp", "2", "3"];
    
    arr.forEach(function aaa(c) {
                return parseInt(c);
     });//无任何返回值,弹出undefined。
    
    arr.every(function aaa(c) {
                return parseInt(c);
     });//返回false。
    
    
    arr.every(function aaa(c) {
                return parseInt(c);
     });//返回true。
    
    arr.map(function aaa(c) {
                return parseInt(c);
     });//返回[NaN,2,3]。
    
    arr.filter(function aaa(c) {
                return parseInt(c);
     });//返回[2,3]。
    
    
    alert(arr);//[sp,2,3]

     原理已经讲述完毕,下面我们来看看一些题目是否让你混乱

    1.["1", "2", "3"].map(parseInt)输出什么?
       答案是:[1,NaN,NaN]

       解析:因为迭代所需要的函数体必须三个参数:item,itemIndex,array;但是parseInt函数只有两个参数val和radix。迭代是怎么原理?如果函数体形参没定义index就自动按次序迭代,有index就按item的index进行运算,现在调用parseInt,依次parseInt(1,0) ,parseInt(2,1),parseInt(3,2). 而parseInt的radix的有效值只有0,2,8,10,16,但是对字符串3不是二进制字符串,所以输出NaN。

    2.var ary = [0,1,2];

       ary[4] = 10;

       ary.filter(function(x) { return x === undefined;}); 输出什么?

       答案是:[]

       解析:如果为数组ary第5个位置赋值10,数组ary会变成ary[0,1,2,,10],此时执行filter的函数体,根据filter的特性,对于返回值为false的计算项不会显示,而对于没有存储任何东西的数组下标,filter会跳过不执行,所以输出不会是[undefined],而是[]。

    3.var ary = Array(3);

       ary[0]=2 ;

       ary.map(function(elem) { return '1'; });

       答案是:['1',,]

       解析:还是和上题一个原理。数组ary后面两个下标的值为空,但是map不会将这些空值跳过,可是这些空值不能用来参与运算,所以只能返回空。

    二、缩小方法

    缩小方法分别是 reduce和reduceRight,这两个方法有两个参数,分别是函数体和缩小基础值,函数体又有四个参数 前一个值当前值值的index数组。reduce和reduceRight本质没什么区别,只是一个向前一个向后而已。

    数组.redcuce(函数体,缩小基础值(可选));看具体事例:

    var arr = [1, 2, 3,4,5];
    arr.reduce(function (v1, v2) {
        return v1 + v2;
        });//输出 15 也就是 1+2+3+4+5

    当添加基础值参数时:

    var arr = [1, 2, 3,4,5];
    arr.reduce(function (v1, v2) {
        return v1 + v2;
        },2);//输出 17 也就是 先得出2 后 再加上 1+2+3+4+5

    讲完原理依旧是题目:
    1.[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow)]输出什么?

    答案是:报错

    解析:reduce无法对空值进行操作,它不像map或filter那样迁就或过滤空值,而是根本不支持空值操作,所以报错。但是如果我们为reduce设置第二个参数呢?[].reduce(Math.pow,2)会输出什么呢?答案是2,而且不会报错!因为reduce此时已经有了初始返回值2,reduce函数体的操作无关紧要。

  • 相关阅读:
    取消Win10自动更新?
    Mybatis入门调试错误:Could not find resource XXX
    IDEA导入新Module出现的问题
    WEB-INF目录下的存放包的目录只能命名为lib
    rocketmq 同步刷盘、异步刷盘和同步复制、异步复制
    spring 集成mybatis
    Spring <aop:aspectj-autoproxy proxy-target-class="false|true"/>
    spring中expose-proxy的作用与原理
    分布式事物
    <context:annotation-config/>,<mvc:annotation-driven/>和<context:component-scan>之间的关联
  • 原文地址:https://www.cnblogs.com/JhoneLee/p/3542447.html
Copyright © 2011-2022 走看看