V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
autoxbc
V2EX  ›  JavaScript

JS 没有没这种语法糖

  •  
  •   autoxbc · 2018-04-22 06:58:29 +08:00 · 5237 次点击
    这是一个创建于 2405 天前的主题,其中的信息可能已经有所发展或是发生改变。

    对于这样的对象和函数

    const obj = {
        content:{
            value:{
                text:'foo',    
            },    
        },
    };
    
    const fn = text => text.slice(1) + 'bar' ;
    

    经常需要写这样的代码

    obj.content.value.text = fn(obj.content.value.text);
    obj.content.value.text = obj.content.value.text.replace( /f(oo)/ , '$1' );
    

    这里的 obj.content.value.text 明显是重复的

    借用类似管道的概念,是否有语法糖可以简化成这种样子

    obj.content.value.text <-> fn ;
    obj.content.value.text <-> function(){ ::replace( /f(oo)/ , '$1' ); };
    
    第 1 条附言  ·  2018-04-22 12:23:42 +08:00

    大家写过这种代码吧

    let num = 42;
    num += 5;
    

    把 += 抽象就是我要的东西
    本质是函数式的赋值运算符

    12 条回复    2018-04-23 13:46:31 +08:00
    Pastsong
        1
    Pastsong  
       2018-04-22 07:10:09 +08:00 via Android   ❤️ 2
    murmur
        2
    murmur  
       2018-04-22 07:20:48 +08:00
    with 关键字?
    whileFalse
        3
    whileFalse  
       2018-04-22 07:51:46 +08:00
    要说语法糖的话有 with 关键字。
    不过你只需要:
    let temp = obj.content.value
    whileFalse
        4
    whileFalse  
       2018-04-22 07:53:52 +08:00
    修正,with 不是语法糖。with 是个不太好的东西,影响了动态语言的静态优化。
    lrz0lrz
        5
    lrz0lrz  
       2018-04-22 09:22:57 +08:00
    `obj.content.value.text = fn(obj.content.value.text).replace( /f(oo)/ , '$1' );`
    这样不行吗?
    leven87
        6
    leven87  
       2018-04-22 09:38:53 +08:00
    这是所谓的 ES6 吧,老程序员表示还看不太懂。哎
    jorneyr
        7
    jorneyr  
       2018-04-22 09:54:33 +08:00
    ```html
    <!DOCTYPE html>
    <html>

    <head>
    <title></title>
    </head>

    <body>
    <script type="text/javascript">
    'use strict';

    /**
    * 把字符串路径生成链式对象的命名空间。
    *
    * 使用命名空间,可以减少命名冲突,可以像下面这么做:
    * var ns = ns || {};
    * ns.ModuleClass = {};
    *
    * 但是如果名字太长,如 a.b.c.e.f.g.h,这样的方式定义命名空间需要太多代码,很麻烦。
    **/
    function namespace(qualifiedPath) {
    var arr = qualifiedPath.split('.');
    var i = 0;
    var name;
    var root = window;

    while (name = arr[i++]) {
    if (!root[name]) {
    root[name] = {};
    }

    root = root[name];
    }

    return root;
    }
    </script>

    <script>
    'use strict';
    namespace('com.xtuer.util'); // 生成命名空间 com.xtuer.util

    // 定义类 Foo 的构造函数
    com.xtuer.util.Foo = function() {
    this.x = 10; // 定义成员变量
    this.y = 20; // 定义成员变量
    }

    // 给类 Foo 定义函数 bar()
    com.xtuer.util.Foo.prototype.bar = function() {
    console.log('[' + this.x + ', ' + this.y + ']'); // 调用成员变量
    this.foo(); // 调用成员函数
    }

    com.xtuer.util.Foo.prototype.foo = function() {
    console.log('Amazing');
    };

    var x = new com.xtuer.util.Foo(); // 创建对象,调用对象的函数
    x.bar();
    x.foo();
    </script>
    </body>

    </html>
    ```

    写个 namespace 的函数,每次调用一下
    flowfire
        8
    flowfire  
       2018-04-22 10:29:02 +08:00   ❤️ 1
    prefix = obj.content.value
    prefix.text = fn(prefix.text);
    prefix.text = prefix.text.replace( /f(oo)/ , '$1' );
    plqws
        9
    plqws  
       2018-04-22 11:30:11 +08:00
    pipeable(obj.content.value.text)
    .pipe(fn)
    .pipe(s => s.replace( /f(oo)/ , '$1' ))

    利用 node 的 stream 封装一下可以做到,就是有点麻烦
    azh7138m
        10
    azh7138m  
       2018-04-22 13:03:22 +08:00
    @Pastsong 这么没法实现楼主,只写一次变量名需求的啊
    h1367500190
        11
    h1367500190  
       2018-04-22 16:08:13 +08:00
    楼主足够牛逼的话(非嘲讽)可以去弄个提案,造福大众,虽然说语法层面的提案一般都很难通过。

    确实这样很常见而且很蛋疼,有时候节点太深我宁愿像 3 楼那样创建中间变量。。。
    ffu
        12
    ffu  
       2018-04-23 13:46:31 +08:00
    with 关键字,不过不推荐使用,vue 里面就是这样写的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   987 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:15 · PVG 05:15 · LAX 13:15 · JFK 16:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.