箭头函数用法及和ECMA5数组方法结合

本文深入探讨JavaScript箭头函数的使用方法,包括不同参数和返回值情况的示例,以及箭头函数与ECMA5数组方法如filter和map的结合。同时,文章指出箭头函数的特性,如不能用new操作符,this指向问题,以及返回对象时的注意事项。通过实例解析,帮助读者更好地理解和运用箭头函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.箭头函数用法

箭头函数:新潮的函数写法
【注】适当的省略函数中的function和return关键字

各种形式的箭头函数

  //1.无参数,无返回值
  function show(){
      alert("hello world");
  }
  var show = () => {
      alert("hello world");
  }
  
  //2.有一个参数,无返回值
  function xxx(num){
      alert(num);
  }
  var xxx = num => {
      alert(num);
  }

  //3.有一个参数,有返回值
  function add(x){
      return x + 10;
  }
  var add = x => {
      return x + 10;
  }

  //4.多个参数,有返回值
  function show(x,y){
      return x + y;
  }

  var show = (x,y) => {
      return x + y;
  }
  
  //【注】当代码语句只有一条时,可以去掉return并省略大括号

2.箭头函数和ECMA5数组方法结合

/* 
      filter  过滤
      map	  遍历
  */
 var arr = [10,20,30,40,50];
 
 // 传统函数写法
 var newArr = arr.filter(function(item){
      return item > 20;
 });
 
 // 箭头函数写法
 var newArr = arr.filter(item => item > 20); // [30,40,50]
 var newArr = arr.map(item => item * 1.3); // [13, 26, 39, 52, 65]

3.箭头函数要注意的部分

1.箭头函数,不能用new
2.箭头,如果返回值是一个对象,一定要包裹();

// 传统函数写法
function show(){
    return{
        username: 'xxx'
    }
}
// 箭头函数写法,注意省略return和大括号后返回一个对象,对象外要包裹()
var show = () => ({username: 'xxx'});

3.箭头函数中的this,指向的是上一层函数的主人

var person = {
    username: '钢铁侠',
    // 传统函数写法
    show: function(){
        alert(person.username); // 钢铁侠
        alert(this.username); // 钢铁侠
    },
	// 箭头函数写法
    show: () => {
    alert(person.username); // 钢铁侠
    alert(this.username); //undefined 因为this指向了window
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方求败、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值