ES6学习总结(二)

关于ES6的学习总结,昨天写了第一篇,主要是关于变量声明关键字let和const,新增类型Symbol以及模板字符串,今天准备写第二篇,ES6里面的函数部分,ES6新增了箭头函数,Rest参数以及参数默认值。

箭头函数

关于箭头函数,之所以这么称呼,是因为它就是由一个箭头来定义的,例如:

//ES5
function foo(param){
    return param*param;
}
//ES6 箭头函数
var foo= param => param*param;

上面的代码简单比较了ES5中普通函数与ES6箭头函数的的写法,很明显的可以看出,箭头函数显得更加的简便,箭头函数中,有一些需要注意的地方:

返回值必须明确,并且在大括弧内必须加上return关键字,若是省略大括弧,则可以省略return

//返回值的写法,下面两种是一样的
() => "hello world";
() => { return "hello word"; }

当参数的数目不止一个或者没有的时候,需要用小括弧()包裹

//没有参数或者多个参数需要加小括号 
var foo1 = () => "hello world";
var foo1 = () => { return "hello word"; }
var foo2 = (param1,param2) => param1*param2;

当返回的是一个对象的时候,需要注意大括弧外面加上()

//返回对象需要函数体外面要加小括号
var foo3 = param => ({key: value})

箭头函数中this的使用跟普通函数也不一样,在JavaScript的普通函数中,都会有一个自己的this值,主要分为:

  1. 函数作为全局函数被调用时,this指向全局对象

  2. 函数作为对象中的方法被调用时,this指向该对象

  3. 函数作为构造函数的时候,this指向构造函数new出来的新对象

  4. 还可以通过call,apply,bind改变this的指向

在箭头函数中,this属于词法作用域,直接由上下文确定,对于普通函数中指向不定的this,箭头函数中处理this无疑更加简单,如下:

//ES5普通函数
function Man(){
  this.age=22;
  return function(){
    this.age+1;
  }
}
var cala=new Man();
console.log(cala())//undefined

//ES6箭头函数
function Man(){
  this.age=22;
  return () => this.age+1;
}
var cala=new Man();
console.log(cala())//23

箭头函数中没有arguments(我们可以用rest参数替代),也没有原型,也不能使用new 关键字,例如:

//没有arguments
var foo=(a,b)=>{return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined

//没有原型
var Obj = () => {};
console.log(Obj.prototype); 
// undefined

//不能使用new 关键字
var Obj = () => {"hello world"};
var o = new Obj(); 
// TypeError: Obj is not a constructor

Rest参数

Rest参数名为剩余参数,以…为前缀,上面讲过,ES6的箭头函数中不能使用arguments,我们可以用rest参数来替代,例如:

function foo(){
  return arguments.length;
}
console.log(foo(1,2,3)) // 3

var foo= (...rest) => {
  return rest.length;
}
console.log(foo(1,2,3)) // 3

在rest参数前面若是有其他的形式参数,那么rest参数只能放在最后面:

var foo = (param1,param2,...rest) => {
    return param1 + param2 + rest.length;
};
console.log(foo(1,2,3,4,5)) // 6

var foo = (param1,...rest,param2) => {
    return param1 + param2 + rest.length;
};
console.log(foo(1,2,3,4,5)) //  Rest parameter must be last formal parameter

默认参数值

在ES6以前,函数调用时,那些没有传递的参数,JavaScript默认为undefined,ES6中新增了参数默认值,允许使用默认值来初始化形参

var foo = (param1,param2=10) => {
  return param1*param2;
}
console.log(foo(10)) // 100

上面这个例子可以看到,定义了一个参数相乘的简单函数,在调用函数的时候,只传入了第一个参数的值,结果返回100,是因为在函数中第二个参数默认值为10,若我们在调用函数的时候没有显式的指明参数值,则会默认使用参数默认值。

var foo = (param1,param2=10) => {
  return param1*param2;
}
console.log(foo(10,20)) // 200

这次我们在调用函数大的时候,两个参数全部传递了值,因此返回200。

    原文作者:三井寿
    原文地址: https://segmentfault.com/a/1190000010645256
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