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 相关文章推荐
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
JS打印组合功能
Aug 04 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
Vue如何实现组件间通信
May 15 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
详解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
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
超级退弹代码
2008/07/07 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python属性和内建属性实例解析
2020/01/14 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
Html5新标签解释及用法
2012/02/17 HTML / CSS
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
表彰大会新闻稿
2015/07/17 职场文书
python如何在word中存储本地图片
2021/04/07 Python
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
关于MySQL中的 like操作符详情
2021/11/17 MySQL