小白学JavaScript箭头函数踩坑总结你遇到了吗

几天我在学习JS基础知识的时候也接触了一些函数，大概知道函数的作用是干什么的，但是具体细节的话，和一些重点的知识还是不太明白，今天重点研究一下函数的相关知识。

一、认识JavaScript函数

JavaScript函数是用来执行特定的代码块的，仅仅在调用它的时候才会执行里面的代码。

语法：

JavaScript通过function关键字定义一个函数，后面跟上函数名和一对英文状态下的括号()，函数名的命名规则跟变量命名规则相同。括号里面可以放置参数，也可以什么也不放。

(参数1,参数2,参数3,...)

需要执行的代码块放置在{}中，所以一个完整的函数应该是下面这个样子的：

function name(arg1, arg2, arg3) {
    // 执行的代码块
}

其中圆括号里的参数有个名字叫：形参

函数的调用:

函数名称 + () 即可调用函数，例如调用上述函数：

// 调用函数
name(1, 2, 3);

为什么要使用函数呢？

因为函数可以使我们复用某些代码块，只需定义一次，就能重复使用N次，可以避免了写一些重复代码。

实例：

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

如果说在调用函数的时候不加()，是什么情况呢？我把结果打印了一下：

document.body.innerHTML=sum;

结果：

上面的结果说明如果在调用函数的时候不加圆括号，返回的结果是函数本身。

二、ES6箭头函数

箭头函数类似于匿名函数，它简化了函数的定义。

匿名函数：

let demo=function () {
    return ['20200102', '手机', 'MI 11 Pro', '3999'];
}

将函数名放入一个变量中，然后再使用这个变量去调用匿名函数：

document.body.innerHTML=demo(); // 20200102,手机,MI 11 Pro,3999

上述匿名函数如果使用箭头函数简化，：

let demo=()=> {
    return ['20200102', '手机', 'MI 11 Pro', '3999'];
}

二者结果都是一样的。

上述的箭头函数只有一条返回语句，所以可以省略大括号，简写成下面的格式：

let demo=()=> ['20200102', '手机', 'MI 11 Pro', '3999'];

以上是在箭头函数没有参数的情况下的书写方法，如果带有参数的呢该怎么写呢？

带一个参数

let demo=x=> x * 2;
console.log(demo(2)); // 4

一个以上的参数

let demo=(x, y)=> x * x + y * y;
console.log(demo(2, 3)); // 13

以上的案例都是函数体只有一条语句时的场景，如果函数体有多条语句，应该这样写：

let demo=x=> {
    if (x % 2==0) {
        console.log("偶数");
    } else {
        console.log("奇数");
    }
}
console.log(demo(3)); // 奇数

根据以上案例，我做了一个总结：

1.可以省略圆括号的场景：

只有一个参数。

2.不能省略圆括号的场景：

没有参数；
参数个数在1个以上。

3.大括号可以省略的场景：

只有一条语句。

4.大括号不可省略的场景：

有多条语句。

这里面有一点需要值得注意的是，如果我们返回的是一个对象，如果这么写就会报错，例如：

// 这是一个错误方法
(x, y)=> {x: 1, y: 2};

那么这个错误如何解决呢？需要在对象外面再包裹一层圆括号即可：

// 这才是正确方法
(x, y)=> ({x: 1, y: 2});

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

函数体内的this指向在箭头函数中是固定的；
不可以作为构造函数使用，即：不能使用new命令，否则会抛出错误；
不可使用arguments对象，因为函数体内不存在该对象；
不能使用yield命令，因此，也不能作为Generator函数使用。

以上4点注意事项，是我在资料书中看到的总结，其中1、3这两条我倒是知道，至于2、4我还没有学到并不太清楚这个是什么意思，等以后学到了应该就理解了，如果有大佬知道的话还请不吝赐教。

角形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>三角形</title>
<style type="text/css">
body{
    background-color: pink;
}
div{
    width: 0px;
    height: 0px;
    border-top: 10px solid blue;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    /* 唰(忽略不计) */
    /* border-width: 10px;
    border-style: solid;
    border-color: green orange blue pink; */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

箭头

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#bigBox{
    width: 0;
    height: 0;
    border-top: 200px solid black;
    border-right: 200px solid transparent;
    border-bottom: 200px solid transparent;
    border-left: 200px solid transparent;
}
#smallBox{
    width: 0;
    height: 0;
    border-top: 160px solid white;
    border-right: 160px solid transparent;
    border-bottom: 160px solid transparent;
    border-left: 160px solid transparent;
    position: absolute;
    left: 40px;
    top: 0;
}
</style>
</head>
<body>
<div id="bigBox"></div>
<div id="smallBox"></div>
</body>
</html>

三角形使用案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 40px;
    cursor: pointer;
}
ul{
    width: 200px;
    margin: 0 auto;
    border: 1px solid #000;
}
h3{
    text-indent: 1em;
    background-color: dodgerblue;
    position: relative;
}
h3:before{
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #000;
    position: absolute;
    left: 5px;
    top: 12px;
}
h3.active:before{
    border-top: 8px solid #000;
    border-left: 8px solid transparent;
    left: 0px;
    top: 15px;
}
</style>
</head>
<body>
<ul>
<li>
<h3>我的好友</h3>

</li>
<li>
<h3 class="active">企业好友</h3>

</li>
<li>
<h3>黑名单</h3>

</li>
</ul>
</body>
</html>

制作箭头

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#bigBox{
    width: 0;
    height: 0;
    border-top: 200px solid black;
    border-right: 200px solid transparent;
    border-bottom: 200px solid transparent;
    border-left: 200px solid transparent;
}
#smallBox{
    width: 0;
    height: 0;
    border-top: 160px solid white;
    border-right: 160px solid transparent;
    border-bottom: 160px solid transparent;
    border-left: 160px solid transparent;
    position: absolute;
    left: 40px;
    top: 0;
}
</style>
</head>
<body>
<div id="bigBox"></div>
<div id="smallBox"></div>
</body>
</html>

实例: 实心箭头上下左右

头函数是ES6新增的一种函数简写形式。

箭头函数的写法更简洁，当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号

当参数只有一个的时候可以省略小括号

箭头函数和普通有很多不同，最主要就是改变的了this的指向

箭头函数内部的this由上下文决定。可以理解为箭头函数在定义的时候this就已经确定了。而普通函数只有在调用的时候才指定this。

普通函数，setTimeout的回调函数是由window调用，所以this指向window

箭头函数，this总是指向词法作用域，即obj

在线咨询

上一篇：fishhook 支持ARC的18个函数初步探究
下一篇：js实现一个可拖动的div

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

小白学JavaScript箭头函数踩坑总结你遇到了吗

一、认识JavaScript函数

二、ES6箭头函数

您的项目需求