您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

JavaScript 变量

变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念。

变量就是存放一些容器

对于初学者,理解变量是重要的一环。

从分析变量这个名词,可以知道他是可以改变的量,这里的量就是代表某一种

在 JavaScript 中,变量就是用来存放值的容器,并且可以对容器中的值做。

每个变量都有唯一的变量名,使用变量名来区分变量。

在 JavaScript 中使用var关键字来声明变量。

var 存放数字用的变量 = ;

console.log(存放数字用的变量); // :996

上述这段就是申明了名为存放数字用的变量的变量,并且将它的值设为996

使用 console.log,括号内放置变量名,即可将变量的值在控制台。

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

虽然使用作为变量名在 chrome 浏览器下没有报错,但是还是不建议使用。

常规场景中不会有使用名作为变量的情况

所以上述例子中的变量名不可取。

var number = ;

console.log(number); // :996

存放数字用的变量number ,执行结果是一样的。

给变量设置值的操作称为赋值操作。

var result = ;

console.log(result); // :0

这是最简单的赋值操作,直接将值赋给变量。

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

var result =  + ;

console.log(result); // :5

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

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

var number1 = ;
var number2 = ;

var result = number1 + number2; // 2 + 3

console.log(result); // :5

原本 2 + 3 这部分也可以被变量所代替,参与计算的就是变量中的值。

var string = '今天加班?';

console.log(string); // :今天加班?

string = '福报!';

console.log(string); // :福报!

注意:

这里赋给变量的值和之前有点不一样,是。

当需要用变量存放一些“字”的时候,就需要用单引号'或者双引号"将需要存放的字包裹。

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

这里做个了解,具体的会在后续数据类型章节详细展开讨论。

这段运行后可以在控制台观察到有两个,分别对应变量的值。

很简单,先声明了叫 string 的变量,并赋值字符串今天加班?并,随后了他的值,重新赋值了字符串福报!

这是变量最重要的特性:可变

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

尽管之前的例子有用到作为变量名,但是是不推荐的。

// 不会报错但是不推荐
var 数字 = ;
// 
var 1number = ;
// 
var number@a = ;
// 
var num+aa = ;

//下面是正确的方式
var number1 = ;
var _number = ;
var $number = ;

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

// 这是两个不同的变量
var firstName = 'Hello';
var firstname = 'hello';

以上是两个不同的变量,在 JavaScript 中变量是对大小写敏感的。

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

关键字就是指一些已经被 JavaScript 预定义或者保留下来的,如声明变量用的关键字 var 就不能作为变量名。

var var = ; // Uncaught Error: Unexpected token 'var'

上面这段尝试着将 var 作为变量,到控制台运行是会报错的。

刚开始学习的读者,现在去深究如何命名变量还有些尚早,因为结合了具体的需求场景才能体会到好的变量名的重要性。可以先在此做个了解。

对于变量名,除了上面提到的变量命名的规范,最需要注意的就是给变量起有意义的名字。

如求和:

var num1 = ;
var num2 = ;
var num3 = ;
var num4 = ;

var count = num1 + num2 + num3 + num4;

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

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

如果将上述例子做如下:

var a = ;
var b = ;
var c = ;
var d = ;

var e = a + b + c + d;

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

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

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

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

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

// 不合理的变量名
var ln = 'World'; // last name
var zs = ; // 总数
var jinNianDeNianShouRu = ; // 今年的年收入

以上是针对变量名的意义展开的讨论。

还有需要注意的是变量命名的格式,大部分前端程序员会使用驼峰命名法,也就是第字母小写,后续如果有新的单词来进行构成,单词的第字符都大写。

如:

var firstName = 'Hello';

var lastName = 'world';

var createAt = ;

var userInfo = '信息'; // Info => Information

var isPaidUser = '是否付费';

可以见到上面的变量,从构成变量名的第二个单词开始,首字母都是大写,这就是驼峰命名的格式,本 Wiki 所有变量名使用的就是这种格式。

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

除此之外最常用的还有使用下划线分隔变量,如 user_info,还有按来划分的变量名,如使用匈牙利命名法,这里不再做展开。

变量在声明的时候,如果没有赋值,则变量就会有认值 undefined

