js前端命名中，临时变量如何命名

Question

有没有什么规范，或者有什么好的建议
比如说，
const data = [...dataSource]
const result = data.find()
这个data如何命名合适，_dataSource？_dataTmp

Answer 1

命名规范的核心是语义化，简单的说就是看到名称就知道这个变量保存的数据是啥 —— 当然要做到这一点实属不易。

这里 data 和 dataSource 在一定语境下可能意义会比较明确，但就在这里是看不出来的。所以，怎么取名，关键在于

dataSource 表示什么？
dataTemp 又表示什么？
data 表示什么？

举个例子，数据 fetch 自后端，需要经过初步过滤掉一些状态不对的数据，然后找出其中第一个，从这个意义上来说

const fetchedData = await fetch();   // 从后端拿数据
const validData = fetchedData.filter(...);   // 过滤出有效数据
const firstValidData = validData[0];   // 第 1 项有效数据

注：过滤和找出第 1 个可以用 find() 一步实现。这里不演示逻辑，只是为了演示对临时变量如何命名。

或者，干脆就直接一次到底，直接不需要中间变量

const firstValidData = (await fetch()).filter(...)[0];

如果确实想不出来名字，就用通用一点的名字也可以，写个注释就好，比如

// 第一个有效数据
const data = ...

但是这种情况一定要配合另一条代码规范使用：符合单一职责原则的短小代码。如果代码过长，看代码的时候不能一眼看到注释，就会影响阅读。另外还需要注意的一点就是，一个变量尽量只保证一个数据，也就是变量名（注释）能准确说明其中保存的是什么，尽量不要把一个变量用于保存各种不同的东西。比如下面就是一个反例

let str = "nameOfSomeone";
...
str = "someMessage";
...
str = "encodedResult";

如果代码比较长的情况，中间看到 str，它是什么呢？

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

如果你只在变量声明的地方，包括前后三五行不会超过一屏的地方使用，其它变量也都已经良好命名了，那么偶尔用一下 data，tmp 也无妨。

Answer 3

或许你可以省略掉这个变量？直接去使用？

一般来说还是会和团队规范挂钩，或者和当前的环境挂钩。比如说 tableData，dialog，之类的。

或者是 userList、userItem 这种。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

按习惯正常命名就足够了，特殊场景下需要强调含义，一行注释反而更方便