zoukankan      html  css  js  c++  java
  • JavaScript的array方法

    JavaScript高级函数

    1.map/reduce

    map()

    map()是array的一个方法

    作用: 对array中每一个元素调用自定义函数

    'use strict';
    function pow(x){
    return x*x;
    }
    var arr=[1,2,3,4,5]
    var newarray=arr.map(pow)
    

    map的回调函数有三个参数:

    callback(currentValue, index, array)通常只要第一个参数

    PS: map()传入的参数是pow,即函数对象本身

    通常map调用的自定义方法只包含一个参数

    reduce()

    reduce()也是array的一个方法

    作用: 从数组的前两个元素开始,作为函数参数,传入函数得到结果,

    结果再和下一个数组元素再一次调用函数,直到数组尽头

    [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
    

    PS: 通常reduce()调用的自定义方法只包含两个个参数

    2.filter(筛选)

    作用:把Array的某些元素过滤掉,然后返回剩下的元素.

    map()类似,Arrayfilter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

    //去掉空字符串

    var arr = ['A', '', 'B', null, undefined, 'C', '  '];
    var r = arr.filter(function (s) {
        return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
    });
    r; // ['A', 'B', 'C']
    

    回调函数

    通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

    var arr = ['A', 'B', 'C'];
    var r = arr.filter(function (element, index, self) {
        console.log(element); // 依次打印'A', 'B', 'C'
        console.log(index); // 依次打印0, 1, 2
        console.log(self); // self就是变量arr
        return true;
    });
    

    筛选素数:

    function get_primes(arr){
    if(elem===1){
    return false;
    }
    for(var i=2;i<=elem/2;i++){
    if(elem%i==0)
    {
    return false;
    }
    }
    return true;
    });
    return x;
    }
    

    PS: 关键在于正确实现一个“筛选”函数

    3.sort(排序)

    默认排序会把所有元素转成String在排序,根据一个元素的ASCII值进行排序(非递减)(TimSort算法)

    两两比较,当回调函数返回值大于0时,交换元素值

    自定义数字排序

    'use strict' 
    var arr=[10,20,1,2];
    
    arr.sort(function(x,y){
    	if (x < y) {
            return -1;
        }
        if (x > y) {
            return 1;
        }
        return 0;
    });
    console.log(arr); // [1, 2, 10, 20]
    

    数字倒序排列

    var arr = [10, 20, 1, 2];
    arr.sort(function (x, y) {
        if (x < y) {
            return 1;
        }
        if (x > y) {
            return -1;
        }
        return 0;
    }); // [20, 10, 2, 1]
    

    4.其他的Array方法

    every()和some()

    作用: 可以判断数组的所有元素是否满足测试条件(通过函数提供)

    • every()是全部满足的时候返回true,一个不满足返回false,并终止检测

    • some()是全部不满足的时候返回false,有一个满足就返回true

    find()

    作用: 查找第一个符合条件的元素

    查找符合条件的第一个元素,如果找到了就返回这个元素,否则,返回undefined

    findindex()

    作用: 查找第一个符合条件的元素的索引

    查找符合条件的第一个元素,找到这个元素就返回他的索引,如果没有找到就返回-1

    forEach()

    作用: 常用于遍历数组

    (和map类似)把数组每个元素依次传入函数,但不会返回新的数组.

    函数作为返回值

    函数里再定义一个函数,返回值为里面定义的函数

    调用函数作为返回值的函数式,每次调用都会返回一个新的函数,即使传入相同参数

    function lazy_sum(arr) {
        var sum = function () {
            return arr.reduce(function (x, y) {
                return x + y;
            });
        }
        return sum;
    }
    //此时返回的是求和函数
    var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
    f(); // 15 此时调用,才进行计算
    

    在函数lazy_sum中又定义了函数sum,并且,内部函数sum可以引用外部函数lazy_sum的参数和局部变量,当lazy_sum返回函数sum时,相关参数和变量都保存在返回的函数中,这种称为“闭包(Closure)”的程序结构拥有极大的威力.

    闭包(懵逼了)(吐彩虹)

    有权访问另一个函数作用域内变量的函数都是闭包。

    函数里面的函数会随着外部定义函数而改变

    PS: 因为返回值就是一个函数,调用的时候要加小括号

    返回闭包时牢记的一点就是:返回函数不要引用任何循环变量,或者后续会发生变化的变量。

    如果一定要引用循环变量怎么办?方法是再创建一个函数,用该函数的参数绑定循环变量当前的值,无论该循环变量后续如何更改,已绑定到函数参数的值不变:

    箭头函数(=>)(强哒)

    (参数...)=>{函数体}等价于function(参数...){函数体}

    当返回的是一个对象时函数体大括号外边加小括号

    x=>({foo:x})

    this

    箭头函数内部的this是词法作用域,由上下文确定

    var obj = {
        birth: 1990,
        getAge: function () {
            var b = this.birth; // 1990
            var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
            return fn();
        }
    };
    obj.getAge(); // 25
    

    箭头函数完全修复了this指向,this总是指向词法作用域,也就是外层调用 obj

    generator(生成器)

    ES6引入借鉴Python同名函数

    写法和函数类似,只是在function后加*,通过yield多次返回值,也可通过return返回值

    函数在执行过程中,如果没有遇到return语句(函数末尾如果没有return,就是隐含的return undefined;),控制权无法交回被调用的代码。

    function* (x){

    yield x

    }

    function* fib(max) {
        var
            t,
            a = 0,
            b = 1,
            n = 0;
        while (n < max) {
            yield a;
            [a, b] = [b, a + b];
            n ++;
        }
        return;
    }
    fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
    

    直接调用一个generator和调用函数不一样,fib(5)仅仅是创建了一个generator对象,还没有去执行它。

    调用generator对象有两个方法,

    1. 一是不断地调用generator对象的next()方法:next()方法会执行generator的代码,然后,每次遇到yield x;就返回一个对象{value: x, done: true/false},然后“暂停”。返回的value就是yield的返回值,done表示这个generator是否已经执行结束了。如果donetrue,则value就是return的返回值。当执行到donetrue时,这个generator对象就已经全部执行完毕,不要再继续调用next()`了。

      var f = fib(5);
      f.next(); // {value: 0, done: false}
      f.next(); // {value: 1, done: false}
      f.next(); // {value: 1, done: false}
      f.next(); // {value: 2, done: false}
      f.next(); // {value: 3, done: false}
      f.next(); // {value: undefined, done: true}
      
    2. 第二个方法是直接用for ... of循环迭代generator对象,这种方式不需要我们自己判断done

    for (var x of fib(10)) {
        console.log(x); // 依次输出0, 1, 1, 2, 3, ...
    }
    
    

    generator还有另一个巨大的好处,就是把异步回调代码变成“同步”代码。这个好处要等到后面学了AJAX以后才能体会到。

    try {
        r1 = yield ajax('http://url-1', data1);
        r2 = yield ajax('http://url-2', data2);
        r3 = yield ajax('http://url-3', data3);
        success(r3);
    }
    catch (err) {
        handle(err);
    }
    

    看上去是同步的代码,实际执行是异步的。

  • 相关阅读:
    用迭代法求x=a−−√。求平方根的迭代公式为 xn+1 = 12(xn + axn) 要求前后两次求出的x的差的绝对值小于10−5
    C 数组
    fofa自动化爬虫脚本更新+详解
    c# winfrom接收http协议body数据
    FLW要求
    modbus工具问题
    2020年总结
    WIFI K型热电偶传感器
    泛海三江烟感JTY-GD-H361 V2.7
    工位终端
  • 原文地址:https://www.cnblogs.com/colorchild/p/13525742.html
Copyright © 2011-2022 走看看