var total;

console.log(total); // :undefined

undefined 是一种是数据类型,具体可以参考数据类型章节。

使用 var 关键字就可以直接声明多个变量。

var num1 = , num2 = ;

// 通常会换行,方便阅读
var num3 = ,
    num4 = ,
    num5 = ,
    num6,
    num7 = ;

在变量声明后,使用逗号分隔,紧接着声明下变量即可。

通常使用 var 声明多个变量的时候也会换行,方便后续阅读,并保持格式上的整洁清晰,防止一行过长。

在最外层声明的变量(不 ES6 模块的情况),实际上是变成了 window 对象的。

var number = ;

console.log(number); // :996
console.log(window.number); // :996

上述执行后的两个是一样的,都为 996。有关 window 对象的可以参考 BOM 章节。

细心的读者应该会注意到最外层这个条件,因为变量还有可能声明在之中,有自己独立的作用域,通常在中使用 var 关键字声明的变量,只在中有效。

至于为什么可以省略 window 直接访问到变量,可以参考作用域链章节。

假如不使用 var 关键字,直接创建变量并赋值:

total = ;

console.log(total); // :10

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

在非ES6模块中,这样创建的变量和使用 var 创建的变量除了不能提前使用之外,没有其他大的区别,会被直接作为 window 对象的,成为。

即便是在或者其他存在块级作用域的环境中,这样声明的变量也会作为。

var a = b = ;

假如把上面这行拆开来可以理解成是这样的:

b = ;
var a = b;

看似没什么问题,许多开发者也会用这种方式同时声明多个变量,但如果在或者独立的作用域中,b 就会成为,造成全局命名空污染。

按照之前说的,变量在声明的时候如果没有赋值,则会是 undefined,这个规则在重复声明的情况下不适用。

var num = ;
var num;

console.log(num); // :1

观察上面这个例子的结果,可以发现变量 num 的值并没有改变。

但是如果重新声明的同时做赋值操作,值就会改变。

var num = ;
var num = ;

console.log(num); // :3

这个例子的结果,就是再次声明并赋值后的值。

console.log(number); // :undefined

var number = ;

这个例子先了 number 的值,再声明并对其进行赋值。

并没有报错,但如果没有第二行声明,只 number

console.log(number); // Uncaught ReferenceError: number is not defined

这样子会爆出变量未定义的,说明变量是可以被提前使用,只是没有值,或者说是 undefined 认值。

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

这里简单的解释可以理解成,在浏览器执行的时候,会把调整成如下样子:

var number;

console.log(number); // 这个时候 number 还没有被赋值,所以 undefined

number = ;

常量就是定义并赋值后再也不能的量,通常一些不会改变的量,如配置、物理值等会声明为常量,在 ES6 之前是没有提供常量这一特性的。

但是根据常量自身的特性,定义赋值后不能被,就可以通过一些方式来模拟常量。

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

var PI = ;

var DB_ACCOUNT = 'root';
var DB_PASSWORD = 'root';

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

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

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

var CON = {};

Object.defineProperty(CON, 'DB_ACCOUNT', {
  value: 'root',
  writable: false,
});

console.log(CON.DB_ACCOUNT); // :root

CON.DB_ACCOUNT = 'guest';

console.log(CON.DB_ACCOUNT); // 因为不可被改写,所以:root

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

但有问题,CON自身这个对象可能被。

换思路,既然在最外层声明的变量是放在window上的,那可以用这个方式往 window上挂不可改写的。

Object.defineProperty(window, 'DB_ACCOUNT', {
  value: 'root',
  writable: false,
});

console.log(DB_ACCOUNT); // :root

DB_ACCOUNT = 'guest';

console.log(DB_ACCOUNT); // 因为不可被改写,所以:root

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

var define = function(name, value) {
  Object.defineProperty(window, name, {
    value: value,
    writable: false,
  });
};

define('DB_ACCOUNT', 'root');
define('DB_PASSWORD', 'root');

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

还有两种方式,就是结合Object.sealObject.freeze的特性来声明常量。

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

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

变量就是存放值的容器。

变量名存在一些命名规则:

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


联系我
置顶