在浏览器中运用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
//代码容错更好 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")
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("鼠标已经离开图像!"); }
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 - 粘贴