ES6新特性之函数的扩展实例详解


Posted in Javascript onApril 01, 2017

本文实例讲述了ES6新特性之函数的扩展。分享给大家供大家参考,具体如下:

一、函数参数默认值

1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

这种写法有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本在对外接口中,彻底拿掉这个参数,也不会导致以前的代码无法运行。

参数变量是默认声明的,所以不能用let或const再次声明。否则会报错。

2. 参数默认值可以与解构赋值的默认值,结合起来使用。

function foo({x, y = 5}) {
  console.log(x, y);
}
foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined

通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。

指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

二、rest参数

ES6引入rest参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

上面代码的add函数是一个求和函数,利用rest参数,可以向该函数传入任意数目的参数。

注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。

函数的length属性,不包括rest参数。

三、扩展运算符

扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

四、箭头函数

ES6允许使用“箭头”(=>)定义函数。箭头函数前面是输入,后面是输出。inputs => outputs

var f = v => v;
//上面的箭头函数等同于:
var f = function(v) {
 return v;
};

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
 return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }
//由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
var getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
 return person.first + ' ' + person.last;
}

箭头函数的一个用处是简化回调函数。

// 正常函数写法
[1,2,3].map(function (x) {
 return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);

下面是rest参数与箭头函数结合的例子。

const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。

五、函数参数的尾逗号

ECMAScript 2017将函数的最后一个参数有尾逗号(trailing comma)。

此前,函数定义和调用时,都不允许最后一个参数后面出现逗号。

function clownsEverywhere(
  param1,
  param2
) { /* ... */ }

上面代码中,如果在param2或bar后面加一个逗号,就会报错。

这样的话,如果以后修改代码,想为函数clownsEverywhere添加第三个参数,就势必要在第二个参数后面添加一个逗号。这对版本管理系统来说,就会显示,添加逗号的那一行也发生了变动。这看上去有点冗余,因此新的语法允许定义和调用时,尾部直接有一个逗号。

function clownsEverywhere(
  param1,
  param2,
) { /* ... */ }

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
Prototype中dom对象方法汇总
Sep 17 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
js运动应用实例解析
Dec 28 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
vue-cli的webpack模板项目配置文件分析
Apr 01 #Javascript
ES6新特性之模块Module用法详解
Apr 01 #Javascript
Vue.js实战之组件之间的数据传递
Apr 01 #Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 #Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
前端自动化开发之Node.js的环境搭建教程
Apr 01 #Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 #Javascript
You might like
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php校验公钥是否可用的实例方法
2019/09/17 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python实现名片管理系统
2018/11/29 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python读写csv文件的方法
2019/08/13 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
什么是类的返射机制
2016/02/06 面试题
怎么写有吸引力的自荐信
2013/11/17 职场文书
关于安全演讲稿
2014/05/09 职场文书