ES6学习总结（二）

microelec 发布于2019-08-21 11:54 / 730人阅读

摘要：关于的学习总结昨天写了第一篇，主要是关于变量声明关键字和，新增类型以及模板字符串，今天准备写第二篇，里面的函数部分，新增了箭头函数，参数以及参数默认值。，这次我们在调用函数大的时候，两个参数全部传递了值，因此返回。

关于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值，主要分为：

函数作为全局函数被调用时，this指向全局对象

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

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

还可以通过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。

GPU云服务器云服务器机器学习学习总结机器学习总结 javascript学习总结机器学习培训总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87265.html

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
ES6解构赋值学习总结

摘要：提供了解构赋值的方式，这样子在赋值多个变量或者进行注释时可以方便很多，不同场景下也有很多新的应用，个人常使用的有数组的解构赋值，对象的解构赋值和函数参数的解构赋值，函数参数的解构赋值之前总结过，这里写下数组的和对象的简单总结吧函数参数的解构 ES6提供了解构赋值的方式，这样子在赋值多个变量或者进行注释时可以方便很多，不同场景下也有很多新的应用，个人常使用的有数组的解构赋值，对象的解构赋...

levinit 2019-08-23 13:59 评论0 收藏0
2018年腾讯前端二面总结（面向2019届学生）

摘要：前言很认真的说吧，在和腾讯面试官的面试的过程。腾讯二面自我介绍二面的面试官和一面不是同一个面试官，所以在这个时候，我的基本介绍还是和一面一样，介绍自己的基本信息，以及怎么想到学习前端和怎么学习前端。前言很认真的说吧，在和腾讯面试官的面试的过程。有点感觉是在聊天一样，他们是面试官，但是感觉更像是引路人，不管结果的好坏，在腾讯面试的过程，只要你认真去听去问，就可以学到很多东西吧。如果...

gself 2019-08-26 11:49 评论0 收藏0
ES6系统学习----对比var，let

摘要：对于，虽然之前也有过学习，但总的来说还是不够系统的，知识点非常的零碎。因此包括以为基础产生的语法糖在逐渐的趋近于强类型的语言。是创建，而不是的覆盖。因而称之为富一代。所以语法标准的更新将对良好编程习惯有着极大的利好。对于ES6，虽然之前也有过学习，但总的来说还是不够系统的，知识点非常的零碎。现在结合之前遇到的问题把ES6中的知识点总结一下。最初接触ES6时，明白ES5中声明变量的方式...

ls0609 2019-08-23 15:07 评论0 收藏0