• JavaScript统计数据处理(3)


    JavaScript是一种广泛使用网页编程语言,
    在浏览器中运用JavaScript技术处理统计数据具有最佳的推广传播效果

    函数(Function)是被设计为执行特定任务的代码块。它在可以实现定制运算功能的同时,还带有一个入口和一个出口。所谓的入口,就是函数所带的各个参数,我们可以通过这个入口,把函数的参数值代入子程序,供计算机处理;所谓出口,就是指函数的函数值,在计算机求得之后,由此口带回给调用它的程序。

    在程序设计中,常将一些常用的功能模块编写成函数,放在函数库中供用户选用。善于利用函数,可以减少重复编写程序段的工作量。

    简而言之,JS函数(function)就是能完成某个常用功能的一小段代码,而JS方法(method)是通过对象调用的javascript函数。也就是说方法也是函数,只是比较特殊的、属于指定对象的函数。将函数和对象绑定在一起时,函数就变成了某个对象的方法(method)。

    JS中所有事物都是对象,对象是拥有属性和方法的数据。但是,JS对象又是由函数创建的,JS函数本身也是对象。“方法是函数、对象是函数”,JS中函数的用途和含义有点...

    本文从“JS函数(function)就是能完成某个常用功能的一小段代码”出发,介绍JS函数的几种常用定义方式。掌握JS函数基本技术后,在统计数据处理过程中,我们将函数理解为某一统计对象(项目)所定制的方法。


    导读

    1、普通函数

     [返回]

    I、基本语法
    function 函数名称(参数1, 参数2, 参数3) {
        要执行的代码
        return 返回值
    }
    

    JavaScript函数语法解析如下:

    • JavaScript函数通过function关键词进行定义,其后是函数名称和括号()
    • 函数名可包含字母、数字、下划线和美元符号
    • 圆括号可包括由逗号分隔的参数
    • 由函数执行的代码被放置在花括号{}中
    • 函数返回值由return关键字指定

    II、无参数函数

    console.clear();
    function test1() {
    return "Hello World!";
    }
    //执行函数返回"Hello World!",并赋值给变量str
    var str = test1();  
    console.log(str);
    

    III、有参数函数

    //计算任意两个数的和
    function oSum(x, y) {
    return x+y;
    }
    var mySum = oSum(15, 85);  
    console.log(mySum);  //100
    

    IV、参数默认值设置

    //求和函数中给两个参数设置默认值
    console.clear();
    function oSum(x = 50, y = 50) {
    return x+y;
    }
    var mySum = oSum(15, 55);  
    console.log(mySum);  //70
    mySum = oSum(15);  
    console.log(mySum);  //65
    mySum = oSum();  
    console.log(mySum);  //100
    

    V、参数为函数

    console.clear();
    function oSum(x, y) {return x+y;}
    var mySum = oSum(oSum(45, 75), 100);
    console.log(mySum);  //220
    

    VI、对象{}为参数 - 解构赋值默认值

    console.clear();
    function oSum({x = 10, y = 20}) {
        return x+y;
    }
    console.log(oSum({}));  //30,这里直接调用oSum()出错
    console.log(oSum({x:100}));  //120
    console.log(oSum({y:100}));  //110
    console.log(oSum({x:100,y:200}));  //300
    console.log(oSum({y:50,x:20}));  //70
    

    VII、对象{}为参数 - 双重默认值

    //代码容错更好
    console.clear();
    function oSum({x = 10, y = 20} = {}) {
        return x+y;
    }
    console.log(oSum());  //30
    console.log(oSum({}));  //30
    console.log(oSum({x:100}));  //120
    console.log(oSum({y:100}));  //110
    console.log(oSum({x:100,y:200}));  //300
    console.log(oSum({y:50,x:20}));  //70
    

    2、函数arguments对象

     [返回]

    在JavaScript中,参数在函数内部是以一个数组表示的,arguments是函数内部的一个专门用来存储实参的数组对象。函数arguments的对象在函数运行时用于检测和重新设置参数。

    I、arguments.length - 函数参数数量

    console.clear();
    function fn(a,b,c){
    console.log(arguments.length);  //3
    return a+b+c;
    }
    console.log(fn(1,2,3));         //6
    

    II、arguments[] - 函数输出和设置

    console.clear();
    function fn(a,b,c){
    console.log(arguments[0]);  //1
    console.log(arguments[1]);  //2
    console.log(arguments[2]);  //3
    arguments[0] = 5;  //重新设置参数a=5
    return a+b+c;
    }
    console.log(fn(1,2,3));    //10
    

    III、arguments转数组

    arguments对象不是一个真正的数组 ,它类似于数组,但除了length属性和索引元素之外没有任何数组属性。例如,它没有pop方法。但是它可以被转换为一个真正的数组,转换为真实的数组后就可以使用完整的数组方法

    console.clear();
    function fn(a, b, c) {
    var arr = Array.from(arguments);  //进行转数组操作
    console.log(arr);  //输出数组
    return a + b + c;
    }
    console.log(fn(1, 2, 3)); //6
    

    3、匿名函数

     [返回]

    匿名函数顾名思义指的是没有名称的函数,在实际开发中使用的频率非常高,是学好JS的重点。

    I、变量匿名函数

    console.clear();
    var fn = function fn(a,b,c=9) {
    return a+b+c;
    }
    console.log(fn(1,2));         //12
    console.log(fn(1,2,3));       //6
    

    II、无名称匿名函数

    即在函数声明时,在后面紧跟参数。Js语法解析此函数时,里面代码立即执行。

    console.clear();
    console.log(function(a,b){return a+b;}(2,3));
    console.clear();
    //加括号执行无匿名函数(输出"Hello Word!")
    (function (){
        console.log("Hello Word!");
    })()
    //加括号执行有匿名函数(输出"Hello Word! lei.")
    (function (str){
        console.log("Hello Word!" +" "+ str +".");
    })("lei")
    

    注:函数代码function(a,b){return a+b;}没指定函数名称,如果需要执行匿名函数,在匿名函数后面加上一个括号即可立即执行!

    III、事件绑定匿名函数

    通常我们浏览网页时会通过鼠标或键盘输入信息,例如鼠标点击某个按钮称“click点击事件”、文本框内文字信息改变了称“change事件”。总之,用户所有的鼠标、键盘操作都称为事件,都可以通过JS代码来捕获这些事件。

    console.clear();
    //通过id或取图标对象
    var logo=document.querySelector("#myLogo");
        //给左上角“银河统计”图标增加点击事件
        logo.onclick=function(){
            console.log("欢迎来到银河统计工作室!");
        }
        logo.onmousemove=function(){
            logo.style.cursor="pointer";
            console.log("鼠标在图像上面!");
        }
        logo.onmouseout=function(){
            logo.style.cursor="default";
            console.log("鼠标已经离开图像!");
        }
    

    注:代码网页图像标记,<img id="myLogo" src="###"/>; 网页HTML元素事件后文中将有介绍

    IV、对象绑定匿名函数做为对象的方法

    前面我们介绍JS对象时提到,事件是有属性和方法组成的数据结构,事件的方法可以通过绑定匿名函数的方式建立。

    console.clear();
    var obj={
        name:"Carolyn",
        age:11,
        fn:function(str){
            return "My name is "+this.name+" Siyu"+". I'm "+this.age+" years old now.";
        }
    };
    console.log(obj.fn("Siyu")); //My name is Carolyn Siyu. I'm 11 years old now.
    

    注:这里定匿名函数为属性的返回值

    V、匿名函数做为回调函数(callback)

    什么是同步,什么是异步?

    同步指的是一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。

    异步指的是每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

    JS是单线程的,它本身不可能是异步的,通过回调函数可以实现异步。JS中最基础的异步是setTimeout和setInterval函数。

    console.clear();
    var interval = setInterval(function(){
        console.log("回调函数,每间隔1秒钟会被执行一次");
    },1000);
    //点击银河统计图表停止setInterval计算器运行
    var logo=document.querySelector("#myLogo");
        logo.onclick=function(){
            console.log("Stop!");
            clearInterval(interval)
        }
    setTimeout(function() {
          console.log("张三")
    }, 1000 );
    setTimeout(function() {
          console.log("李四")
    }, 2000 );
    setTimeout(function() {
          console.log("王五")
    }, 3000 );
    //jS最基础的异步实现
    function a() {
          console.log("执行a函数");
          setTimeout(function() {
                console.log("执行a函数的延迟函数");
          },2000);
    }
    function b() {
          console.log("执行b函数");
    }
    a();
    b();
    

    VI、匿名函数做为返回值

    console.clear();
    function fn(){
        return function(){
            return "Carolyn";
        }
    }
    //调用匿名函数
    console.log(fn()());  //Carolyn
    //或者
    var box=fn();
    console.log(box());   //Carolyn
    

    4、闭包和递归函数

     [返回]

    假设,函数A内部声明了个函数B,函数B引用了函数B之外的变量,并且函数A的返回值为函数B的引用,那么函数B就是闭包函数。

    递归就是函数自己调用自己,当函数自己时,其自身为闭包函数,参数为域外变量。

    console.clear();
    function funA(arg1,arg2) {
      var i = 0;  //funA作用域的变量
      function funB(step) {
        i = i + step;  //访问funB作用域外变量i
        console.log(i)
      }
      return funB;
    }
    var allShowA = funA(2, 3); //调用的是funA arg1=2,arg2=3
    allShowA(1);//调用的是funB step=1,输出 1
    allShowA(3);//调用的是funB setp=3,输出 4
    //累加
    console.clear();
    function f(num){ 
        if(num<1){ 
            return 0; 
        }else{ 
            return f(num-1)+num; 
        } 
    }
    console.log(f(9)); //45
    //阶乘
    console.clear();
    function f(num){ 
        if(num<1){ 
            return 1; 
        }else{ 
            return f(num-1)*num; 
        } 
    }
    console.log(f(4));  //24
    //在对象中定义递归方法
    var obj = {  
        num : 5,  
        fac : function (x) {  
            if (x === 1) {  
                return 1;  
            } else {  
                return x * obj.fac(x - 1);  
            }  
        }  
    }; 
    console.log(obj.fac(5))  /120
    //使用arguments.callee
    function fact(num){ 
        if (num<=1){ 
            return 1; 
        }else{ 
            return num*arguments.callee(num-1); 
        } 
    } 
    console.log(fact(4));  //24
    

    5、Promise回调函数

     [返回]

    Promise是ES6语言标准中提供的对象。Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。

    console.clear();
    //基本用法,
    var p = new Promise(function(resolve, reject){
    setTimeout(function(){
    	resolve(console.log("done"));
    	}, 1000);
    });
    //做为对象返回
    function timeout(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done');
      });
    }
    timeout(1000).then((value) => {  //参数value='done'
      console.log(value);
    });
    //完整使用方法
    function promiseTest(){
    let p = new Promise(function(resolve, reject){
    	setTimeout(function(){
    		var num = Math.random()*100; //生成1-100的随机数
    		console.log('随机数生成的值:',num)
    		if(num>=60){
    			resolve(num);
    		} else {
    			reject('数字太于60了即将执行失败回调');
    		}
    	}, 2000);
       })
       return p
    }
    promiseTest().then(
    	function(data){  //data = num
    		console.log('resolved成功回调');
    		console.log('成功回调接受的值:',data);
    	}
    )
    .catch(function(reason, data){
    	console.log('catch到rejected失败回调');
    	console.log('catch失败执行回调抛出失败原因:',reason);
    });
    

    本文介绍了JS函数的各种用法,结合JS数组、对象以及后面将要介绍的JS条件和循环技术,JS函数在处理统计数据过程中将变得无所不能!

    提示:本页中JS脚本代码可复制粘贴到JS代码运行窗口调试体验; 文本编辑快捷键:Ctrl+A - 全选;Ctrl+C - 复制; Ctrl+X - 剪切;Ctrl+V - 粘贴

  • 相关阅读:
    CUP的MESI协议
    synchronized 锁的升级
    BigDecimal/Long 前后端交互失去精度解决办法
    nested exception is java.lang.NoClassDefFoundError: Could not initialize class org.springframework.http.converter.json.MappingJackson2HttpMessageConverter
    根据文件原始名称,文件根路径按照日期生成存储路径
    异步处理MultipartFile -- No such file or directory
    select下拉框相关操作(更新中。。。)
    input清空和重置select下拉框
    sql多字段分组排序显示全部数据
    ajax发送请求下载字节流形式的excel文件
  • 原文地址:https://www.cnblogs.com/cloudtj/p/12912494.html
Copyright © 2020-2023  润新知