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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP关联链接常用代码
2012/11/05 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
php封装的smarty类完整实例
2016/10/19 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
tensorflow的计算图总结
2020/01/12 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
Linux内核产生并发的原因
2012/07/13 面试题
教师职称自我鉴定
2014/02/12 职场文书
房产转让协议书
2014/04/11 职场文书
综合内勤岗位职责
2014/04/14 职场文书
2014年冬季防火方案
2014/05/21 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
小学校长个人总结
2015/03/03 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书