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实现表单复选框的全选功能
May 25 Javascript
奇妙的js
Sep 24 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 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
php gzip压缩输出的实现方法
2013/04/27 PHP
php实现删除空目录的方法
2015/03/16 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP中header用法小结
2016/05/23 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
客户端静态页面玩分页
2006/06/26 Javascript
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python 多线程的实例详解
2017/09/07 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python序列类型种类详解
2020/02/26 Python
python属于解释型语言么
2020/06/15 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
校园标语大全
2014/06/19 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
秋季运动会加油词
2015/07/18 职场文书
新人入职感言
2015/07/31 职场文书