JavaScript 基础(六) 数组方法 闭包

在一个对象中绑定函数,称为这个对象的方法。
在JavaScript 中,对象的定义是这样的;
    var guagua = {
        name:‘瓜瓜‘,
        birth:1990
    };
    但是,如果我们给瓜瓜绑定一个函数,就可以做更多的事情。
    var guagua = {
      name:‘瓜瓜‘,
      birth:1990,
      age:function(){
      var y = new Date().getFullYear();
      return y - this.birth;
      }
    }
   guagua.age; // function guagua.age()
   xguagua.age(); // 今年调用是25,明年调用就变成26了

apply
    虽然在一个独立的函数调用中,根据是否是strict模式,this 指向undefined 或window,不过我们还可以控制this 的指向。
    要指定函数的this 指向哪个个对象,可以用函数的本身的apply 方法,他接收两个参数,第一个就是需要绑定的this 变量,
    第二个参数是Array,表示函数本身的参数。
    用apply 修复getAge() 调用:
      function getAge(){
        var y = new Date().getFullYear();
        return y - this.birth;
      }

    var guagua = {
      name:‘小明‘,
      birth:1990,
      age:getAge
    };
    guagua.age(); // 25
    getAge.apply(xiaoming,[]); // 25, this 指向xiaoming 参数为空。  

    另一个与apply()类似的方法是call(),唯一区别是:
        apply()把参数打包成Array再传入;
        call()把参数按顺序传入。
    比如调用Math.max(3, 5, 4),分别用apply()和call()实现如下
        Math.max.apply(null,[3,5,4]); // 5
        Math.max.call(null,3,5,4); // 5
    对普通函数调用,我们通常把this绑定为null。

map
    由于map() fangf dingyi zai JavaScript 的Array 中,我们调用Array 的map() 方法,传入自己的函数,就得到了一个新的Array
      function pow(x){
        return x * x;
      }
    var arr = [1,2,3,4,5,6,7,8,9];
    arr.map(pow); // [1,4,9,16,25,36,49,64,81]
    map() 传入的参数是pow,即函数对象本身。

reduce
    在看reduce 的应付,Array 的reduce() 把一个函数作为在这个Array 的[x1,x2,x3....]上,这个函数必须接收两个参数,
    redyce()把结果继续和序列下个元素做积累计算,其效果就是。
    [x1,x2,x3,x4].reduce(f) = f(f(f(x1,x2),x3),x4)
    比方说对一个Array求和,就可以用reduce实现:
        var arr = [1, 3, 5, 7, 9];
          arr.reduce(function (x, y) {
          return x + y;
        }); // 25
    要把[1, 3, 5, 7, 9]变换成整数13579,reduce()也能派上用场:
      var arr = [1, 3, 5, 7, 9];
        arr.reduce(function (x, y) {
        return x * 10 + y;
      }); // 13579

filter
    filter 也是一个常用的操作,它用于吧Array的某些元素过滤掉,然后返回剩下的元素。
    和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,

    然后根据返回值是true还是false决定保留还是丢弃该元素。
    在一个Array中,删掉偶数,只保留奇数,可以这么写:
    var arr = [1,2,4,5,6,9,10,15];
      var r = arr.filter(function(x){
      return x % 2 !==0;
    });
    r: // [1,5,9,15]
    把一个Array中的空字符串删掉,可以这么写:
    var arr = [‘A‘,‘‘,‘B‘,null,undefined,‘C‘,‘‘];
      var r = arr.flter(function(s){
      return s && s.trim(); // 注意: IE9以下的版本没有trim()方法
    })
    r: // [‘A‘,‘B‘,‘C‘]
    可见用filter()这个高阶函数,关键在于正确实现一个“筛选”函数。

sort
    JavaScript的Array的sort()方法就是用于排序的,但是排序结果可能让你大吃一惊:
     // 看上去正常 的结果
      [‘Google‘,‘Apple‘,‘Microsoft‘].sort(); // [‘Apple‘,‘Google‘,‘Microsoft‘];
    // apple 排在了最后
      [10,20,1,2].sort(); //[1,10,2,20]
    第二个排序把apple排在了最后,是因为字符串根据ASCII码进行排序,而小写字母a的ASCII码在大写字母之后。

    要按数字大小排序,我们可以这么写:
      var arr = [10,20,1,2]
      arr.sort(function(x,y){
        if(x < y){
          return 1;
        }
      if(x > y){
        return 1;
      }
        return 0;
      }) // [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]

  

    我们提出排序应该忽略大小写,按照字母序排序
      var arr = [‘Google‘,‘apple‘,‘Microsoft‘];
      arr.sort(function(s1,s2){
      x1 = s1.toUpperCase();
        x2 = s2.toUpperCase();
        if(x1 < x2){
            return -1;
        }
      if(x1 > x2){
          return 1;
      }
          return 0;
      }); // [‘apple‘,‘Google‘,‘Microsoft‘]
    忽略大小写来比较两个字符串,实际上就是先把字符串都变成大写(或者都变成小写),再比较。

    sort()方法会直接对Array进行修改,它返回的结果仍是当前Array:
      var a1 = [‘B‘, ‘A‘, ‘C‘];
      var a2 = a1.sort();
      a1; // [‘A‘, ‘B‘, ‘C‘]
      a2; // [‘A‘, ‘B‘, ‘C‘]
      a1 === a2; // true, a1和a2是同一对象  

    闭包函数作为返回值
    高阶段函数除了可以接受函数作为参数外,还可以把函数作为结果值返回。
    function sum(arr){
      return arr.reduce(function(x,y){
      return x + y;
      });
    }
    sum([1,2,3,4,5]); //15

  但是,如果不需要立刻求和,而是在后面的代码中,根据需要再计算怎么办?可以不返回求和的结果,而是返回求和的函数!
    function lazy_sum(arr){
      var sum = function (){
      return arr.reduce(function(x,y){
      return x + y;
      })
    }

    return sum; 

  当我们调用lazy_sum()时,返回的并不是求和结果,而是求和函数:
    var f = lazy_sum([1,2,3,4,5]); // function sum();
  调用函数f 时,才真正计算求和的结果。
    f(); // 15
  当我们调用lazy_sum()时,每次调用都会返回一个新的函数,即使传入相同的参数:
    var f1 = lazy_sum([1,2,3,4,5]);
      var f2 = lazy_sum([1,2,3,4,5])
      f1 === f2; //false

闭包
    返回的函数在其定义内部引用了局部变量arr,所有,说以一个函数返回了一个函数,其内部的局部变量还被新幻术引用,所以闭包用起来简单。
      function count(){
        var arr = [];
        for(var i= 1; i <=3; i++ ){
        arr.push(function(){
        return i * i;
        })
      }
      return arr;
    }
    var results = count();
    var f1 = results[0];
    var f2 = results[1];
    var f3 = results[2];

  你可能认为调用f1(),f2()和f3()结果应该是1,4,9,但实际结果是:
    f1(); // 16
    f2(); //16
    f3(); //16

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

    function count(){
      var arr = [];
      for(var i=1; i <=3; i++){
      arr.push((function (n){
      return function(){
        return n * n;
      }
      })(i));
    }

  

  注意这里用来一个创建一个匿名函数并立刻执行的语法:
    (function(x){
      return x * x;
    })(3); //9

    return arr;
    }

    var results = count();
    var f1 = results[0];
    var f2 = results[1];
    var f3 = results[2];
      f1(); //1
      f2(); //4
      f3();//9

  在没有class机制,只有函数的语言里,借助闭包,同样可以封装一个私有变量。我们用JavaScript创建一个计数器:
    function create_counter(initial){
      var x = inintial || 0;
      return {
        inc : function(){
          x +=1;
          return x;
        }
        }
    }

  它用起来像这样:
    var c1 = create_counter();
      c1.inc(); // 1
      c1.inc();//2
      c1.inc();//3
    var c2 = create_counter(10);
      c2.inc(); //11
      c2.inc(); //12
      c2.inc();//13

  闭包还可以把多参数的函数变成单参数的函数。
    function make_pow(n){
      return function(x){
          return Math.pow(x,n);
      }
    }
  // 创建两个新函数。
    var pow2 = make_pow(2);
    var pow3 = make_pow(3);
    pow2(5); // 25
    pow3(7); //343

时间: 2024-09-30 06:06:00

JavaScript 基础(六) 数组方法 闭包的相关文章

【javascript基础】8、闭包

原文:[javascript基础]8.闭包 前言 函数和作用域啥的我们前面已经了解了,现在就要学习闭包了,这是一个挺晦涩的知识点,初学者可能会感觉不好理解,但是高手都不不以为然了,高手就给我提点意见吧,我和新手一起来学习什么是闭包. 例子 先不说定义,先看一个题,看看大家能得出正确的结果不, function test(){ var arr = []; for(var i = 0;i<10;i++){ arr[i] = function(){ return i; } } return arr;

JavaScript基础之数组的重排序

JavaScript基础之数组的重排序 数组(Array)算是继Object之后我们最常用到的类型了.与其他语言不同的是,javascript数组的每一项可以保存任何类型的数据,并且数组的大小是可以动态调整的. JavaScript已经为我们提供了两个数组重排序的方法,reverse()和sort() 方法. 其中reverse()方法会反转数组项的顺序.举个栗子: var values = [18,4,56,1,"a","b","abc"];

JavaScript基础——函数表达式、闭包

简介 函数表达式是JavaScript中的一个既强大又容易令人困惑的特性.定义函数的方式有两种:一种是函数声明,另一种就是函数表达式.函数声明的语法是这样的: function functionName(arg0 , arg1 , arg2--){ //函数体 } 首先是function关键字,然后是函数的名字,这就是指定函数名的方式.Firefox.Safari.Chrome和Opera都给函数定义了一个非标准的name属性,通过这个属性可以访问到给函数指定的名字.这个属性的值永远等于跟在fu

javaScript基础03数组..

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript基础练习03</title> 6 <script> 7 // 简单数据类型 Number String Boolean null undefined 8 9 // 复杂数据类型 对象,方法.,引用类型 10

JavaScript 基础回顾——数组

JavaScript是无类型语言,数组元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同类型.数组的元素设置可以包含其他数组,便于模拟创建多维数组. 1.创建数组 在JavaScript中,创建数组可以使用两种方式 (1)使用 "[]" 创建. <script type="text/javascript"> var arr=[];  //创建空数组 var arr=['北京',0,true,'上海','代码里','www.daimali.com

javascript基础之数组对象

一.定义数组的方法: 定义了一个空数组: var myArray =new Array(); 指定有n个空元素的数组: var myArray=new Array(n); 定义数组并赋值: var myArray =[1,2,3]; 数组元素的使用: 数组名[下标]=值; 二.数组属性:length用法 数组对象.length; //返回数组长度 三.数组方法: concat();连接两个或更多的数组,并返回结果. var myArray=[1,2]; document.write(myArra

javascript中常用数组方法详细讲解

javascript中数组常用方法总结 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号.案例如下: var a=[1,2,3]; a.join();//=> "1,2,3" 因为没有指定分隔符,默认为逗号. a.join("+");//=> "1+2+3" 指定分隔符为+ a.

JavaScript基础——使用数组

Array对象提供存储和处理一组其他对象的一种手段.数组可以存储数值.字符串或其他JavaScript对象.创建JavaScript数组有几种不同的方法.例如,下面的语句穿件同样的驻足的3个相同的版本: var arr = ["one","two","three"]; var arr2 = new Array(); arr2[0] = "one"; arr2[1] = "two"; arr2[2] = &q

javascript 最强大的数组方法-splice()

splice()方法向/从数组中添加/删除项目,然后返回被删除的项目. splice()方法的主要用途是向数组的中部插入项,使用这种方法的方式则有以下几种: 删除:可以删除任意数量的项,只需要制定2个参数:要删除的第一项的位置和要删除的项数. 例子: var array = new Array("niu","li","na"); var deleteItem = array.splice(0,2); console.log("delet