ES6函数的扩展

93 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

路难行,行路难,一身汗水,满心长。脚下百里路,头顶艳阳天。坚定如磐石,信念似火烧。好男儿,人穷志不缺,天道也酬勤。四方走,走四方,一身是胆,豪气壮。前方坎坷途,千难万般阻。心若有明灯,身似般若行。好男儿,大志存高远,四海皆为家。

函数参数指定默认值

ECMAScript 5的标准中是不允许对函数的参数设置其默认值的。如果定义了形参,而不传递实参时,导致形参的值为undefined。

当然,也可以通过变通的方式来实现默认值的功能。

function fn(arg){
 arg = arg || 0;
 console.log(arg);// 0
}
fn();
​

ECMAScript 6的标准新增了对函数的参数设置其默认值的内容。

function fn(arg = 0}{
 console.log(arg);//0
}
fn();

与解耦赋值配合使用

函数的参数同样可以通过解耦赋值进行操作,而解耦赋值也具有默认值的功能。两者可以结合在一起使用。

function fn([a, b = O]){
 console.log(a, b);// 10
}
fn([1]);

函数参数的作用域

如果为函数的参数设置默认值的话,当函数声明进行初始化时,参数会形成一个独立的作用域。这个作用域会在函数初始化完毕时消失。

let x =1;
function f(y = x){
  let x= 2;
  console.log(y);
}
f();//1

54oAtP.png

rest参数

ECMAScript 6新增了 rest 参数(…变量名),用于获取函数多余的参数,替代 argurnents 对象。与 rest 参数配合的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values){
  let sum = 0;
  for (var val of values){
    sum += val;
    return sum;
  }
}
console.log(add(2,5.3);//10

值得注意的是:

  • rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
  • 函数的 length 属性,不包含 rest 参数。

箭头函数是什么

ECMAScript 6新增了箭头函数(又称胖箭头函数),相比函数表达式具有较短的语法井以词法的方式绑定 this。箭头函数总是匿名的。

var f=()=> 5;
//等同于
var f = function () { return 5 };
var sum = (num1, num2) =>num1 + num2;
//等同于
var sum = function(num1, num2){
 return num1 + num2;
};

有两个因素会影响引人箭头函数:更简洁的函数和 this。

箭头函数的语法结构

基本语法结构

(参数1,参数2,...,参数N)=>{函数声明}
(参数1,参数2,.....参数N)=>表达式(单一)
//相当于:(参数1,参数2,.....参数N)=>{return表达式;}//当只有一个参数时,圆括号是可选的:
(单一参数)=>{函数声明}
单一参数=>{函数声明}
//没有参数的函数应该写成一对圆括号。
()=>{函数声明}

高级语法结构

//支持剩余参数和默认参数
(参数1,参数2, ...rest)=>{函数声明}
(参数1=默认值1,参数2,...,参数N=默认值N)=>{函数声明}

箭头函数的注意事项

使用箭头函数时,需要注意以下几点:

  • 函数体内的 this,就是定义时所在的对象,而不是使用时所在的对象。
function foo(){
setTimeout(()=>{
  console.log("id:", this.id);
 },100);
}
var id = 21;
foo.call({ id: 42 });// id: 42
  • 不可以当作构造函数。也就是说不可以使用 new 命令,否则会抛出一个错误。
  • 不可以使用 argurments 对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。