前端真的可以这么水吗？

[Karte]

如题，OP 在一家小公司。公司里面有几位前端，现在有前端对接蓝牙设备的需求。且通讯格式已经固定。

在最近他们开发时在百度或者 chatgpt 搜索如何编解码 16 进制，而且和其他前端讨论这个问题。

然后我就看到了令人震惊的代码，他们把收到的数组数据转成字符串，然后再通过截取字符，通过字符串匹配解码，或者在把这字符通过 parse 转为 实际的十进制

最离谱的是，当你问起为什么不用位运算，与或非，数组之类的。他们很有气势的说:前端不学进制转换。

离谱吧，当看到他们的命名更高血压，都是拼音首字母。不过！还好加了备注。

[815979670]

我见过最水的，我写的接口接受 post 参数，前端用 get 请求，我说换成 post 文档写的是 post 。下午前端还告诉我说请求不通，我过去瞅了一眼，用 post 请求 但传参还是 Get Query 。

因为这个是公司唯一的前端，当天下午我找领导说我不干不了要走（入职第二天，不敢想和这样的前端工作一年会不会被气死）

[sampeng]

太正常不过。前端不学二进制。前端不会二进制。前端不会串口通信。。就因为这三个不会，我司硬是整出来一个 golang 做中间件把串口转成 websocket 。喂到嘴里。
不排除有牛人。但 99%的。。抱歉。。。看不起。

[yolee599]

别说前端了，有的后端连 hex 字符串和 byte 数组也搞不清楚。16 个字节长度的密钥，经常直接只用了前面 16 个字符作为密钥，都不转为 byte

[liuhuihao]

别开地图炮，前端后端都有水货，和岗位没关系，只是你恰好碰到的水货是前端。
位运算这种东西平时用的少我觉得正常，前端用的少就更正常了，不过这个转成字符串确实是奇葩。。。不会的话查一下就好了。

[ltaoo1o]

不能从一个技术点上就否定某个人整体的技术水平，每个人都有自己不懂的点。

前端在数据处理尤其是二进制这块确实很差，这是前端业务特性导致的。只要他能很好地沟通流程、完成需求，做到自己应该做的，就不水

[InDom]

所以一个会 JS 的后端是夺末的重要‼️

CSS 我写不过你，JS 你不行得有人能顶上才行。

[qwertyzzz]

别开地图炮，前端后端都有水货 我后端也不会

[liuhuihao]

@sampeng 别从一个点就否定整个人，每个人都有自己不熟悉的领域。你说的这些东西前端平时接触少是事实，但你因为这个就瞧不起 99%的前端，有没有想过很多前端熟悉的领域你自己也不清楚呢

[liuzimin]

点进来前：我看看有多水，让我看看笑话。
点进来后：哦，这个我也不会。

[darkengine]

湖南人嘴角都有一颗痣吗？

[WasteNya]

你也说了，这是家小公司，厉害的哪会去这呀

[xiangyuecn]

没办法，php 也是这样，晚清时期都是用 ascii 字符串来表示二进制。还好到了现代 js 才有了 TypedArray ，比 php 处理二进制更方便点

太难教了，直接写几个函数照抄，ArrayBufferToBase64 Base64ToArrayBuffer ，NumberToArrayBuffer ArrayBufferToNumber ，ArrayBufferToHex HexToArrayBuffer 全家桶

https://xiangyuecn.github.io/Recorder/assets/%E5%B7%A5%E5%85%B7-%E4%BB%A3%E7%A0%81%E8%BF%90%E8%A1%8C%E5%92%8C%E9%9D%99%E6%80%81%E5%88%86%E5%8F%91Runtime.html?jsname=lib.js-binary-bytes

[sillydaddy]

我通过“嵌入式 奇技淫巧 sillydaddy” 搜索到了 v 友面试遇到的一个题目给楼主看能不能做出来：

“请用一个 C 语言表达式判断某个数是否为 2 的 N 次幂 ”

[wangtian2020]

