一文详解JavaScript的变量,超详细,建议收藏!

2023-01-31 0 247

责任编辑首秀自「慕课网」,想介绍更多IT蔬果文本,开发人员圈高热闻,热烈欢迎高度关注!

译者|慕课网菁英客座教授 然冬

表达式是放置许多文本罐子

对新手,认知表达式是关键的劳特尔。

从预测表达式那个术语,能晓得他是两个能发生改变的量,这儿的量是代表者某一类

在 JavaScript 中,表达式是两个用以放置值的罐子,因此能对罐子中的值做修正。

每一表达式都有惟一的表达式名,采用表达式名来界定表达式。

一文详解JavaScript的变量,超详细,建议收藏!

1. 新闻稿表达式

在 JavaScript 中采用var关键字来新闻稿表达式。

var 放置数字用的表达式 = 996;console.log(放置数字用的表达式); // 输出:996代码块123

上述这段代码是申明了两个名为放置数字用的变量的表达式,因此将它的值设为996

采用 console.log,括号内放置表达式名,即可将表达式的值输出在控制台。

其中 // 后面的文本为注释,代码执行过程中会被忽略。

虽然采用中文作为表达式名在 chrome浏览器下没有报错,但是还是不提议采用。

常规场景中不会有采用中文名作为表达式的情况

所以上述例子中的表达式名不可取。

var number = 996;console.log(number); // 输出:996代码块123

放置数字用的表达式修正成 number ,执行结果是一样的。

2. 赋值

给表达式设置值的操作称为赋值操作。

2.1 最简单的赋值操作

var result = 0;console.log(result); // 输出:0代码块123

这是两个最简单的赋值操作,直接将值赋给表达式。

通常只有两个等号出现的情况下就存在赋值操作。

2.2 将计算结果赋值给表达式

var result = 2 + 3;console.log(result); // 输出:5代码块123

这也是两个赋值操作,只不过等号右边的 2 + 3 会被计算出结果(计算的方式和小学开始学习的自然数学一样),再赋给表达式 result

将上面那个例子做两个简单的改写:

2.3 让表达式也参与计算

var number1 = 2;var number2 = 3;var result = number1 + number2; // 2 + 3console.log(result); // 输出:5代码块123456

原本 2 + 3 这部分也能被表达式所代替,参与计算的是表达式中的值。

2.4 发生改变表达式的值

var string = 今天加班?;console.log(string); // 输出:今天加班?string = 福报!;console.log(string); // 输出:福报!代码块1234567

注意:

这儿赋给表达式的值和之前有点不一样,是中文文字。

当需要用表达式放置许多“字”的时候,就需要用单引号或者双引号将需要放置的字包裹。

通常单个字会称之为字符,多个字的时候称为字符串

这儿做个介绍,具体的会在后续数据类型章节详尽展开讨论。

这段代码运行后能在控制台观察到有两个输出,分别对应表达式的值。

代码很简单,先新闻稿了两个叫 string 的表达式,并赋值字符串今天加班?并输出,随后修正了他的值,重新赋值了字符串福报!

这是表达式最关键的两个特性:可变

3. 表达式的命名规范

在 JavaScript 中表达式名存在一定规范,所有表达式名必须符合这些规范,否则程序无法执行。

3.1 表达式名必须采用字母、下划线(_)、美元符号($)开头

尽管之前的例子有用到中文作为表达式名,但是是不推荐的。

// 不会报错但是不推荐var 数字 = 1;// 错误var 1number = 1;// 错误var number@a = 1;// 错误var num+aa = 2;//下面是正确的方式var number1 = 1;var _number = 1;var $number = 1;代码块12345678910111213

以上是许多简单的示例,能根据规则自己在控制台尝试寻找规则。

一文详解JavaScript的变量,超详细,建议收藏!

3.2 表达式对大小写敏感

// 这是两个不同的表达式var firstName = Hello;var firstname = hello;代码块123

以上是两个不同的表达式,在 JavaScript 中表达式是对大小写敏感的。

两个表达式名即便字母是相同的,但是大小写不同,就不能算做两个表达式。

3.3 无法采用关键字作为表达式名

关键字是指许多已经被 JavaScript预定义或者保留下来的文本,如新闻稿表达式用的关键字var 就不能作为表达式名。

var var = 1; // Uncaught SyntaxError: Unexpected token var代码块1

上面这段代码尝试着将 var 作为表达式,到控制台运行是会报错的。

4. 合理规范的表达式名

刚开始学习的读者,现在去深究如何命名两个表达式还有些尚早,因为结合了具体的需求场景才能体会到两个好的表达式名的关键性。能先在此做个介绍。

对表达式名,除了上面提到的表达式命名的规范,最需要注意的是给表达式起两个有意义的名字。

如求和:

var num1 = 1;var num2 = 2;var num3 = 3;var num4 = 4;var count = num1 + num2 + num3 + num4;代码块123456

其中numnumber的缩写,是很常用的一类缩写。

count则是总数,表示求和的结果。

如果将上述例子做如下修正:

var a = 1;var b = 2;var c = 3;var d = 4;var e = a + b + c + d;代码块123456

缺少了有意义的表达式名就比较难看出代码具体在做什么。当然这段代码本身意义就不大,场景太过简单。

刚才提到的缩写,其实也是要注意的一点,缩写上一定要采用通用的缩写,如含有fn表示两个功能或者函数,avg 表示平均值,pwd 表示密码,i18n 为国际化。

这些缩写比较通用,大部分开发者都能看得懂。随着编码经验的增加,会在他人代码里见到大量的缩写,从而累积到自己的大脑的缩写库中。

最后需要注意的一点是业务中尽量不要含有中文拼音或中文拼音的缩写,排开鄙视链的原因,最大的问题是会让表达式名变得冗长难懂。

以上文本在写 demo 或者测试功能的时候能不需要考虑,写 demo 等大部分情况是为了验证自己的猜想。

// 不合理的表达式名var ln = World; // last namevar zs = 0; // 总数var jinNianDeNianShouRu = 1999999999; // 今年的年收入代码块1234

以上是针对表达式名的意义展开的讨论。

还有需要注意的是表达式命名的格式,大部分前端开发人员会采用驼峰命名法,也是第两个字母小写,后续如果有新的单词来进行构成,单词的第两个字符都大写。

如:

var firstName = Hello;var lastName = world;var createAt = 1577895179196;var userInfo = 用户信息; // Info => Informationvar isPaidUser = 是否付费用户;代码块123456789

能见到上面的表达式,从构成表达式名的第二个单词开始,首字母都是大写,这是驼峰命名的格式,本 Wiki 所有表达式名采用的是这种格式。

当然还有大驼峰,是第两个字母也大写。

除此之外最常用的还有采用下划线分隔表达式,如user_info,还有按功能来划分的表达式名,如采用匈牙利命名法,这儿不再做展开。

5. 有关表达式的其他知识

5.1 表达式的默认值

表达式在新闻稿的时候,如果没有赋值,则表达式就会有两个默认值undefined

var total;console.log(total); // 输出:undefined代码块123

undefined 是一类是数据类型,具体文本能参考数据类型章节。

5.2 同时新闻稿多个表达式

采用两个 var 关键字就能直接新闻稿多个表达式。

var num1 = 0, num2 = 1;// 通常会换行,方便阅读代码var num3 = 2, num4 = 3, num5 = 4, num6, num7 = 6;代码块12345678

在两个表达式新闻稿后,采用逗号分隔,紧接着新闻稿下两个表达式即可。

通常采用两个 var新闻稿多个表达式的时候也会换行,方便后续阅读,并保持代码格式上的整洁清晰,防止一行过长。

5.3 表达式在 window 上

在最外层新闻稿的表达式(不包括 ES6 模块的情况),实际上是变成了 window 对象的两个属性。

var number = 996;console.log(number); // 输出:996console.log(window.number); // 输出:996代码块1234

上述代码执行后输出的两个文本是一样的,都为 996。有关 window 对象的文本能参考BOM 章节。

细心的读者应该会注意到最外层那个条件,因为表达式还有可能新闻稿在函数之中,函数有自己独立的作用域,通常在函数中采用 var 关键字新闻稿的表达式,只在函数中有效。

至于为什么能省略 window 直接访问到表达式,能参考作用域链章节。

5.4 不采用 var 关键字新闻稿的表达式

假如不采用 var 关键字,直接创建表达式并赋值:

total = 10;console.log(total); // 输出:10代码块123

在控制台运行后会发现其实并没有报错,输出的结果也正常。

在非ES6模块中,这样创建的表达式和采用 var创建的表达式除了不能提前采用之外,没有其他大的区别,会被直接作为 window 对象的属性,成为全局表达式。

即便是在函数或者其他存在块级作用域的环境中,这样新闻稿的表达式也会作为全局表达式。

