ES6 奇怪语法

 

ES6多个箭头转ES5  

http://google.github.io/traceur-compiler/demo/repl.html#request(_action)%0Alet%20withStatus%20%3D%20status%20%3D%3E%20action%20%3D%3E%20R.merge(action%2C%20%7Bstatus%7D)%0Alet%20request%20%3D%20withStatus
https://www.javaroad.cn/questions/93072

了解available syntaxes of arrow functions将使您了解在您提供的示例中'chained'时所引入的行为 .

如果在没有块括号的情况下编写箭头函数(包含或不包含多个参数),则会隐式返回构成函数体的表达式 . 在您的示例中,该表达式是另一个箭头函数 .

No arrow funcs              Implicitly return `e=>{…}`    Explicitly return `e=>{…}` 
---------------------------------------------------------------------------------
function (field) {         |  field => e => {            |  field => {
  return function (e) {    |                             |    return e => {
      e.preventDefault()   |    e.preventDefault()       |      e.preventDefault()
  }                        |                             |    }
}                          |  }                          |  }

使用箭头语法编写匿名函数的另一个优点是它们在词汇上与它们定义的范围绑定 . 来自'Arrow functions' on MDN

与函数表达式相比,箭头函数表达式具有更短的语法,并以词汇方式绑定此值 . 箭头功能始终是匿名的 .

考虑到它来自reactjs应用程序,这在您的示例中尤为重要 . 正如@naomik所指出的,在React中,你经常使用 this 访问component's member functions . 例如:

No arrow funcs              Implicitly return `e=>{…}`    Explicitly return `e=>{…}` 
---------------------------------------------------------------------------------
function (field) {         |  field => e => {            |  field => {
  return function (e) {    |                             |    return e => {
      e.preventDefault()   |    e.preventDefault()       |      e.preventDefault()
  }                        |                             |    }
}                          |  }                          |  }

 

JavaScript 的 箭头函数 () => ({})
fn 的意思是,这个箭头函数返回一个对象,相当于一个工厂函数。

const fn = () => ({});

fn(); // {}
fn() === fn(); // false

 属性方式 有 obj.attr or obj['attrname'] ,所以可以如:

<html>
    <body>
        <script type="text/javascript">
            const loc="LOC";
            const test=(name)=>({
                  fullName:name,
                  [loc]: {
                    x:10,
                    y:5
                  }
            });
            var result=test('XiaoXiao');
            console.log(result);
            console.log(result[loc].x);
        </script>
    </body>
</html>

 

posted @ 2022-10-20 13:04  CrazyJC  阅读(28)  评论(0编辑  收藏  举报