前端确实用不到进制与非
我是在手搓了小端序读写后才发现 nodejs 里内置了 readInt16LE
人家拼音命名是菜了点，但是前端的事情你少管

人没有办法去熟悉自己不常用的东西

[ultimate42]

@xiangyuecn
感觉 99%的前端没有对接蓝牙的需求 我刚开始也搞了很久 没有 gpt 之前 网上能搜到的资料感觉也不多

[himozzie]

位运算效率高我们不否认，但前端的职责是更高效地完成需求，而不是硬套底层逻辑。如果非要按嵌入式的思路写，那你来前端搞一搞响应式布局、跨平台兼容和性能优化试试？不同领域有不同的开发习惯，技术选型要看团队和项目需求，强行按嵌入式标准衡量前端，那不如你们直接用 C 写前端？省得看不惯我们的实现方式。

[Building]

js 那破语言，搞不好你一顿优化真不如人家直接字符串来的省心，不了解的语言还是不要乱加评论，你以为很简单的事实际上一堆坑

[darkengine]

@sampeng 这个挺有意思，你们的前端页面是运行在浏览器的吗？是的话怎么通过浏览器跟串口通信？

[Marlon]

话说我问 chatgpt: JavaScript 编解码 16 进制 数据，给我答案是：在浏览器中，你可以使用 parseInt 和 String.fromCharCode 来手动实现 16 进制的编解码。doge

[darkengine]

@sampeng 查到了，是 Chrome.Serial

[magewu1223ll]

要是前端让你用 css 改个动画你不会，前端会笑你连动画都不会画吗？

[okakuyang]

术业有专攻罢了，不要动不动嫌弃别人。

[lanten]

正常用不到的技术不知道是正常的，但是有更优解不使用，别人好心提醒还不改正，这是态度问题

[coderlxm]

总感觉你们上班带着一股莫名的戾气，动不动就要挂人。我是比较友好的，再菜的人我都要教会他，因为我知道，十年前我也是个菜狗。

[to2false]

放心，后端大水逼也多的是

[Karte]

@liuhuihao 的确, 是我遇到的都是水货.

[randomstream]

会不会那些专注图像处理、音频处理才会特地学二进制处理？ 那我直接用其他语言写一个转换的接口

[musi]

所以这个操作有严重的性能问题么，不谈数据大小、不跑性能测试在这夸夸其谈性能效率真不是在耍流氓么
别到时候一顿操作猛如虎，还不如 v8 在底层帮你做的优化

[rivercherdeeeeee]

既然是前端，为什么要懂你说的这些东西，懂前端领域不就行了，懂了你能多给钱吗还是什么，最少的工资你要人家什么都要懂来服务你

[xiangbohua]

水都能说一两个你不知道的点出来，然后说后端真的可以这么水。脾气好能干活就行啊

[ThomasKim]

是否科班？什么学历？是否外包？薪资多少？加班情况如何？福利待遇如何？

抛开这些去讨论一个人的技术能力那不就是耍流氓吗？

再者，要怪你也要怪你们公司，为啥要怪这个人？是你们公司根据自己的筛选标准筛选了这个人，这个人有何罪之有？

一定要搞清楚真正的敌人，不要跟无辜的人盲目对立起来。

[humbass]

蓝牙用字符串通信没啥问题，很多硬件开发程序员的知识体系几十年没更新，有的协议是十进制 16 进制混着来的，别提多恶心。

[Karte]

@ltaoo1o 我并不觉得, 因为进制转换是计算机的入门课程

@liuhuihao @himozzie 的确术有专供, 但是进制转换不是计算机入门的课程吗? 而且这辐射所有计算机语言, 这不是术有专攻, 是基础不牢.
@darkengine 进制转换不是入门吗?

@Building 不聊性能, 我自己也通过 js 写出编解码的一个版本放在了 git 上.

[Karte]

@ltaoo1o 不, 当建议他们使用数组或者 UintArray 等进行规范化处理时, 他们说: 还不如我这个字符串呢?

[darkengine]

@Karte 进制转换不是入门吗?
-----
进制转换是入门，只能说你们公司的这几位比较水

[Karte]

的确, 心情太差了, 血压太高. 在这里先给前端同学说声对不住了.

[Marlon]

@Karte 我想看一下 js 写出编解码代码，能贴一个地址吗？

[Karte]

@ThomasKim 965, 无任何加班,薪资都在 16 左右.

[twofox]

我写这么多年 Java ，也没有用过进制、与或非。。一直都是 CURD boy 。但是有需要的话，还是能查一查，用起来的

[Karte]

@rivercherdeeeeee 他们薪资要的不低啊.

[binge921]

水的还是蛮多的 至少我的环境是这样 我现在就是 混就混吧 也过了掰头技术的年纪 只要别影响我就行了

[rivercherdeeeeee]

@Karte 世界本来就是个草台班子

[Karte]

@Marlon 协议是私有的,这个不好放出来. 大体结构就是如下:

接收的是 UintArrayBuffer

```javascript
function decode(buffer) {

var result = {
"success": true,
"message": "成功",
}

if (buffer.length < 15) {
result['success'] = false;
result['message'] = "数据长度不符合最低要求."
return result;
}

// 切除无效数据, 直到获取到指定字符.
while ((buffer[0] !== 0x00 || buffer[8] !== 0x00)) {
buffer = buffer.slice(0, 1);
}

if (buffer.length < 15) {
result['success'] = false;
result['message'] = "无有效数据."
return result;
}

var offset = 0;

// 长度
var dataLength = ((buffer[offset] << 8) | buffer[offset + 1]) & 0xFFFF;
offset += 2;

// CRC
var data = buffer.slice(offset, offset + dataLength);
offset += dataLength;

// 校验 CRC
var crc = (((buffer[offset] << 8) & 0xFF00) | (buffer[offset + 1] & 0xFF)) & 0xFFFF;
var calcCrc = _calculateCRC16(buffer.slice(0, offset));

//
if (crc !== calcCrc) {
result['success'] = false;
result['message'] = 'crc failed. receive: ' + crc + ", calculate: " + calcCrc
return result;
}

return {
"succes": true,
"message": "成功",
"hex": byte2Hex(buffer),
"decode": {

}
};
}
```

[weixind]

🤔 和你对接的大概率水平和工资都和你差不多。

[Cooooooode]

昨天还听朋友吐槽同事命名用 a,b,c 的

[Genshin2020]

位运算是我高中时候打算写一个贪吃蛇小游戏时候学的，

至于与或非，是了解电路的时候先知道这个概念的，然后写代码也有与或非就多去接触一下，发现和电路是一样的，到现在知道了计算机的与或非，电路是计算机的爸爸。

我是后端转的前端，转前端以后，几年内没和蓝牙对接过，等小程序出来以后，才开始用 JS 处理蓝牙信息。

我同事毕业后就是前端，她对这些确实欠缺一些，很多概念就是课本上的，实际使用就懵了。

我就写了一份很详细的文档，然后开个分享会，讲解前端是如何进行数据处理的，包括不仅限于后端擅自做主把 2 个字段合并成一个，让前端没有办法正常数据回显，蓝牙和各种协议的数据如何对接，和海康这种文档拉垮的玩意怎么进行联调。

可能是这样的事情做多了，有一天就成技术经理了。

然后一次裁员就把自己填上了，可算远离这帮大傻逼了。

哦耶。

[Genshin2020]

@Genshin2020 电路学习也是高中

[equationl]

楼上各位说的很对，不要因为一个技术点就否定一个人或一个岗位，毕竟每个人擅长的地方都不一样。

但是，前提是要能沟通啊，知道自己不会，你问人，你百度，你找 AI 都行，你至少得有点基本的分辨能力吧。

自己不会还要死鸭子嘴硬才是真的有问题。

譬如我司，有一个 Flutter 开发，昨天早上刚来上班，前端（有一部分功能是 H5 ，由 Flutter 提供 WebView 运行）开发就告诉他，某个模块需要调用原生拍照之后把照片传给 H5 ，但是现在 Flutter 传的是本地文件路径，H5 无法使用。

这个 Flutter 开发就炸锅了，咬死说 H5 可以使用，是前端自己不会写，并且举例说以前都是这样用的，以前都能用，你怎么不能用了。

前端让他传 blob ，他：传不了，我就只有这个字符串（文件路径），你爱要不要！

前端改口，行行行，那你上传到公司的 OSS ，把图片地址给我总行了吧，他：我这里上传之后拿到的是 OSS:// 的链接，怎么给你 HTTP 链接嘛，给不了！（上传文件用的第三方库，返回的地址是一个自定义的 OSS 地址，只要调 API 逆向一下就是 HTTP ，但是显然，他连文档都没看过，就一口咬定转不了 HTTP ）

从早上一直吵到下午四五点，还在吵。

前端无语了，都不和他啰嗦了，他可能觉得前端不理他就是理亏吧，于是像个胜利的大公鸡似的雄赳赳的去找前端负责人打小报告。

前端负责人过来了解了情况，明确告诉 Flutter 开发，H5 确实不能直接读取本地文件，你需要传二进制数据或者把文件编码成 base64 传字符串过来才行。

然后这个负责人指着我说，他以前和我们对接过类似的场景，你可以问他当时是怎么处理的（我是原生安卓开发）。

但是我可不想惹一身骚，所以我快速的给他说了一下 webview 是一个沙盒系统，是没有权限访问本地文件的，我当时那个场景文件不大，所以我是直接编码成 base64 之后传 base64 字符串给 H5 的。

果然，他打死不信，作势要和我大吵一架。

说着还打开以前的代码说，以前就是传的文件路径，怎么没问题？

我一看，笑死我，他所谓的以前都可以的代码只是拦截了 H5 的文件选择请求，然后由原生端处理文件选择，但是本质上还是由 H5 端发起的文件选择啊，和现在原生主动发文件给 H5 能是一回事？

我给他解释了，他还是不信，还一直在这里吵吵嚷嚷的。

我受不了，就给他说，你自己试一下不就知道了，然后就尿遁了。

等我遁完回来，他还在这里吵吵嚷嚷。

咱就是说，你不懂别人给你解释了你不信就算了，你自己不会求证吗？是百度要收钱还是谷歌要收钱啊？

[Karte]

@magewu1223ll 的确我不会动画. 但是进制就和阿拉伯数字一样, 在计算机行业中可以说是 "9 年义务教育" 的内容. 而动画则是之后的所要学习的不同行业知识.

[ztty]

@sillydaddy 除了符号位，有且只有一个 bit 是 1 就行

[v2ye]

你这样我就要找那张又不是不能用的图了。

[jspatrick]

在我的理解来看，大部分时候无论前后端，都是调包侠...

[whyrookie]

这个问题其实很多后端如果不用的话估计也不大明白，如果是非科班的，可能有个印象。

[yinxs2003]

有一说一，不用位运算我不觉得有啥，术业有专攻而已。PS：能解决问题的方案就是好方案

[whyrookie]

@whyrookie 如果是科班的

[Karte]

@twofox 只有偏底层的才需要这种运算, 其他时候基本上不需要. 不过在算法中进行数值替换一般会用到 ^

```go
old := 10
new := 11

old = old ^ new
new = old ^ new
old = old ^ new

fmt.Println("after OR values: ", old, new)
```

[azhong123]

无聊。。。工作而已。。。。。

[Karte]

@yinxs2003 的确, 解决是第一优先级. 但是在解决完成后, 需要考虑到是否可扩展, 是否清晰等因素二期重构. 否则就是💩

[pandaPapa]

用的 uni-app? 它自带那个编译器, 打印 Uint8Array 什么都看不到 , 必须得先转字符串才能看到 是不是因为这个?

[ltaoo1o]

@Karte

1 、我大学毕业 8 年了，有人问我一个高中化学题，我做不出来，他评价我「太水了，还大学生呢，这不是高中基础知识吗」
2 、放下助人情结 尊重他人命运

[Karte]