5.5 连续赋值

var a = b = 1;代码块1

假如把上面这行代码拆开来能认知成是这样的:

b = 1;var a = b;代码块12

看似没什么问题,许多开发者也会用这种方式同时新闻稿多个表达式,但如果在函数或者独立的作用域中,b 就会成为全局表达式,造成全局命名空间的污染。

5.6 重复新闻稿表达式

按照之前说的,表达式在新闻稿的时候如果没有赋值,则会是undefined,那个规则在重复新闻稿的情况下不适用。

var num = 1;var num;console.log(num); // 输出:1代码块1234

观察上面那个例子输出的结果,能发现表达式 num 的值并没有发生改变。

但是如果重新新闻稿的同时做赋值操作,值就会发生改变。

var num = 1;var num = 3;console.log(num); // 输出:3代码块1234

那个例子输出的结果,是再次新闻稿并赋值后的值。

5.7 提前采用表达式

console.log(number); // 输出:undefinedvar number = 1;代码块123

那个例子先输出了 number 的值,再新闻稿并对其进行赋值。

代码并没有报错,但如果没有第二行新闻稿,只输出 number

console.log(number); // Uncaught ReferenceError: number is not defined代码块1

这样子会爆出表达式未定义的错误,说明表达式是能被提前采用,只是没有值,或者说是 undefined 默认值。

具体原因能参考执行上下文章节。

这儿简单的解释能认知成,在浏览器执行的时候,会把代码调整成如下样子:

var number;console.log(number); // 那个时候 number 还没有被赋值,所以输出 undefinednumber = 1;代码块12345

5.8 常量

常量是定义并赋值后再也不能修正的量,通常许多不会发生改变的量,如配置、物理值等会新闻稿为常量,在 ES6 之前是没有提供常量这一特性的。

但是根据常量自身的特性,定义赋值后不能被修正,就能通过许多方式来模拟常量。

第一类是采用约定的形式,通常常量都是大写,不同单词之间用下划线分隔。

var PI = 3.1415926535;var DB_ACCOUNT = root;var DB_PASSWORD = root;代码块1234

这种方式定义的常量本质上还是表达式,值还是能修正的,但因为命名格式采用国际惯例,一眼就能看出是常量,不会对其修正。

这种方式是最简单的方式,但不安全。

第二种方式是利用对象下属性的描述来控制可写性,将对象的属性设置为只读。

var CONFIG = {};Object.defineProperty(CONFIG, DB_ACCOUNT, { value: root, writable: false,});console.log(CONFIG.DB_ACCOUNT); // 输出:rootCONFIG.DB_ACCOUNT = guest;console.log(CONFIG.DB_ACCOUNT); // 因为不可被改写,所以输出:root代码块123456789101112

这种方式将常量都放在两个对象下,通过Object.defineProperty定义属性,设定其writablefalse,就能防止被改写。

但有两个问题,CONFIG自身那个对象可能被修正。

换两个思路,既然在最外层新闻稿的表达式是放在window上的,那能用那个方式往 window上挂不可改写的属性。

Object.defineProperty(window, DB_ACCOUNT, { value: root, writable: false,});console.log(DB_ACCOUNT); // 输出:rootDB_ACCOUNT = guest;console.log(DB_ACCOUNT); // 因为不可被改写,所以输出:root代码块12345678910

通常情况下 window 对象是不可被修正的,这样常量的安全系数就变得非常高,但缺点是可能性较差,通过一点修正能提升可读性。

var define = function(name, value) { Object.defineProperty(window, name, { value: value, writable: false, });};define(DB_ACCOUNT, root);define(DB_PASSWORD, root);代码块123456789

只要约定好采用 define 函数定义的都为常量即可。

还有两种方式,是结合Object.sealObject.freeze的特性来新闻稿常量。

前者能使对象不能再被扩充,但是所有属性还需要再手动设置不可写,后者能让对象不能扩充,属性也不能修正。

这儿对这两个原生方法不再做过多描述,有兴趣可以查阅相关 API 资料。

什么是表达式?

表达式是放置值的罐子。

表达式名存在许多命名规则:

表达式名必须采用字母下划线(_)美元符号($)开头;

表达式对大小写敏感;

无法采用关键字作为表达式名。

同时起表达式名的时候需要有意义,靠近上下文场景。

热烈欢迎高度关注「慕课网」,发现更多IT圈优质文本,分享蔬果知识,帮助你成为更好的开发人员!

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务