0
点赞
收藏
分享

微信扫一扫

ES6中箭头函数的运用方法、相关特点以及注意事项

alanwhy 2022-11-18 阅读 71


ES6中箭头函数的运用方法、相关特点以及注意事项

ES6中允许使用箭头定义函数 (=> goes to),目的是简化函数的定义并且里面的this也比较特殊。

代码片段如下(含具体的解释与说明):

如果形参只有一个,可以省略小括号;
如果函数体只有一行代码,可以省略大括号,并且表示返回函数体的结果(不需要加return,而且有return的效果);

很多地方不适合用箭头函数,为什么呢?请看箭头函数的特点:
1.箭头函数的内部没有arguments对象(arguments是用来获取函数的实参的);
2.箭头函数不可以当作构造函数;
3.箭头函数内部,this指向外部作用域的this;

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<script>
//箭头函数是es6中的重要级别语法,要求必须无条件掌握

// 箭头函数的语法
// let 函数名 = (参数) => {函数体}

//1. 声明一个箭头函数,注意:可以用let,const,或者var。等号和箭头之间不允许有空格
let aaa = (x, y) => {
return x + y
};

//2. 如果形参只有一个,可以省略小括号
let bbb = x => {
return x * x
};

//3. 如果函数体只有一行代码,可以省略大括号,并且表示返回函数体的结果(不需要加return,而且有return的效果)
let ccc = x => x * x;

//实际运用:遍历数组,输出数组的值
var arr = [2, 5, 6, 8, 9]
arr.forEach(function(item, i, self) {
console.log(item)
});
arr.forEach(item => console.log(item));
//实际运用:将两个数组进行一个合并
let arr_a = [2, 5, 6, 8]
let arr_b = [8, 9, 9]
arr_b.forEach(item => arr_a.push(item))
</script>
<script>
//很多地方不适合用箭头函数,为什么呢?请看箭头函数的特点

// 1.箭头函数的内部没有arguments对象(arguments是用来获取函数的实参的)
function a() {
console.log(arguments)
}
a(2, 81, 8, 9) //此时用箭头函数就会报错

// 2.箭头函数不可以当作构造函数,下面这种写法会报错
let Person = () => {};
let p = new Person()

// 3.箭头函数内部,this指向外部作用域的this
let cc = () => {
console.log(this) //window
}

var username = '张三';
var obj = {
username: '李四',
fn1: function() {
console.log(this.username) //李四
},
fn2: () => {
console.log(this.username) //张三
}
}
</script>
</body>

</html>


举报

相关推荐

0 条评论