小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与「掘力星计划」，赢取创作大礼包，挑战创作激励金

内容如题，喝杯茶的功夫就可以学到新知识/复习旧知识啦！

敲重点

👉 萌新怎么理解变量呢？（一张图给你解释清楚）

👉 let $ = 1; 和 let _ = 2;是对的还是错的？

👉 常量是大写还是不大写？

👉 上期回顾：从0开始学习JavaScript

变量基础

变量是数据的“命名存储”。我们可以使用变量来保存一些信息。

怎么创建？

JavaScript使用关键字let创建变量，如

这个语句创建（或者说声明/定义）了一个名为“message”的变量

let message

怎么赋值？

利用运算符=给变量添加数据，如

let message;
message = 'Hello'; // 保存字符串

👇
或者直接合并为一行
👇

let message = 'Hello!'; // 定义变量，并且赋值

声明多个变量？

单行，用逗号隔开

let user = 'John', age = 25, message = 'Hello';

多行，用分号隔开

let user = 'John';
let age = 25;
let message = 'Hello';

关键字var和let一样是用来声明变量的，但是现在已经不推荐使用

类比理解变量

变量删除

我们可以在盒子里放任何值，并且值可以随意改变，当值改变时，之前的数据就从变量中删除了

let message;
message = 'Hello!';
message = 'World!'; // 值改变了
alert(message)

复制变量

可以声明两个变量，然后将其中一个变量的数据拷贝到另一个变量。

let hello = 'Hello world!';
let message;

// 将字符串 'Hello world' 从变量 hello 拷贝到 message
message = hello;

// 现在两个变量保存着相同的数据
alert(hello); // Hello world!
alert(message); // Hello world!

变量命名

JavaScript变量命名限制

变量名称必须仅包含字母，数字，符号 $ 和 _。
首字符必须非数字。

✅有效命名示例

let userName;
let test123;

let $ = 1; // 使用 "$" 声明一个变量
let _ = 2; // 现在用 "_" 声明一个变量
alert($ + _); // 3

❌错误命名

let 1a; // 不能以数字开始
let my-name; // 连字符 '-' 不允许用于变量命名

注：

1、变量命名区分大小写，如message和Message，是不同的两个变量

2、保留字无法用作变量命名，如let、class、return、function 都被保留了；

❌ let let = 5; // 不能用 "let" 来命名一个变量
❌ let return = 5; // 同样，不能使用 "return

更多保留字查看👉keywords

常量

常数（不变）变量，即永远不会改变的变量，使用关键字const声明

如果使用了const声明来了常量，它们将不能修改，否则会报错；

如：

//圆周率设置为常量
  const PI = 3.14; 
//如果尝试重新赋值
 ❌ PI = 4.66; //报错invalid assignment to const `PI'

常量的分类和命名规范

作为一个“常数”，首先是意味着值永远不变。其次，大致可以分为两种情况：

1、在执行之前就已知了（比如十六进制值的颜色，#000000，就代表的黑色）

2、在执行期间被“计算”出来，但初始赋值之后就不会改变。（比如页面的加载时间）

根据情况的不同，命名方式也有点区别：

情况一：建议使用【大写字母+下划线】

比如声明颜色常量：
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ……当我们需要选择一个颜色
let color = COLOR_ORANGE;
alert(color); // #FF7F00

优点：COLOR_RED一看就知道是红色，比#F00更好记，可以提高代码可读性。

情况二：使用常规的变量命名

const pageLoadTime = /* 网页加载所需的时间 */;

因为pageLoadTime 虽然是个常量，即值在赋值之后不会改变。但是他的值在页面加载之前是未知的，所以采用常规命名。

结语

文章会持续更新，优化，以及重构！

「本文已参加【掘力星计划】，在评论区参与讨论，就有机会参加【100份掘金周边】💥抽奖活动💥，徽章、拖鞋、马克杯、帆布袋等你来拿，👉活动详情」。

参考资料：

JavaScript Variables

🎨【点赞】【关注】不迷路，更多前端干货等你解锁

往期推荐

👉 来看看最新版的谷歌浏览器开发者工具都更新了些什么?

👉 layui镜像合集+怎么把人家整个网站拷贝下来的

👉 小程序template模板使用详解

详细说说JavaScript里的变量和常量

敲重点