Vue进阶（十九）： ES6 箭头函数_vue围绕箭头体的意外块语句；将返回值括起来,并将其紧接在‘ =&gt； ‘后面。

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

  return a +b;

}

函数体内的语句大于一条的话，使用一个大括号将其括起来，并使用`return`语句返回。

var sum = (a, b) => { return a+b; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象时，必须在对象外面加一个大括号。

var getFunction = id => ({id: id, anme: “Temp”});

箭头函数也可以与变量解构结合使用：

const full = ({first, last}) => first + “” + last;

等同于

function full(person) {

return person.first +”  "+ person.last;

}

使用箭头函数可以让函数表达更加简洁。


箭头函数的一个用处是简化回调函数。

[1,2,3].map(function(x){

return xx;

});

使用箭头函数的写法

[1,2,3].map(x => xx);

另一个例子

var result = values.sort(function(a, b){

return a -b;

});

箭头函数写法：

var result = values.sort((a, b) => a-b);

使用`rest`参数与箭头函数结合的例子：

const numbers = (…nums) => nums;

numbers(1,2,3,4,5,6,7,8,9); //[1,2,3,4,5,6,7,8,9]

//…nums 表示的是一个数组

const headAndTail = ( head, …tail) => [head, tail];

headAndTail(1,2,3,4,5,6,7,8,9);// [1, [2,3,4,5,6,7,8,9]]

### 二、注意事项


使用箭头函数注意以下几点：



> 
> 1. 函数体内的`this`对象就是定义时所在的对象，而不是使用时所在对象；
> 2. 不可以当作构造函数使用，也就是不能用`new`命令实例化一个对象，否则会抛出一个错误；
> 3. 不可以使用`arguments`对象，该对象在函数体内不存在，如果要用的话，可以用`rest`参数代替；
> 4. 不可以使用`yield`命令，箭头函数不能用作`Generator`函数；
> 
> 
> 


### 三、拓展阅读


* 《[Vue进阶（二十一）：vue项目开发前 ES6 知识储备](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》






### 基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

##### 网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/23c8f589732042b407bf6aa51c6b8928.webp?x-oss-process=image/format,png)


CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

![](https://img-blog.csdnimg.cn/img_convert/03a5386c09b3e02cc7592e9af0252149.webp?x-oss-process=image/format,png)


##### 动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

![](https://img-blog.csdnimg.cn/img_convert/0ba7a0c7fbc5e1cf82f14278d1f386f6.webp?x-oss-process=image/format,png)

511338)]


##### 动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中...(img-kefYMG8a-1715841511338)]