您的位置:首页 > 其它

es6箭头函数

2017-10-31 21:25 330 查看


箭头函数实现

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关键字无需重新指定,这在进行事件绑定时会很有帮助。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: