箭头函数实现
const fruits = ['apple', 'banana', 'orange'];
(const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。) 为names数组中的每个元素后加上'eat'这个字符串 普通写法
const fruiteat = fruits.map(function(name){
return `${name} eat`;
});
console.log(fruiteat);// ["apple eat", "banana eat", "orange eat"]
1.删除关键字function,用=>代替
const fruiteat2 = fruits.map((name) => {
return `${name} eat`;
});
console.log(fruiteat2);//["apple eat", "banana eat", "orange eat"]
2.如果只有一个参数,可以去掉包name的括号
const fruiteat3= fruits.map(name => {
return `${name} eat`;
});
console.log(fruiteat2);// ["apple eat", "banana eat", "orange eat"]
3.箭头函数内置 return 功能。即,如果你只想使用箭头函数返回什么东西的话,那么无需显示地写出 return 。
const fruiteat4= fruits.map(name => `${name} eat`);
console.log(fruiteat4);// ["apple eat", "banana eat", "orange eat"]
- 函数有一句想要返回的语句。此时,去掉了包return的花括号,这个函数体内仅有一句想要返回的语句。
- 当函数没有参数时
const fruiteat5 = fruits.map(() => `eating`);
console.log(fruiteat5);//["eating", "eating", "eating"]
另一种写法使用_代替()
fruits.map(_ => `eating`);
我们称之为一个一次性变量,因为我们实际上正在创建一个名为_但不使用的变量
箭头函数始终是匿名函数,它们不能用作构造函数。
目前的JavaScript版本把所有箭头函数当成匿名函数,但我们可以用一个变量指向匿名函数,以这种方式来仿造声明函数
const sayMyName = (name) => {alert(`Hello ${name}!`)}
sayMyName('Wes');
箭头函数中的this关键字
普通函数中的this:
- this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj
- 在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window
- 在严格模式下,没有直接调用者的函数中的this是 undefined
- 使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象
箭头函数中的this
默认指向在定义它时,它所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window
箭头函数的三个优点: 1. 语法简洁,能够写出漂亮的单行函数。2. 内置return语句,当函数只想返回某个东西的时候,可以不必显现地写出return。3.this关键字无需重新指定,这在进行事件绑定时会很有帮助。