前端是否有点卷？

lint

禁止

使用

八股文

103 条回复 • 2021-11-08 12:13:07 +08:00

1 2

❮

❯

1

AoEiuV020

2021-11-04 16:40:15 +08:00

9

1234 感觉都没什么，普通的统一风格以及禁止一些没啥好处的炫技代码，

2

ztc

2021-11-04 16:49:47 +08:00

2

第 4 条为什么不能用？

3

AoEiuV020

2021-11-04 17:29:23 +08:00

@ztc #2 肯定是要求用 if else 呗，确实会有人觉得三目不直观，

4

h1104350235

2021-11-04 17:52:35 +08:00

没啥问题阿，我觉得有代码规范和约束是好事情。

5

gaoryrt

2021-11-04 17:53:13 +08:00

从我角度来看确实是为了团队着想
另，这几个 lint 也限制不了程序员发挥的，放宽心～

6

wunonglin

2021-11-04 17:59:09 +08:00

3

这个是团队规范，和你自个发挥创意是两回事，写出来的东西是给团队的人看的，每个人风格都不统一别人怎么接手你写的代码

7

pengtdyd

2021-11-04 18:00:09 +08:00

说个笑话：阿里的开源框架不遵守阿里出的 java 开发手册

8

rabbbit

2021-11-04 18:04:23 +08:00

for of 为啥不能用?

9

xiangyuecn

2021-11-04 18:04:41 +08:00

只要钱够多，再怎么不合理的要求都是毛毛雨啦。不然嘛，一边呆着去，否则上去就是一巴掌😂

10

rabbbit

2021-11-04 18:04:57 +08:00

是禁止用 for in 吧?

11

Hoshinokozo

2021-11-04 18:13:24 +08:00

感觉没啥问题，除了禁用三目稍微严苛了点，不过 3 目确实不如直接 if else 语义清晰

12

SuperManNoPain

2021-11-04 18:38:14 +08:00

前端还卷？请你来我们 java 阵营看看😅

13

IvanLi127

2021-11-04 18:42:10 +08:00 via Android

2 和 3 没啥问题，4 还能理解，1 咋了？

14

yuhangch

2021-11-04 18:45:44 +08:00

1

同问一，那怎么遍历啊，foreach ，for in ，for of

15

cwp374240920

2021-11-04 18:50:49 +08:00

4

lint 规则，prettier 风格，跟卷不卷没有关系，一个项目中如果每个人都有自己的风格，都按照自己的创意来写代码，你写的代码别人也不想看，别人写的代码你也不想读，那跟屎山没什么区别。如果对于 lint 规则与风格有意见，可以提出来到组里面大家一起商议一下。
八股文一般指的是你前端 Vue 说说 computed 跟 watch 的区别，dom-diff 算法是怎么实现的，业务代码怎么也跟八股文沾不上边的。
StackOverflow 上面的答案，复制下来不能用，你是不是得看下别人移植过来的器官在你身体上是不是能完美运行，代码知道逻辑自己写应该会更好吧。

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

小厂还是比较自由的，跟组长关系处好了你想怎么玩都可以，前端最起码的写起代码来还是比后端要舒服自由很多的，后端代码是真的又臭又长。

16

cwp374240920

2021-11-04 18:51:23 +08:00

@yuhangch [].map/forEach ?

17

ifreego

2021-11-04 19:04:59 +08:00

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']

18

TomatoYuyuko

2021-11-04 19:08:30 +08:00

8

