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

箭头函数

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 箭头函数的编写优化

  1. 优化一:如果只有一个参数()可以省略
js 复制代码
  //1.优化一:如果箭头函数只有一个参数,那么()可以省略
  var names = ["abc","cba","nba"]
  names.forEach(item=>[
    console.log(item)
  ])
  1. 优化二:如果函数执行体只有一行代码,那么可以省略大括号

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

  1. 优化三:只有一行代码时,这行代码的表达式结果会作为函数的返回值默认返回的
js 复制代码
// //一行代码中不能带有return关键字,如果省略,需要带return一起省略(下一条规则)
names.forEach(item =>console.log(item))
var newNums =nums.filter(item=>{
  return item % 2 ===0
 })
  1. 优化四:如果默认返回值是一个对象,那么这个对象必须加()
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)
相关推荐
CoderLiu17 分钟前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说19 分钟前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6661 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey1 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆1 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL2 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen2 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui