JS 没有没这种语法糖

2018-04-22 06:58:29 +08:00
 autoxbc

对于这样的对象和函数

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' ); };
5255 次点击
所在节点    JavaScript
12 条回复
Pastsong
2018-04-22 07:10:09 +08:00
有啊，在 TC39 Stage 1
https://github.com/tc39/proposal-pipeline-operator
murmur
2018-04-22 07:20:48 +08:00
with 关键字？
whileFalse
2018-04-22 07:51:46 +08:00
要说语法糖的话有 with 关键字。
不过你只需要：
let temp = obj.content.value
whileFalse
2018-04-22 07:53:52 +08:00
修正，with 不是语法糖。with 是个不太好的东西，影响了动态语言的静态优化。
lrz0lrz
2018-04-22 09:22:57 +08:00
`obj.content.value.text = fn(obj.content.value.text).replace( /f(oo)/ , '$1' );`
这样不行吗？
leven87
2018-04-22 09:38:53 +08:00
这是所谓的 ES6 吧，老程序员表示还看不太懂。哎
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
2018-04-22 10:29:02 +08:00
prefix = obj.content.value
prefix.text = fn(prefix.text);
prefix.text = prefix.text.replace( /f(oo)/ , '$1' );
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
2018-04-22 13:03:22 +08:00
@Pastsong 这么没法实现楼主，只写一次变量名需求的啊
h1367500190
2018-04-22 16:08:13 +08:00
楼主足够牛逼的话（非嘲讽）可以去弄个提案，造福大众，虽然说语法层面的提案一般都很难通过。

确实这样很常见而且很蛋疼，有时候节点太深我宁愿像 3 楼那样创建中间变量。。。
ffu
2018-04-23 13:46:31 +08:00
with 关键字，不过不推荐使用，vue 里面就是这样写的。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/448818

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX