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

最新推荐文章于 2022-10-13 18:28:11 发布

原创最新推荐文章于 2022-10-13 18:28:11 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5

javascript复习之路同时被 2 个专栏收录

87 篇文章

订阅专栏

javascript基础

77 篇文章

订阅专栏

本文深入探讨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
  }
}