@pandaPapa 处理用 Uint8Array, 打印可以转成一条 hex. 我并不觉得是工具的原因.

[spritecn]

数组数据转成字符串，然后再通过截取字符，通过字符串匹配解码，或者在把这字符通过 parse 转为 实际的十进制
------------
到少实现了,这个事情对于很多前端可能根本实现不了,哈哈
还有这样对应协议文档里第几位 1 代表开 0 代表关, 这样的描述,理解成本是最低的

[Karte]

@ltaoo1o 放下了, 润!

[sky3hao]

不光前端, 什么端都能很水的, 还是看人.

[mainjzb]

就知道楼主要被喷。这类帖子基本都是攻击楼主，我可以菜，你不可以喷。
无非是几大理论：
1 、工作而已，混口饭吃
2 、这水平已经够了，你没见过更菜的
3 、能跑就行，要什么自行车

建议强者往上爬，开掉这些三脚猫。程序界寒冬将至，是时候淘汰一些人了。

[irisdev]

啊 hex 转 rgb 我一直弄成字符串转的，菜鸡本人了

[sampeng]

抱歉。我开地图炮了。我的锅。。是我表达偏激了。
我想表达的是。不会没关系。你倒是学啊。。这很难？就像 ls 的 @darkengine 这就是顺手的事啊，不说卷不卷，满足工作需要不是最基本的职业素养吗。我讨厌的是只知道喂嘴里的。不会就不看不学不了解，张嘴就是我不会搞不了。
二进制是个很难的东西么？任意一本编程语言开头就是二进制。瞄一眼很难？？ google 一下很难？哦。。。抱歉。这些人大概率是不用 google 的。百度没有就是不会。

我生气的时候最喜欢做的事就是别人问我的问题，我原话输到 google 里然后把第一条结果扔他脸上

[weixind]

@mainjzb

因为楼主在自己不懂的领域乱指点。

js 字符串和数字都内置了进制转换的方法。

[Karte]

@weixind 他们能写的相对标准, 做一个统一的编解码没问题. 但是现在是有好几套, 基本一个程序一套自己.

[yanqing07]

@darkengine #20 这才是学习的态度。虽然，我第一反应也是你一样的？前端串口？。但是，有时候太想那当然就学不了「新」知识，不要排斥别人提供的解决方案。

[pengtikui]

这么水怎么会跟你是同事呢？

[coderzhangsan]

不会或者不了解，我觉得这不是多大的问题，问题是没有学习的态度，尤其是涉及计算机专业基础知识，基础不牢地动山摇，很明显有些人只是为了 job 而工作，而有些人仅仅是对应用工具感兴趣，要不然前端娱乐圈是怎么来的。

[marcong95]

关于要对前端开地图炮的诸位请先反思一下为什么能跟这些这些水货一个公司。

不过，窃以为，进制转换印象中高中数学有教，如果你能确认这一点的话，针对说「前端不学进制转换」的可以使用：高中数学不听课，或者没上过高中数学进行人身攻击。不过位运算倒是高中数学没有教。但是位运算本质其实是命题逻辑，你也可以用高中数学相关论点进行人身攻击。

[Meld]

@pengtikui

建议少给互联网阴阳怪气这一套带过来，公司里同事水平起伏极大，我相信大家心里都有数，在这装外宾大可不必。

[Meld]

@pengtikui sry 刚才言语过激了。

[burnsby]

我觉得火药味还不够浓，火药味浓起来了麻烦踢我一下

[cheng6563]

我也来贴一个
npm i 很慢怎么办，多开几个一起跑，万一有一个成功的呢

还是很慢，我让他翻墙，然后他打开浏览器打开了一个翻墙扩展

[SupperCoder]

好巧，我给前端提供了一个转换十六进制的接口。。。

[bboring]

某天：A 提了一个需求，我一看，涉及到我的盲区，我说这个我需要去调研一下怎么实现；然后 A 骂我 rubbish 。

菜是原罪，可是不会的东西实在太多了，没有谁是全能的吧，但是不会我去学习、去研究也有错吗？

