zoukankan      html  css  js  c++  java
  • 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 - 粘贴

  • 相关阅读:
    Bit Manipulation
    218. The Skyline Problem
    Template : Two Pointers & Hash -> String process
    239. Sliding Window Maximum
    159. Longest Substring with At Most Two Distinct Characters
    3. Longest Substring Without Repeating Characters
    137. Single Number II
    142. Linked List Cycle II
    41. First Missing Positive
    260. Single Number III
  • 原文地址:https://www.cnblogs.com/cloudtj/p/12912494.html
Copyright © 2011-2022 走看看