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 相关文章推荐
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
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
大师制作的中短波矿石收音机
2020/04/02 无线电
php&amp;mysql 日期操作小记
2012/02/27 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
js中的面向对象入门
2017/03/06 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
大学生自我鉴定
2013/12/08 职场文书
小学生期末评语
2014/04/21 职场文书
公司节能减排方案
2014/05/16 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
ipad隐藏软件app图标方法
2022/04/19 数码科技