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 相关文章推荐
JavaScript 序列化对象实现代码
Dec 18 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
layui动态表头的实现代码
Aug 22 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
详解JavaScript 的执行机制
Sep 18 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
Zerg兵种介绍
2020/03/14 星际争霸
PHP 数组遍历顺序理解
2009/09/09 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP children()函数讲解
2019/02/03 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python 全文检索引擎详解
2017/04/25 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
社团文化节邀请函
2014/01/10 职场文书
就业协议书范本
2014/04/11 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2015年推普周活动总结
2015/03/27 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技