zoukankan      html  css  js  c++  java
  • ES6 箭头函数易出错细节

    箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或 new.target。

    箭头函数基本语法

    (参数1, 参数2, …, 参数N) => { 函数声明 }
    (参数1, 参数2, …, 参数N) => 表达式(单一)
    //相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }
    
    // 当只有一个参数时,圆括号是可选的:
    (单一参数) => {函数声明}
    单一参数 => {函数声明}
    
    // 没有参数的函数应该写成一对圆括号。
    () => {函数声明}
    

    写法对比

    let fun1 = (a, b) => a + b    // 正确写法
    let fun2 = (a, b) => { a + b }  // 错误写法
    let fun3 = (a, b) => { return a + b }    // 正确写法
    
    console.log(fun1(1,2), fun2(1,2), fun3(1,2)) // 3 undefined 3
    
    • 当箭头函数后面的函数声明部分只有一行时,可以不加大括号,并且默认return
    • 当箭头函数后面的函数声明部分加大括号时,必须添加return

    注意


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

    let fun1 = id => { id: id, name: "jack" };
    
    console.log(fun1(111)); // 报错
    
    let fun2 = id => ({ id: id, name: "jim" });
    
    console.log(fun2(222));    // 不报错,   {id: 222, name: "jim"}
    
    
    let fun3 = id => {
      return { id: id, name: "jack" };
    }
    
    fun3(333); // 不报错,  {id: 333, name: "jim"}
    
    
  • 相关阅读:
    转载--php函数使用--var_export
    ZkApi的方法跨域访问ZkResource的静态资源文件出现的问题
    修改html内联样式的方法
    linux下的npm安装
    爬虫之静态网页爬虫(基础知识)
    利用jQuery使用HTML的formdata属性实现文件上传
    细说form表单
    session
    cookie和session(会话跟踪)
    同源策略和跨域问题
  • 原文地址:https://www.cnblogs.com/cckui/p/9915655.html
Copyright © 2011-2022 走看看