V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Features
V2EX  ›  问与答

前端是否有点卷?

  •  
  •   Features · 83 天前 · 4543 次点击
    这是一个创建于 83 天前的主题,其中的信息可能已经有所发展或是发生改变。
    应届生,入职某小厂,前端大概 15 人团队,lint 规则令人发指

    1.比如禁止使用 for 遍历一个数组

    2.缩进必须要两个空格,不能使用 tab

    3.禁止使用字符串与变量进行 + 操作,必须使用``

    4.禁止使用三目运算符

    ......

    我觉得程序员也是一种创意工作吧?

    现在搞得有点像写八股文

    本来有些功能写起来就很费劲,好不容易想到一个办法

    或者从 stackoverflow 找到答案,复制下来还不能直接用😂

    搞得挺难受的

    不知道大家怎么看严苛的 lint 规则的?
    103 条回复    2021-11-08 12:13:07 +08:00
    1  2  
    AoEiuV020
        1
    AoEiuV020  
       83 天前   ❤️ 9
    1234 感觉都没什么,普通的统一风格以及禁止一些没啥好处的炫技代码,
    ztc
        2
    ztc  
       83 天前   ❤️ 2
    第 4 条为什么不能用?
    AoEiuV020
        3
    AoEiuV020  
       83 天前
    @ztc #2 肯定是要求用 if else 呗,确实会有人觉得三目不直观,
    h1104350235
        4
    h1104350235  
       83 天前
    没啥问题阿,我觉得有代码规范和约束是好事情。
    gaoryrt
        5
    gaoryrt  
       83 天前
    从我角度来看确实是为了团队着想
    另,这几个 lint 也限制不了程序员发挥的,放宽心~
    wunonglin
        6
    wunonglin  
       83 天前   ❤️ 3
    这个是团队规范,和你自个发挥创意是两回事,写出来的东西是给团队的人看的,每个人风格都不统一别人怎么接手你写的代码
    pengtdyd
        7
    pengtdyd  
       83 天前
    说个笑话:阿里的开源框架不遵守阿里出的 java 开发手册
    rabbbit
        8
    rabbbit  
       83 天前
    for of 为啥不能用?
    xiangyuecn
        9
    xiangyuecn  
       83 天前
    只要钱够多,再怎么不合理的要求都是毛毛雨啦。不然嘛,一边呆着去,否则上去就是一巴掌😂
    rabbbit
        10
    rabbbit  
       83 天前
    是禁止用 for in 吧?
    Hoshinokozo
        11
    Hoshinokozo  
       83 天前
    感觉没啥问题,除了禁用三目稍微严苛了点,不过 3 目确实不如直接 if else 语义清晰
    SuperManNoPain
        12
    SuperManNoPain  
       83 天前
    前端还卷? 请你来我们 java 阵营看看😅
    IvanLi127
        13
    IvanLi127  
       83 天前 via Android
    2 和 3 没啥问题,4 还能理解,1 咋了?
    yuhangch
        14
    yuhangch  
       83 天前   ❤️ 1
    同问一,那怎么遍历啊,foreach ,for in ,for of
    cwp374240920
        15
    cwp374240920  
       83 天前   ❤️ 4
    lint 规则,prettier 风格,跟卷不卷没有关系,一个项目中如果每个人都有自己的风格,都按照自己的创意来写代码,你写的代码别人也不想看,别人写的代码你也不想读,那跟屎山没什么区别。如果对于 lint 规则与风格有意见,可以提出来到组里面大家一起商议一下。
    八股文一般指的是你前端 Vue 说说 computed 跟 watch 的区别,dom-diff 算法是怎么实现的,业务代码怎么也跟八股文沾不上边的。
    StackOverflow 上面的答案,复制下来不能用,你是不是得看下别人移植过来的器官在你身体上是不是能完美运行,代码知道逻辑自己写应该会更好吧。

    前端卷的定义是:下班时间到了,你跟你同事的活都干完了,但是还赖在公司假装没干完,对着电脑假惺惺的写代码;没有活干了,然后疯狂的写一些没有用的轮子来争取 kpi 。(以上只是举例子,请不要真的这么做。)

    小厂还是比较自由的,跟组长关系处好了你想怎么玩都可以,前端最起码的写起代码来还是比后端要舒服自由很多的,后端代码是真的又臭又长。
    cwp374240920
        16
    cwp374240920  
       83 天前
    @yuhangch [].map/forEach ?
    ifreego
        17
    ifreego  
       83 天前   ❤️ 7
    for in 会遍历原型链上的 props ,可能会有一些奇怪的 bug

    举个例子
    const arr = ['a','b','c'];
    const indexes = [];

    Array.prototype.each = function() {/*blah*/};

    for (var index in arr) {
    indexes.push(index);
    }

    indexes; // ['0', '1', '2', 'each']
    TomatoYuyuko
        18
    TomatoYuyuko  
       83 天前   ❤️ 8
    不让写三目是吧,劳资直接 a = b && 1 || 2 (狗头
    molvqingtai
        19
    molvqingtai  
       82 天前 via Android
    如果不是写算法,代码中从不用 for 循环,迭代函数写起来方便语意也更强,
    learnshare
        20
    learnshare  
       82 天前
    定 lint 和卷有啥关系,左舵右行影响了交通效率吗?
    lint 必须要有,越细致越好,合作的人越多越能发挥价值。

    lint 打的就是你:
    >复制下来还不能直接用

    lint 规则好不好,这个比较主观,不容易做评价。
    但随意搬一个规则来用,甚至啪一下全部 prettier ,那肯定是不对的。
    creanme
        21
    creanme  
       82 天前
    @cwp374240920 forEach 性能差,感觉 map 并不适用于不需要返回新的数组的遍历。
    cwp374240920
        22
    cwp374240920  
       82 天前   ❤️ 1
    @creanme foreach/map/reduce/filter/find 都有明确的使用场景啊....这是数组的原生方法啊...你写前端需要多强的性能去处理数据啊...语义性上清晰便于阅读就是最佳实践了
    Torpedo
        23
    Torpedo  
       82 天前
    这不说明还不够卷么?

    这种代码风格的要求,稍微成熟的点的代码库都会要求的
    sagaxu
        24
    sagaxu  
       82 天前 via Android
    互联网有不卷的吗?
    henryhu
        25
    henryhu  
       82 天前
    其他还好,3 目运算多好,用 if else ?太丑了
    sickoo
        26
    sickoo  
       82 天前
    这不也没啥,只是你踩得坑少
    statement
        27
    statement  
       82 天前 via iPhone
    我记得大学课本上就写 要慎重使用三目。 简单的很优雅。复杂的就很不直观
    jiangshanmeta
        28
    jiangshanmeta  
       82 天前
    开发 eslint 插件搞更严格的 lint 规则的路过
    xylitolLin
        29
    xylitolLin  
       82 天前
    你这 1 、2 、3 、4 看着也没啥问题啊,多人协作还是需要一点条条框框的
    xiaoming1992
        30
    xiaoming1992  
       82 天前
    lint 肯定要严格啊,#18 直接通不过我的 lint: a = b && 1 || 2 (&& 和 || 不能在一起,至少要用括号括起来)

    p.s. 一般这种都有一键 fix 的,无法 fix 的才需要手动修改
    gauzung
        31
    gauzung  
       82 天前
    多人协作开发肯定要 lint
    但我个人感觉缩进两格有点太密。。看起来费眼睛
    单个三目还好,多个三目嵌套看起来很累
    kwrush
        32
    kwrush  
       82 天前 via iPhone
    团队协作严格 linting 有好处,再不济可以 disable 嘛,和卷有什么关系呢
    禁用 for 难以理解,大概是禁用 for-in ?
    编辑器可以设置 tab 键为两空格
    字符串模板可读性强
    禁用三元是指这种吧 a?b:c?d:e
    christin
        33
    christin  
       82 天前 via iPhone   ❤️ 9
    学到个词就赶紧用用
    cmdOptionKana
        34
    cmdOptionKana  
       82 天前
    球球了,网络新词知道意思就行,没必要强行使用。
    hst001
        35
    hst001  
       82 天前 via Android   ❤️ 1
    跟卷一点关系都没
    daimubai
        36
    daimubai  
       82 天前   ❤️ 1
    因为你不是团队 leader ,所以你只需要管自己舒不舒服。而 leader 则是要让整个团队舒不舒服。我觉得稍微思考下就不难理解这么做的原因,不值得发帖吐槽
    zoffy
        37
    zoffy  
       82 天前
    刚好我踩过这些坑

    1. for of 限制通常源于 airbnb 的规则,社区里也很多人吐槽,我赞同这个老哥的跟帖
    https://github.com/airbnb/javascript/issues/1271#issuecomment-281716212

    解决方法可以复制规则源码到自己的 eslint 配置中,删除 for of 限制
    https://github.com/airbnb/javascript/blob/1eadb93e377da1e56c3f91f26610e5d0a00738a9/packages/eslint-config-airbnb-base/rules/style.js#L339

    2 、3. 不是什么问题

    4. 可能说的是嵌套三目表达式,那确实应该禁止
    PerFectTime
        38
    PerFectTime  
       82 天前   ❤️ 3
    Features
        39
    Features  
    OP
       82 天前
    @rabbbit 就是 for
    for in 遍历数组是有缺陷的,肯定不能用。
    Features
        40
    Features  
    OP
       82 天前
    @IvanLi127 是这种:
    for(let i=0;i<arr.length;i++){
    //do something
    }
    Features
        41
    Features  
    OP
       82 天前
    @ifreego 哎呀,不是 for in 啦,就是 for
    Features
        42
    Features  
    OP
       82 天前
    好吧,看来大家都习惯了
    自己读书的时候没人管,爱怎么写怎么写
    工作了还是得按流水线的规矩来😂
    是我太矫情了
    rayaa
        43
    rayaa  
       82 天前
    @cwp374240920 有时候白天划水摸鱼过多,然后到下班代码写不完咋办,算不算卷 XD
    Features
        44
    Features  
    OP
       82 天前
    @yuhangch 只能用 forEach 和 map
    Originalee
        45
    Originalee  
       82 天前
    只能 forEach 的话,for await...of 这种场景怎么办呢?
    Originalee
        46
    Originalee  
       82 天前
    另外实在不能苟同 4 ,某些场景用三目更直观吧。
    rabbbit
        47
    rabbbit  
       82 天前
    @Features 强制函数式编程?
    Features
        48
    Features  
    OP
       82 天前
    @rabbbit 只能用 forEach/map
    cwp374240920
        49
    cwp374240920  
       82 天前
    @rayaa 看来你产品催的还不够急
    theprimone
        50
    theprimone  
       82 天前
    这跟卷有半毛钱关系吗? lint 规则而已。。。
    darknoll
        51
    darknoll  
       82 天前
    有些秀儿确实喜欢把几个三目运算叠在一起,看的头疼,禁了也是对的
    foolnius
        52
    foolnius  
       82 天前
    for(const value of array.values(){} 也不行?
    anjianshi
        53
    anjianshi  
       82 天前
    真正有创意的内容不是靠语法体现出来的,是算法和奇思妙想,就像唐诗,都是五个字一行七个字一行,不影响每首诗有每首诗的美感
    rabbbit
        54
    rabbbit  
       82 天前
    @Features 你们用的是 Angular 吗? 要是用 Rxjs 不许用 for 还能理解
    要是 Vue React 还不让用 for 三目...
    cyrbuzz
        55
    cyrbuzz  
       82 天前   ❤️ 2
    纯用`map/forEach/filter/find/reduce`怎么实现一个遍历到某内容之后 break 的情况。
    zqx
        56
    zqx  
       82 天前 via Android
    eslint 是很没用的东西,只能做到表面很统一,程序的内在逻辑还是程序员本人的思路决定的。
    一般的程序员都可以在遵守所有规则的情况下,写出冗余的难以理解的代码。
    kidult
        57
    kidult  
       82 天前
    创意工作?
    walpurgis
        58
    walpurgis  
       82 天前
    234 都能理解,不让用 for ,那可以用 while 吗,如果也不让用,那就是强制函数式编程,逐项遍历要写递归了,我不太信初中级程序的能玩的溜,问问你们同事怎么写的

    我定 eslint
    规则也一大堆,但大部分规则都是 auto fixable 的,不会额外增加使用者的心智负担。
    wangyzj
        59
    wangyzj  
       82 天前
    为什么不让用 tab ?
    用空格这个太难受了
    daliusu
        60
    daliusu  
       82 天前
    js 本身太灵活了,限制一下是正常情况,接受不了可以去选择 python ,这跟卷不卷有什么关系,几年前大前端时代还没开启的时候 eslint 甚至是面试题,会配置 lint 懂得控制语法使用都算面试优点
    daliusu
        61
    daliusu  
       82 天前
    @daliusu #60 那个时候找工作基本会个 jquery 都能找到的都要搞这些,充分说明了这跟卷不卷没有半毛钱关系
    Features
        62
    Features  
    OP
       82 天前
    @wangyzj 还有更难受的,不过看大家都这么说,只能改下自己的习惯吧。
    Features
        63
    Features  
    OP
       82 天前
    @daliusu
    以前写了个组件不能直接用比较难受有办法吗?
    GiftedJarvis
        64
    GiftedJarvis  
       82 天前
    @ztc @AoEiuV020 有人会三元运算套三元运算, 我在屎山里见过
    Perry
        65
    Perry  
       82 天前 via iPhone
    能看出应届生的年轻无知
    fox2081
        66
    fox2081  
       82 天前
    这个确实有些严格了,tab 这个,一般编辑器也支持 tab 转空格的,1 和 3 无法理解,各有各的使用场景,4 的话,虽然我们没限制,但自己年轻时特别喜欢写一些很复杂的表达式,自己看着很爽,同事看着很难受,确实不是啥好习惯。

    eslint+editorconfig+prettier 还是要搞的,最好有 git hooks 检查,要不然团队里有人用 vsc ,有人用 webstorm ,有人 win ,有人 mac ,加一个分号导致十几处修改,提交一下对方全蓝,工作还怎么搞,这些东西又不会限制你的创意。
    maichael
        67
    maichael  
       82 天前   ❤️ 1
    @cyrbuzz #54
    通常来说,要 break 的场景只有 find ,可以使用 every 和 some 来替代( https://stackoverflow.com/questions/6260756/how-to-stop-javascript-foreach ),当然,这不符合语义化的要求。
    其实在某些场景下(不确定有多少),find 的性能要比 for-loop-break 的要高( https://www.measurethat.net/Benchmarks/Show/4261/0/find-vs-forof-vs-for-loop ),你可以测下自己的场景试试。
    maichael
        68
    maichael  
       82 天前
    不觉得这是啥内卷,Lint 和 Prettier 都是为了减少无意义的内耗。
    johnnyNg
        69
    johnnyNg  
       82 天前
    我觉得没啥毛病
    rongchuan
        70
    rongchuan  
       82 天前
    还好吧,如果配置好规则和 git husky,自己还是按自己的写,提交前自动 lint ,没啥感觉。
    zhea55
        71
    zhea55  
       82 天前
    @cyrbuzz

    break 可以用 some 。

    for 是命令式编程。

    现在前端全部换声明式了。

    只能实现功能的代码,早删除了好,不然都是坑。


    这还只是 eslint 呢,建议把 stylelint 也加上。


    不然产出的代码,都不想看。
    0xZhangKe
        72
    0xZhangKe  
       82 天前
    连三目运算符都觉得不直观那还是不要做程序员了吧。
    cyrbuzz
        73
    cyrbuzz  
       82 天前
    @maichael

    有意思的代替,单条件用 find 确实是个不错的代替,新技能 Get 。

    思考了一下,在与 continue 结合就有点力不从心了,还要做点啥的话也得给变量起个过得去的名字了= =,这样可能没人喷我`for (let i of arrays)`,这样可能会被吊起来锤`let i = arrays.find()`= =。
    garlics
        74
    garlics  
       82 天前
    eslint 的官网每一条规则都会解释为什么怎么做,刚开始写的时候遇到不理解的规则都会去看下,也学到了很多。http://eslint.cn/docs/rules/
    https://eslint.org/docs/rules/
    Felldeadbird
        75
    Felldeadbird  
       82 天前
    后端来回答:禁用 for 我是无法理解的。 全用 map ,foreach 这些?
    cyrbuzz
        76
    cyrbuzz  
       82 天前
    @zhea55

    some 有点不是绝对代替,用到 break 的地方往往会出现调用其他函数,赋值等操作。用 some 只拿到了状态,我想取那个值还得在迭代一次。要是在 some 的判断函数里加点赋值调用的私货,那这个 some 很不 some ,至少我个人是排斥的= =。
    Features
        77
    Features  
    OP
       82 天前
    @Felldeadbird 是的,因为 ES6 以后提供了很多新语法来替代。
    强迫程序员使用新的语法糖呗
    wanguorui123
        78
    wanguorui123  
       82 天前
    前端后端都一样卷,加上每个人的代码风格,更加混沌
    EvilDevilJin
        79
    EvilDevilJin  
       82 天前
    这跟卷没啥关系。
    这不就是明确规范的编码风格吗。
    banricho
        80
    banricho  
       82 天前
    除了 4 感觉都挺正常的。。。
    wu67
        81
    wu67  
       82 天前
    三元运算有点不太理解, 尽管逻辑多的时候三元会带来阅读困难, 但复杂场景可以改用其他写法, 不是禁用三元的理由.

    至于 for, 前端的 for 其实有好几种. for( ; ; ) {} 这种确实不直观, for in 确实也不应该用来遍历数组. 但是 for of 可是没毛病的; 再不济还有各个高阶方法, 例如 forEach map filter reduce.

    其他两个没啥毛病
    xiao109
        82
    xiao109  
       82 天前
    虽然是创意工作,但是大多数人都只是在屎山上继续搭建新的屎山而已。所以整越少的幺蛾子最好
    360511404
        83
    360511404  
       82 天前
    前端这么可怕吗...
    我写客户端的,十个 for 里面估计九个用 for in(大多数情况是快速拿数据)
    三目运算更是家常便饭,比如根据 bool 返回不同的结果,一行返回就搞定了
    yazinnnn
        84
    yazinnnn  
       82 天前
    有这种规矩么?
    if (bool) return false; else return true;
    hereIsChen
        85
    hereIsChen  
       82 天前
    for in 我用的不少
    三目运算符只有简单的单行会用
    其他的我觉得正常
    ytll21
        86
    ytll21  
       82 天前
    这种 lint 只能产出平庸的程序员。可以让出这个规矩的人看看「黑客与画家」这本书,不要给优秀的程序员套上太多的枷锁,他们懂得怎么写出让人看得懂,又漂亮的代码。
    maplelin
        87
    maplelin  
       82 天前
    @IvanLi127 #13 generator(误)
    Features
        88
    Features  
    OP
       82 天前
    @kidult 真就只配码畜吗?
    mxT52CRuqR6o5
        89
    mxT52CRuqR6o5  
       82 天前
    是用的 airbnb 的 eslint 规则吗
    SxqSachin
        90
    SxqSachin  
       82 天前
    不让 for 遍历那需要 for await of 的场景咋搞啊,遍历出来然后 Promise.all 吗?感觉反而增加了复杂度
    lancelock
        91
    lancelock  
       82 天前
    这和卷有什么关系
    zhea55
        92
    zhea55  
       82 天前
    @cyrbuzz

    在 some 的 callback 里面,你可以手动控制是否返回 true 的。

    你的逻辑处理完了,return true 就相当于 break 了


    你的需求都可以满足。 只能说这个方法,理解起来没有那么直观。
    jiayong2793
        93
    jiayong2793  
       82 天前
    这和卷有什么关系
    AoEiuV020
        94
    AoEiuV020  
       82 天前
    @TomatoYuyuko #18
    > a = b && 1 || 2
    我就这么用过,结果遇到 bug ,
    (typeof(DEMO_MODE)!="undefined"&&DEMO_MODE === 'true') ||true
    &&后面是个 false, 结果走了||里的 true ,
    只好改成三目,
    yaphets666
        95
    yaphets666  
       82 天前
    @ifreego 所以现在自动补全都是自动补一个 hasOwnProperty
    PungentSauce
        96
    PungentSauce  
       82 天前
    文作写着倒想我哈哈
    哈哈我想倒着写作文
    口合口合我🐘亻到 zhe 写亻乍文
    sugars
        97
    sugars  
       82 天前
    本来觉得「卷」好像有点过了,但看到「令人发指」蚌埠住了哈,最多用「严格」比较合适。
    然后其实 1234 都非常正常,15 人的前端团队其实也不算少了,为了统一这是最基本的了
    lap510200
        98
    lap510200  
       82 天前
    统一的代码机构和风格 项目大了会感觉很有意义 别人接手也快
    Leviathann
        99
    Leviathann  
       82 天前 via iPhone
    虽然我也几乎不用 forof 但是某些需要 early return 的地方怎么办 try catch ?
    还有没有三目的语言他们的 if 本身就是表达式,js 的 if 不是表达式,在一些只能用表达式的地方怎么搞?一定得 let xxx ;然后在 if 里赋值?
    huxiaofan1223
        100
    huxiaofan1223  
       81 天前 via iPhone
    @AoEiuV020 不是三目不直观,是有的人嵌套三目,恶心死了
    1  2  
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2561 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 11:17 · PVG 19:17 · LAX 03:17 · JFK 06:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.