不让写三目是吧，劳资直接 a = b && 1 || 2 (狗头

19

molvqingtai

2021-11-04 19:17:26 +08:00 via Android

如果不是写算法，代码中从不用 for 循环，迭代函数写起来方便语意也更强，

20

learnshare

2021-11-04 19:21:41 +08:00

定 lint 和卷有啥关系，左舵右行影响了交通效率吗？
lint 必须要有，越细致越好，合作的人越多越能发挥价值。

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

lint 规则好不好，这个比较主观，不容易做评价。
但随意搬一个规则来用，甚至啪一下全部 prettier ，那肯定是不对的。

21

creanme

2021-11-04 19:56:47 +08:00

@cwp374240920 forEach 性能差，感觉 map 并不适用于不需要返回新的数组的遍历。

22

cwp374240920

2021-11-04 20:06:16 +08:00

1

@creanme foreach/map/reduce/filter/find 都有明确的使用场景啊....这是数组的原生方法啊...你写前端需要多强的性能去处理数据啊...语义性上清晰便于阅读就是最佳实践了

23

Torpedo

2021-11-04 20:20:53 +08:00

这不说明还不够卷么？

这种代码风格的要求，稍微成熟的点的代码库都会要求的

24

sagaxu

2021-11-04 20:21:50 +08:00 via Android

互联网有不卷的吗？

25

henryhu

2021-11-04 20:46:42 +08:00

其他还好，3 目运算多好，用 if else ？太丑了

26

sickoo

2021-11-04 20:47:09 +08:00

这不也没啥，只是你踩得坑少

27

statement

2021-11-04 20:56:07 +08:00 via iPhone

我记得大学课本上就写要慎重使用三目。简单的很优雅。复杂的就很不直观

28

jiangshanmeta

2021-11-04 20:56:20 +08:00

开发 eslint 插件搞更严格的 lint 规则的路过

29

xylitolLin

2021-11-04 21:06:36 +08:00

你这 1 、2 、3 、4 看着也没啥问题啊，多人协作还是需要一点条条框框的

30

xiaoming1992

2021-11-04 22:05:42 +08:00

lint 肯定要严格啊，#18 直接通不过我的 lint: a = b && 1 || 2 (&& 和 || 不能在一起，至少要用括号括起来)

p.s. 一般这种都有一键 fix 的，无法 fix 的才需要手动修改

31

gauzung

2021-11-04 22:47:00 +08:00

多人协作开发肯定要 lint
但我个人感觉缩进两格有点太密。。看起来费眼睛
单个三目还好，多个三目嵌套看起来很累

32

kwrush

2021-11-04 23:43:08 +08:00 via iPhone

团队协作严格 linting 有好处，再不济可以 disable 嘛，和卷有什么关系呢
禁用 for 难以理解，大概是禁用 for-in ？
编辑器可以设置 tab 键为两空格
字符串模板可读性强
禁用三元是指这种吧 a?b:c?d:e

33

christin

2021-11-05 07:35:18 +08:00 via iPhone

9

学到个词就赶紧用用

34

cmdOptionKana

2021-11-05 08:42:22 +08:00

球球了，网络新词知道意思就行，没必要强行使用。

35

hst001

2021-11-05 08:55:44 +08:00 via Android

1

跟卷一点关系都没

36

daimubai

2021-11-05 09:07:19 +08:00

1

因为你不是团队 leader ，所以你只需要管自己舒不舒服。而 leader 则是要让整个团队舒不舒服。我觉得稍微思考下就不难理解这么做的原因，不值得发帖吐槽

37

zoffy

2021-11-05 09:27:11 +08:00

刚好我踩过这些坑

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. 可能说的是嵌套三目表达式，那确实应该禁止

38

PerFectTime

2021-11-05 09:34:06 +08:00

3

39

Features

OP

2021-11-05 11:17:08 +08:00

@rabbbit 就是 for
for in 遍历数组是有缺陷的，肯定不能用。

40

Features

OP

2021-11-05 11:18:17 +08:00

@IvanLi127 是这种：
for(let i=0;i<arr.length;i++){
//do something
}

41

Features

OP

2021-11-05 11:18:52 +08:00

@ifreego 哎呀，不是 for in 啦，就是 for

42

Features

OP

2021-11-05 11:23:13 +08:00

好吧，看来大家都习惯了
自己读书的时候没人管，爱怎么写怎么写
工作了还是得按流水线的规矩来😂
是我太矫情了

43

rayaa

2021-11-05 11:25:07 +08:00

@cwp374240920 有时候白天划水摸鱼过多，然后到下班代码写不完咋办，算不算卷 XD

44

Features

OP

2021-11-05 11:25:17 +08:00

@yuhangch 只能用 forEach 和 map

45

Originalee

2021-11-05 11:35:09 +08:00

只能 forEach 的话，for await...of 这种场景怎么办呢？

46

Originalee

2021-11-05 11:37:08 +08:00

另外实在不能苟同 4 ，某些场景用三目更直观吧。

47

rabbbit

2021-11-05 11:43:18 +08:00

@Features 强制函数式编程?

48

Features

OP

2021-11-05 11:46:19 +08:00

@rabbbit 只能用 forEach/map

49

cwp374240920

2021-11-05 11:49:17 +08:00

@rayaa 看来你产品催的还不够急

50

theprimone

2021-11-05 11:50:09 +08:00

这跟卷有半毛钱关系吗？ lint 规则而已。。。

51

darknoll

2021-11-05 11:53:47 +08:00

有些秀儿确实喜欢把几个三目运算叠在一起，看的头疼，禁了也是对的

52

foolnius

2021-11-05 11:56:09 +08:00

for(const value of array.values(){} 也不行？

53

anjianshi

2021-11-05 11:56:44 +08:00

真正有创意的内容不是靠语法体现出来的，是算法和奇思妙想，就像唐诗，都是五个字一行七个字一行，不影响每首诗有每首诗的美感

54

rabbbit

2021-11-05 12:01:34 +08:00

@Features 你们用的是 Angular 吗? 要是用 Rxjs 不许用 for 还能理解
要是 Vue React 还不让用 for 三目...

55

cyrbuzz

2021-11-05 12:13:42 +08:00

2

纯用`map/forEach/filter/find/reduce`怎么实现一个遍历到某内容之后 break 的情况。

56

zqx

2021-11-05 12:18:17 +08:00 via Android

eslint 是很没用的东西，只能做到表面很统一，程序的内在逻辑还是程序员本人的思路决定的。
一般的程序员都可以在遵守所有规则的情况下，写出冗余的难以理解的代码。

57

kidult

2021-11-05 12:51:20 +08:00

创意工作？

58

walpurgis

2021-11-05 12:57:06 +08:00

234 都能理解，不让用 for ，那可以用 while 吗，如果也不让用，那就是强制函数式编程，逐项遍历要写递归了，我不太信初中级程序的能玩的溜，问问你们同事怎么写的

我定 eslint
规则也一大堆，但大部分规则都是 auto fixable 的，不会额外增加使用者的心智负担。

59

wangyzj

2021-11-05 13:31:28 +08:00

为什么不让用 tab ？
用空格这个太难受了

60

daliusu

2021-11-05 13:31:48 +08:00

js 本身太灵活了，限制一下是正常情况，接受不了可以去选择 python ，这跟卷不卷有什么关系，几年前大前端时代还没开启的时候 eslint 甚至是面试题，会配置 lint 懂得控制语法使用都算面试优点

61

daliusu

2021-11-05 13:34:34 +08:00

@daliusu #60 那个时候找工作基本会个 jquery 都能找到的都要搞这些，充分说明了这跟卷不卷没有半毛钱关系

62

Features

OP

2021-11-05 13:38:28 +08:00

@wangyzj 还有更难受的，不过看大家都这么说，只能改下自己的习惯吧。

63

Features

OP

2021-11-05 13:40:41 +08:00

@daliusu
以前写了个组件不能直接用比较难受有办法吗？

64

GiftedJarvis

2021-11-05 13:55:11 +08:00

@ztc @AoEiuV020 有人会三元运算套三元运算, 我在屎山里见过

65

Perry

2021-11-05 13:58:41 +08:00 via iPhone

能看出应届生的年轻无知

66

fox2081

2021-11-05 13:59:36 +08:00

这个确实有些严格了，tab 这个，一般编辑器也支持 tab 转空格的，1 和 3 无法理解，各有各的使用场景，4 的话，虽然我们没限制，但自己年轻时特别喜欢写一些很复杂的表达式，自己看着很爽，同事看着很难受，确实不是啥好习惯。

eslint+editorconfig+prettier 还是要搞的，最好有 git hooks 检查，要不然团队里有人用 vsc ，有人用 webstorm ，有人 win ，有人 mac ，加一个分号导致十几处修改，提交一下对方全蓝，工作还怎么搞，这些东西又不会限制你的创意。

67

maichael

2021-11-05 14:05:11 +08:00

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 ），你可以测下自己的场景试试。

68

maichael

2021-11-05 14:09:01 +08:00

不觉得这是啥内卷，Lint 和 Prettier 都是为了减少无意义的内耗。

69

johnnyNg

2021-11-05 14:18:18 +08:00

我觉得没啥毛病

70

rongchuan

2021-11-05 14:27:12 +08:00

还好吧，如果配置好规则和 git husky,自己还是按自己的写，提交前自动 lint ，没啥感觉。

71

zhea55

2021-11-05 14:38:00 +08:00

@cyrbuzz

break 可以用 some 。

for 是命令式编程。

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

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

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

不然产出的代码，都不想看。

72

0xZhangKe

2021-11-05 14:38:53 +08:00

连三目运算符都觉得不直观那还是不要做程序员了吧。

73

cyrbuzz

2021-11-05 14:48:10 +08:00

@maichael

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

思考了一下，在与 continue 结合就有点力不从心了，还要做点啥的话也得给变量起个过得去的名字了= =，这样可能没人喷我`for (let i of arrays)`，这样可能会被吊起来锤`let i = arrays.find()`= =。

74

garlics

2021-11-05 14:51:49 +08:00

eslint 的官网每一条规则都会解释为什么怎么做，刚开始写的时候遇到不理解的规则都会去看下，也学到了很多。http://eslint.cn/docs/rules/
https://eslint.org/docs/rules/

75

Felldeadbird

2021-11-05 14:51:58 +08:00

后端来回答：禁用 for 我是无法理解的。全用 map ，foreach 这些？

76

cyrbuzz

2021-11-05 15:01:32 +08:00

@zhea55

some 有点不是绝对代替，用到 break 的地方往往会出现调用其他函数，赋值等操作。用 some 只拿到了状态，我想取那个值还得在迭代一次。要是在 some 的判断函数里加点赋值调用的私货，那这个 some 很不 some ，至少我个人是排斥的= =。

77

Features

OP

2021-11-05 15:04:42 +08:00

@Felldeadbird 是的，因为 ES6 以后提供了很多新语法来替代。
强迫程序员使用新的语法糖呗

78

wanguorui123

2021-11-05 15:15:39 +08:00

前端后端都一样卷，加上每个人的代码风格，更加混沌

79

EvilDevilJin

2021-11-05 15:28:14 +08:00

这跟卷没啥关系。
这不就是明确规范的编码风格吗。

80

banricho

2021-11-05 15:32:57 +08:00

除了 4 感觉都挺正常的。。。

81

wu67

2021-11-05 15:33:42 +08:00

三元运算有点不太理解, 尽管逻辑多的时候三元会带来阅读困难, 但复杂场景可以改用其他写法, 不是禁用三元的理由.

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

其他两个没啥毛病

82

xiao109

2021-11-05 15:34:44 +08:00

虽然是创意工作，但是大多数人都只是在屎山上继续搭建新的屎山而已。所以整越少的幺蛾子最好

83

360511404

2021-11-05 15:43:17 +08:00

前端这么可怕吗...
我写客户端的,十个 for 里面估计九个用 for in(大多数情况是快速拿数据)
三目运算更是家常便饭,比如根据 bool 返回不同的结果,一行返回就搞定了

84

yazinnnn

2021-11-05 15:47:47 +08:00

有这种规矩么？
if (bool) return false; else return true;

85

hereIsChen

2021-11-05 15:54:46 +08:00

for in 我用的不少
三目运算符只有简单的单行会用
其他的我觉得正常

86

ytll21

2021-11-05 15:55:36 +08:00

这种 lint 只能产出平庸的程序员。可以让出这个规矩的人看看「黑客与画家」这本书，不要给优秀的程序员套上太多的枷锁，他们懂得怎么写出让人看得懂，又漂亮的代码。

87

maplelin

2021-11-05 15:57:37 +08:00

@IvanLi127 #13 generator(误)

88

Features

OP

2021-11-05 16:05:56 +08:00

@kidult 真就只配码畜吗？

89

mxT52CRuqR6o5

2021-11-05 16:09:00 +08:00

是用的 airbnb 的 eslint 规则吗

90

SxqSachin

2021-11-05 16:24:51 +08:00

不让 for 遍历那需要 for await of 的场景咋搞啊，遍历出来然后 Promise.all 吗？感觉反而增加了复杂度

91

lancelock

2021-11-05 16:25:05 +08:00

这和卷有什么关系

92

zhea55

2021-11-05 16:29:29 +08:00

@cyrbuzz

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

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

你的需求都可以满足。只能说这个方法，理解起来没有那么直观。

93

jiayong2793

2021-11-05 16:29:45 +08:00

这和卷有什么关系

94

AoEiuV020

2021-11-05 17:01:43 +08:00

@TomatoYuyuko #18
> a = b && 1 || 2
我就这么用过，结果遇到 bug ，
(typeof(DEMO_MODE)!="undefined"&&DEMO_MODE === 'true') ||true
&&后面是个 false, 结果走了||里的 true ，
只好改成三目，