zoukankan      html  css  js  c++  java
  • 数组的方法

    map、reduce、filter、sort方法的共同之处就是方法的参数是一个函数,通过对这个"函数参数"内部作相应处理来改变当前数组以得到想要的数组。

    1.map (that's speak in Chinese is '映射')

        var arr = [1, 3, 5, 7, 9];
    
        //简单的转换
        var arr2 = arr.map(function() {
            return 1;
        });
        console.log(arr);    //[1, 3, 5, 7, 9]
        console.log(arr2);    //[1,1, 1, 1, 1]
    
        //复杂转换
        var arr3 = arr.map(function(x, y, z) {
            //在转换之前先搞清楚函数参数对应参数的意义
            console.log(this);    //this ==> window
            console.log(x);    //1 3 5 7 9 ==> 数组的value值
            console.log(y);    //0 1 2 3 4 ==> 数组的index值
            console.log(z);    //[1, 3, 5, 7, 9] ==> 数组本身
    
            return x*x;
        })    
        console.log(arr3);    //[1, 9, 25, 49, 81]
    
    其实map方法有两个参数map(callbackFn, thisArg); thisArg参数指的是将callbackFn里的this指向thisArg。
    

    2.reduce

        var arr = [2, 4, 6, 8, 10];
    
        //reduce不同于map方法,方法返回的是一个值而不是一个数组了。(毕竟不再是映射了嘛!)
        var value1 = arr.reduce(function() {
            return 1;
        });
        console.log(value1 );    //1
    
        //那我们就让它的"函数参数"做点什么吧 - 数组内元素累加
        var value2 = arr.reduce(function(firstValue, nextValue, currentIndex, array) {
            console.log(firstValue);
            console.log(nextValue);
            console.log(currentIndex);
            console.log(array);
            return firstValue + nextValue;
        });
        console.log(arr);    //[2, 4, 6, 8, 10]
        console.log(value2);    // 30
    

    注意事项:

    1.arr.reduce(callbackFn, [initialValue]) - 同样reduce方法也是有第二个参数的

    initialValue 可选项,其值用于第一次调用callbackFn的第一个参数。
    第一次调用callbackFn的第二个参数就是数组的第一个元素。
    
    若没有,则第一次调用callbackFn的第一个参数是数组的第一个元素。
    第一次调用callbackFn的第二个参数就是数组的第二个元素。
    
        var arr = ['a', 'b', 'c'];
        var value = arr.reduce(function(x, y) {
            return x + y;
        });
        console.log(value);    //'abc'
        var value2 = arr.reduce(function(x, y) {
            return x + y;
        }, 'A');
        console.log(value2);    //'Aabc'
    

    2.如果数组为空并且没有提供initialValue,会抛出TypeError。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue,或者有提供initialValue,但数组为空,那么此唯一值将被返回并且callbackFn不会被执行。

        var arr = [];
        arr.reduce(function() {
               return 1;
        });
        //Uncaught TypeError: Reduce of empty array with no initial value
    
        arr.push('A');
        var value = arr.reduce(function() {
            return 1;
        });
        console.log(value);    //'A' callbackFn未执行
    
        arr.pop();
        var value2 = arr.reduce(function() {
            return 1;
        }, 'A');
        console.log(value2);    //'A' callbackFn未执行
    

    3.filter ( 过滤 )

    filter的参数和map方法的参数一致,"函数参数"的参数也一致,就不啰嗦了。

        //过滤 - 符合条件的留下,不符合的走人。
        var arr = [{name: '小明', grade: 2},{name: '小红', grade: 99},{name: '小李', grade: 60}];
        
        //boss不高兴,想要进行裁员,要求对业绩分不及格(包括60)的炒鱿鱼。
        var arr2 = arr.filter(function(x) {
            if (x.grade >60) {
                console.log(x.name + '可以留下。');
                return true;
            } else {
                console.log(x.name + '可以走了。');
                return false;
            }
        });
        console.log(arr2);    //[Object] Object ==> {name: '小红', grade: 99};
        console.log(arr);   // [Object, Object, Object] 原数组未发生变化
    

    小红说:‘老板,我辞职...’

    4.sort ( 排序 )

        var arr = [10, 20, 1, 2];
        arr.sort();
        console.log(arr);    //[1, 10, 2, 20]
        
        /*
            造成以上排序结果的原因:
            默认情况下,对字符串排序,是按照ASCII的大小比较的。
            Array的sort方法默认把所有元素先转换为String再排序,jieguo'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。
        */
    
        //想要对数字进行由小到大排序
        arr.sort(function(x, y) {
               if (x < y) {
                    return -1;
               } else if (x > y) {
                    return 1;
               }
               return 0;
        });
        console.log(arr);    //[1, 2, 10, 20]
    
        //想要对数字进行由大到小排序
        arr.sort(function(x, y) {
            if (x < y) {
                return 1;
            } else if(x > y) {
                return -1;
            } 
            return 0;
        });
        console.log(arr);    //[20, 10, 2, 1]
    
  • 相关阅读:
    ORACLE 数据迁移到SQL SEVER2005的问题
    sql server性能分析检测数据库阻塞语句
    经典存储过程
    sql server性能分析查询死锁的sql语句
    sql server性能分析索引使用效率评估
    discuz!X2.5不改代码即可去掉网址后面的forum.php后缀
    discuz!X2.5伪静态设置
    详解ListView
    frameset、frame和iframe的区别
    android中的Context到底该怎么用
  • 原文地址:https://www.cnblogs.com/dagaoxiaozheng/p/6610419.html
Copyright © 2011-2022 走看看