ES6对函数做了哪些扩展?

简介: 本文首发于微信公众号“前端徐徐”,介绍了 ES6 中函数参数的默认值、rest 参数、严格模式、name 属性、箭头函数、尾调用优化等新特性,并详细解释了各个特性的使用方法和注意事项。同时,还介绍了 ES2017 和 ES2019 中关于函数的一些改进,如函数参数尾逗号、`Function.prototype.toString()` 方法的修改以及 `catch` 语句参数的省略。

本文首发微信公众号:前端徐徐。

函数参数的默认值

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

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

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

⚠️注意事项:

  1. rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
// 报错
function f(a, ...b, c) {}
  1. 函数的length属性,不包括 rest 参数。
(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

严格模式

ES2016规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。

// 报错
function doSomething(a, b = a) {
  'use strict';
  // code
}
// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};
// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};

name属性

函数的name属性,返回该函数的函数名。这个属性早就被浏览器广泛支持,但是直到 ES6,才将其写入了标准。

⚠️注意事项:

  1. 如果将一个匿名函数赋值给一个变量,ES5 的name属性,会返回空字符串,而 ES6 的name属性会返回实际的函数名。
var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"
  1. 如果将一个具名函数赋值给一个变量,则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。
const bar = function baz() {};
// ES5
bar.name // "baz"
// ES6
bar.name // "baz"
  1. Function构造函数返回的函数实例,name属性的值为anonymous
(new Function).name // "anonymous"
  1. bind返回的函数,name属性值会加上bound前缀。
function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "

箭头函数

ES6 允许使用“箭头”(=>)定义函数。

var f = v => v;
// 等同于
var f = function (v) {
  return v;
};

⚠️注意事项:

  1. 箭头函数没有自己的this对象。箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象。
var name = 'window'; 
var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}
A.sayHello();// window
var B = {
   name: 'B',
   sayHello: function () {
      console.log(this.name)
   }
}
B.sayHello(); // B
  1. 不可以当作构造函数,也就是说,不可以对箭头函数使用new命令,否则会抛出一个错误。
  2. 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
  3. 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

尾调用优化

ES6 引入了尾调用优化的概念,当函数的最后一步是调用另一个函数时,可以进行优化,避免额外的函数调用栈的增长。

修改

函数参数尾逗号

ES2017 允许函数的最后一个参数有尾逗号(trailing comma)。

function sampleFn(
  sample1,
  sample2,
  sample3, // 可以在最后一个参数后面加 逗号 ','
) {}

Function.prototype.toString()

ES2019 对函数实例的toString()方法做出了修改。toString()方法返回函数代码本身,以前会省略注释和空格。

function /* foo comment */ foo () {}
foo.toString()
// "function /* foo comment */ foo () {}"

catch 命令的参数省略

ES2019 改变了catch语句后面必须携带参数的要求。允许catch语句省略参数。

try {
  // ...
} catch { // 不带参数
  // ...
}
相关文章
|
6月前
|
JSON 自然语言处理 JavaScript
ES6 字符串的扩展
ES6 字符串的扩展
|
自然语言处理 JavaScript 前端开发
ES6(字符串的扩展)
ES6(字符串的扩展)
93 0
|
6月前
|
网络架构
ES6函数新增了哪些扩展?
ES6函数新增了哪些扩展?
59 0
|
11月前
|
网络架构
ES6学习(六)—函数的扩展
ES6学习(六)—函数的扩展
|
11月前
|
网络架构
ES6学习(五)—数组的扩展
ES6学习(五)—数组的扩展
|
网络架构
ES6中函数新增了哪些扩展?
ES6允许为函数的参数设置默认值
|
JSON JavaScript 前端开发
ES6特性总结
ES6特性总结
154 6
ES6特性总结
|
索引
ES5方法扩展
ES5中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括: 数组方法 字符串方法 对象方法
105 0