[Karte]

@bboring 对，这没问题。但前提是愿意去学

[iOCZS]

他们没啥问题，招他们进来的人有问题。

[w99wjacky]

@cheng6563 秀，太秀了。

[kuxuan]

初级的太多，我们组之前有 2 个前端，变量满天飞，乱命名。还不能说，技术撇态度还差。

[xz410236056]

@sampeng #2 前端也用 Buffer 、Uint8Array 啊。解码视频的话经常用二进制吧

[wei2629]

@liuhuihao #8 哈哈，我年轻的时候也这样。总以为知道一点别人不知道的就沾沾自喜，其实别人跟我的差距也就几份文档，没啥积累。而且总有我不知道的领域，他们脸红几次就知道收敛了。

[wenzhuo]

有一说一，前端数据类型本身就界限模糊，基本全都能自动转换为 String 类型，至于说将数组当作字符串接收，我能觉得他脑子有病。

[youngitachi]

说一个后端遇到的真实。Java 研发。有一天给我说遇到了一个神奇的事情
double a = 0.1, b = 0.2, c = 0.3;
然后他发现 a + b == c 居然返回 false ，觉得很不可思议。
我。。。？

[Marlon]

JavaScript 面试题
const buffer = [0x01, 0x02, 0x03, 0x04, 0x05, 0x06];
// 现在后端给了上面的数据是两位 16 进制数据
// 但是实际是三组 4 位 16 进制数据,即 buffer[0] 和 buffer[1] 为一组, buffer[2] 和 buffer[3] 为一组, buffer[4] 和 buffer[5] 为一组
// 最终把上面的数据转化为 三组 10 进制数据
const result = [];
// 这个写法通过面试
//将两个字节组合并转换为十进制的方法
function convertToDecimal(high,low){
//使用位运算将两个字节组合// high 左移 8 位,然后与 low 进行或运算
return(high << 8)| low;
}


for(let i=0;i< buffer.length;i+= 2){
const decimal= convertToDecimal(buffer[i], buffer[i+1]);
result.push(decimal);
}
//打印结果
console.log(result);

// 这个写法不通过面试
for (let i = 0; i < buffer.length; i += 2) {
var firstHex = `0x${buffer[i].toString(16).padStart(2, '0')}`
var secondHex = `buffer[i].toString(16).padStart(2, '0')`
var decimal = parseInt(firstHex + secondHex)
result.push(decimal);
}
//打印结果
console.log(result);

[SyncWorld]

我不信楼主全能，天下技术无所不精

[merlinliu1]

@coderlxm +1 ，感觉 OP 戾气很重的样子，感觉主要是对方没有采纳 OP 建议的原因导致 OP 发了一篇帖子吐槽他们水，并不是单纯的因为他们水

[cBlank]

前端水货比例高一点，都是计算机基础一般的，有时候有些网络通识我都懒得争辩。

[jimmyczm]

很多前端是培训班出来的混子

[WuSiYu]

@sillydaddy n & (n - 1)

[WuSiYu]

这种都不是科班出身的，不然不可能不会

[darkengine]

@yanqing07 虽然但是，我相信 OP 不止一次“撞墙”了。我们公司有一位这样的大牛，有次做个方案我连库都给他找好了，让他照着库的文档试一下，他说万一他们的文档是错的呢。。。。 😂

[fangxisama]

并不是所有开发都是科班出生的，大学里面会有数据结构和进制转换之类的课程，但培训机构不一定有。

但有一说一，现在水货程序猿也还是多，因为大多数开发，连盲打和指法都不会，这对于一个键盘工作者而言，不应该啊。

[ssgooglg]

我觉得，，还行

[erictang66]

我还见过只会用 Vue 的前端呢😏

[laobobo]

返回的是啥数据，我测试一下我是不是也很水

[york6666]

为什么会有这么多不会位运算，还这么理直气壮的。这不是计算机最最基础的东西吗，就相当于数学里面的 1+1 。不会串口可以理解，不会位运算，我实在理解不了。