JavaScript定义函数_动力节点Java学院整理


Posted in Javascript onJune 27, 2017

在JavaScript中,定义函数的方式如下:

function abs(x) {
 if (x >= 0) {
  return x;
 } else {
  return -x;
 }
}

上述abs()函数的定义如下:

  • function指出这是一个函数定义;
  • abs是函数的名称;
  • (x)括号内列出函数的参数,多个参数以,分隔;
  • { ... }之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。

请注意,函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回。因此,函数内部通过条件判断和循环可以实现非常复杂的逻辑。

如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined。

由于JavaScript的函数也是一个对象,上述定义的abs()函数实际上是一个函数对象,而函数名abs可以视为指向该函数的变量。

因此,第二种定义函数的方式如下:

var abs = function (x) {
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
};

在这种方式下,function (x) { ... }是一个匿名函数,它没有函数名。但是,这个匿名函数赋值给了变量abs,所以,通过变量abs就可以调用该函数。

上述两种定义完全等价,注意第二种方式按照完整语法需要在函数体末尾加一个;,表示赋值语句结束。

调用函数

调用函数时,按顺序传入参数即可:

abs(10); // 返回10
abs(-9); // 返回9

由于JavaScript允许传入任意个参数而不影响调用,因此传入的参数比定义的参数多也没有问题,虽然函数内部并不需要这些参数:

abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

传入的参数比定义的少也没有问题:

abs(); // 返回NaN

此时abs(x)函数的参数x将收到undefined,计算结果为NaN。

要避免收到undefined,可以对参数进行检查:

function abs(x) {
  if (typeof x !== 'number') {
    throw 'Not a number';
  }
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
}

arguments

JavaScript还有一个免费赠送的关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array:

function foo(x) {
  alert(x); // 10
  for (var i=0; i<arguments.length; i++) {
    alert(arguments[i]); // 10, 20, 30
  }
}
foo(10, 20, 30);

利用arguments,你可以获得调用者传入的所有参数。也就是说,即使函数不定义任何参数,还是可以拿到参数的值:

function abs() {
  if (arguments.length === 0) {
    return 0;
  }
  var x = arguments[0];
  return x >= 0 ? x : -x;
}
abs(); // 0
abs(10); // 10
abs(-9); // 9

实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法:

// foo(a[, b], c)
// 接收2~3个参数,b是可选参数,如果只传2个参数,b默认为null:
function foo(a, b, c) {
  if (arguments.length === 2) {
    // 实际拿到的参数是a和b,c为undefined
    c = b; // 把b赋给c
    b = null; // b变为默认值
  }
  // ...
}

要把中间的参数b变为“可选”参数,就只能通过arguments判断,然后重新调整参数并赋值。

rest参数

由于JavaScript函数允许接收任意个参数,于是我们就不得不用arguments来获取所有参数:

function foo(a, b) {
  var i, rest = [];
  if (arguments.length > 2) {
    for (i = 2; i<arguments.length; i++) {
      rest.push(arguments[i]);
    }
  }
  console.log('a = ' + a);
  console.log('b = ' + b);
  console.log(rest);
}

为了获取除了已定义参数a、b之外的参数,我们不得不用arguments,并且循环要从索引2开始以便排除前两个参数,这种写法很别扭,只是为了获得额外的rest参数,有没有更好的方法?

ES6标准引入了rest参数,上面的函数可以改写为:

function foo(a, b, ...rest) {
  console.log('a = ' + a);
  console.log('b = ' + b);
  console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

rest参数只能写在最后,前面用...标识,从运行结果可知,传入的参数先绑定a、b,多余的参数以数组形式交给变量rest,所以,不再需要arguments我们就获取了全部参数。

如果传入的参数连正常定义的参数都没填满,也不要紧,rest参数会接收一个空数组(注意不是undefined)。

因为rest参数是ES6新标准,所以你需要测试一下浏览器是否支持。请用rest参数编写一个sum()函数,接收任意个参数并返回它们的和:

窗体顶端

'use strict';
// 测试:
var i, args = [];
for (i=1; i<=100; i++) {
  args.push(i);
}
if (sum() !== 0) {
  alert('测试失败: sum() = ' + sum());
} else if (sum(1) !== 1) {
  alert('测试失败: sum(1) = ' + sum(1));
} else if (sum(2, 3) !== 5) {
  alert('测试失败: sum(2, 3) = ' + sum(2, 3));
} else if (sum.apply(null, args) !== 5050) {
  alert('测试失败: sum(1, 2, 3, ..., 100) = ' + sum.apply(null, args));
} else {
  alert('测试通过!');
}

小心你的return语句

前面我们讲到了JavaScript引擎有一个在行末自动添加分号的机制,这可能让你栽到return语句的一个大坑:

function foo() {
  return { name: 'foo' };
}
foo(); // { name: 'foo' }

如果把return语句拆成两行:

function foo() {
  return
    { name: 'foo' };
}
foo(); // undefined

要小心了,由于JavaScript引擎在行末自动添加分号的机制,上面的代码实际上变成了:

function foo() {
  return; // 自动添加了分号,相当于return undefined;
    { name: 'foo' }; // 这行语句已经没法执行到了
}

所以正确的多行写法是:

function foo() {
  return { // 这里不会自动加分号,因为{表示语句尚未结束
    name: 'foo'
  };
}

练习

定义一个计算圆面积的函数area_of_circle(),它有两个参数:

r: 表示圆的半径;

pi: 表示π的值,如果不传,则默认3.14

Javascript 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
JavaScript门道之标准库
May 26 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
Vue调用后端java接口的实例代码
Oct 28 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
详解vue项目构建与实战
Jun 27 #Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 #Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 #Javascript
微信小程序商品到详情的实现
Jun 27 #Javascript
微信小程序的分类页面制作
Jun 27 #Javascript
JS实现批量上传文件并显示进度功能
Jun 27 #Javascript
angular过滤器实现排序功能
Jun 27 #Javascript
You might like
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
自制PHP框架之设计模式
2017/05/07 PHP
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python中的单继承与多继承实例分析
2018/05/10 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python文件和文件夹复制函数
2020/02/07 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python实现五子棋程序
2020/04/24 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
工伤事故赔偿协议书
2014/04/15 职场文书
幼师求职自荐信
2014/05/31 职场文书
营销计划书
2015/01/17 职场文书
经营目标责任书
2015/05/08 职场文书
车位出租协议书范本
2016/03/19 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS