ES6中函数新增的方式方法
Posted baiyunke
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6中函数新增的方式方法相关的知识,希望对你有一定的参考价值。
绪 言
ES6
大家对javascript中的函数都不陌生。今天我就为大家带来ES6中关于函数的一些扩展方式和方法。
1.1函数形参的默认值
ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。如下代码:
function func(x,y){ y = y || "tom"; console.log(x,y); } func("hello"); //hello tom func("hello","woeld"); //hello woeld func("hello",""); //hello tom
function func(x,y){ if(typeof y === "undefined"){ y = y || "tom"; } console.log(x,y); } func("hello"); //hello tom func("hello","woeld"); //hello woeld func("hello",""); //hello
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。如下代码:
function func(x,y="tom"){ console.log(x,y); } func("hello"); //hello tom func("hello","woeld"); //hello woeld func("hello",""); //hello
ES6 的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本在对外接口中,彻底拿掉这个参数,也不会导致以前的代码无法运行。
function func({x,y=3}){ console.log(x,y); } func({}); //undefined 3 func({x:1}); //1 3 func({x:1,y:2}); //1 2 func(); //Uncaught TypeError: Cannot destructure property `x` of ‘undefined‘ or ‘null‘.
上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数func的参数是一个对象时,变量x
和y
才会通过解构赋值生成。如果函数func
调用时没提供参数,变量x
和y
就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。
如果没有提供参数,函数func
的参数默认为一个空对象。
function func(x,y=2,z){ console.log(x,y,z); } func(); //undefined 2 undefined func(1); //1 2 undefined func(1, ,3); //Uncaught SyntaxError: Unexpected token func(1,undefined,3);//1 2 3
func(1,null,3); //1 null 3
上面代码中,有默认值的参数都不是尾参数。这时,无法只省略该参数,而不省略它后面的参数,除非显式输入undefined
。
如果传入undefined
,将触发该参数等于默认值,null
则没有这个效果。
length
指定了默认值以后,函数的length
属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length
属性将失真。
作用域
一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。
1.2rest参数
ES6 引入 rest 参数(形式为...变量名
),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。如下代码:
function add(...values) { var sum = 0; for (var val of values) { sum += val; } console.log(sum); } add(2, 5, 3) // 10
上面代码的add
函数是一个求和函数,利用 rest 参数,可以向该函数传入任意数目的参数。
rest 就是一个真正的数组,数组特有的方法都可以使用
注意,rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
1.3name属性
函数的name
属性,返回该函数的函数名。如下代码:
var a = function func(){}; console.log(a.name); //func var b = function(){}; console.log(b.name); //b
1.4箭头函数
ES6 允许使用“箭头”(=>
)定义函数。如下代码:
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 full = ({ first, last }) => first + ‘ ‘ + last; // 等同于 function full(person) { return person.first + ‘ ‘ + person.last; }
箭头函数使得表达更加简洁。如下代码:
var isEven = n => n % 2 == 0;
var square = n => n * n;
注意事项:
(1)函数体内的this
对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new
命令,否则会抛出一个错误。
(3)不可以使用arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield
命令,因此箭头函数不能用作 Generator 函数。
this
对象的指向是可变的,但是在箭头函数中,它是固定的。
1.5绑定this
箭头函数可以绑定this
对象,大大减少了显式绑定this
对象的写法(call
、apply
、bind
)。但是,箭头函数并不适用于所有场合,所以现在有一个提案,提出了“函数绑定”(function bind)运算符,用来取代call
、apply
、bind
调用。
函数绑定运算符是并排的两个冒号(::
),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this
对象),绑定到右边的函数上面。如下代码:
foo::bar; // 等同于 bar.bind(foo); foo::bar(...arguments); // 等同于 bar.apply(foo, arguments);
1.7尾调用
尾调用(Tail Call)是函数式编程的一个重要概念,是指某个函数的最后一步是调用另一个函数。如下代码:
function f(x){ return g(x); }
尾调用不一定出现在函数尾部,只要是最后一步操作即可。下面代码中,函数m
和n
都属于尾调用,因为它们都是函数f
的最后一步操作。
function f(x) { if (x > 0) { return m(x) } return n(x); }
以上是关于ES6中函数新增的方式方法的主要内容,如果未能解决你的问题,请参考以下文章