JavaScript中的箭头函数以及编写优化

遇到困难睡大觉哈哈2024-11-25 21:57

箭头函数

1.1.1 箭头函数的概念

箭头函数时ES 6之后增加一种编写函数的方法，并且它比函数的表达式要更加简洁

箭头函数不会绑定this,arguments属性
箭头函数不能作为构造函数来使用（不能和new一起来使用，会出现错误）

js 复制代码

  //1.之前的方式
  function foo1() {
    var foo2 = function() {}
  }
  
  //2.箭头函数的完整写法
  //把function去掉，然后加个=>
  var foo3 = (name,age)=> {
    console.log("箭头函数的函数体")
    console.log(name,age)
  }

1.1.2 箭头函数的编写优化

优化一：如果只有一个参数（）可以省略

js 复制代码

  //1.优化一：如果箭头函数只有一个参数，那么（）可以省略
  var names = ["abc","cba","nba"]
  names.forEach(item=>[
    console.log(item)
  ])

优化二：如果函数执行体只有一行代码，那么可以省略大括号

并且这行代码的返回值会作为整个函数的返回值

优化三：只有一行代码时，这行代码的表达式结果会作为函数的返回值默认返回的

js 复制代码

// //一行代码中不能带有return关键字，如果省略，需要带return一起省略(下一条规则)
names.forEach(item =>console.log(item))
var newNums =nums.filter(item=>{
  return item % 2 ===0
 })

优化四：如果默认返回值是一个对象，那么这个对象必须加（）

js 复制代码

 var arrFn = ()=>({name:"why"})//可能会被当成执行体，要加小括号
 console.log(arrFn())

综合案例

js 复制代码

//箭头函数实现nums所有偶数平方的和
var nums = [20,30,11,15,111]
var result = nums.filter(item=>item % 2 === 0)
                  .map(item => item*item)
                  .reduce((prevValue,item)=>prevValue+item)
                  console.log(result)