es6箭头函数基本用法

基本用法

ES6允许使用“箭头”(=>)定义函数。

var f = v => v;

上面的箭头函数等同于:

var f = function(v) {
  return v;
};

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

var f = () => 5;

等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var add = (num1, num2) => {
    if(typeof num1==='number' && typeof num2 === 'number'){
         return num1+num2;
    } else{
        return 0;
    } 
}; 

add(1,2);   =>3
add('1',2); => error

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

var getTempItem = id => ({ id: id, name: "Temp" });

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

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

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

*作为事件的回调函数
需要用大括号{}*

document.addEventListener('click', event => {console.log(event.name)});

*作为数组的回调函数
需要用大括号{}*

[1,2].map( (value, index) => {console.log(value + ',' + index);}) 
//result: 1,0
//result: 2,1

注意事项

使用注意点

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。

除了this,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:arguments、super、new.target。

### 使用ES6箭头函数定义方法 在JavaScript中,使用ES6箭头函数可以使代码更加简洁和易读。当希望在一个对象内定义方法时,可以利用箭头函数来实现这一点[^1]。 下面是一个简单的例子展示如何通过箭头函数创建一个名为`greetUser`的方法: ```javascript const userActions = { name: 'said', greetUser: () => { return `Hello ${this.name}`; } }; console.log(userActions.greetUser()); ``` 需要注意的是,在上述实例中直接调用`this.name`不会返回预期的结果,因为箭头函数并不会绑定自己的`this`上下文;相反,它们会继承外部作用域的`this`值。为了正确访问对象属性,可以在构造对象时保存对外部`this`的引用或者调整方法定义方式以确保能够正常访问到对象内部的数据成员[^3]。 一种解决方案是在声明对象的同时设置局部变量指向当前的对象实例: ```javascript const userActions = (()=>{ let self; return { name:'said', init(){ self=this; }, greetUser: ()=>{ return `Hello ${self.name}`; } }; })(); userActions.init(); console.log(userActions.greetUser()); // Hello said ``` 另一种更为推荐的方式是不使用箭头函数作为对象字面量中的方法,而是继续沿用传统的`function`表达式形式以便于处理`this`指针问题: ```javascript const userActions = { name: 'said', greetUser() { // 这里不用箭头函数 return `Hello ${this.name}`; } }; console.log(userActions.greetUser()); // Hello said ``` 对于类(class)来说,如果想要在其原型上添加静态方法或实例方法也可以考虑使用箭头函数,不过同样要注意`this`的行为特性[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值