03月07, 2019

JS基础(2)——基本语法(2)——变量

接下来我们需要探讨一下对于任何编程语言来讲都是非常重要的一个东西,变量。所谓变量,就是用于引用内存中存储的一个值。当然,我们在使用变量之前,还需要先做的一件事儿就是声明变量。

2-2-1 声明变量

在 JavaScript 中声明变量的方式有3种:varletconst。其中var现在已经不推荐使用了,因为会有变量提升等问题。(后面我们会具体来探讨此问题)

constlet的区别在于,const所声明的变量如果是简单数据类型,那么是不能够再改变的。而let所声明的变量无论是简单数据类型还是复杂数据类型,在后面是可以改变的。示例如下:

const 声明变量:

const name = 'Bill';
name = 'Lucy';
// TypeError: Assignment to constant variable.

let 声明变量:

let name = 'Bill';
name = 'Lucy';
console.log(name);

2-2-2 变量的赋值与初始化

我们可以利用=来给一个变量进行赋值,给变量第一次赋值的过程,叫做变量的初始化。一般我们在声明变量的时候就会将变量给初始化,如下:

let a = 3;

当然我们也可以一次性初始化多个变量,将其写在一行里面。

let x = 3,y = 4,z = 5;

如果声明变量时没有赋予初值,那么默认值为undefined

let a;
console.log(a); // undefined

2-2-3 使用 var 声明变量

前面有提到过,在 JavaScript 中声明变量的方式有3种:varletconst。其中var现在已经不推荐使用了。这是因为使用var来声明变量会伴随着一些问题。当然,这些问题也经常被看作是 JavaScript 的一些特点。这里要介绍到的是重复声明遗漏声明

重复声明

如果是使用var关键字来声明的变量,那么是允许重复声明的。只不过这个时候会忽略此次声明。如果重新声明并且带有赋值,则相当于是重新赋值

重复声明不带有赋值操作,JavaScript 引擎会自动忽略后面的变量声明:

var test = 3;
var test;
console.log(test); // 3

重新声明时如果带有赋值操作,那么会进行一个数据的覆盖:

var test = 3;
var test = 5;
console.log(test); // 5

需要注意的是,重复声明仅仅是使用var关键字时可以这样。如果是在严格模式中,或者使用let或者const的话是会报错的。

遗漏声明

如果试图读取一个没有声明的变量的值,JavaScript 引擎会报错:

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

但是 JavaScript 引擎允许遗漏声明。即直接对变量赋值而无需事先声明,赋值操作会自动声明该变量:

{
    a = 5;
    console.log(a); // 5
}
console.log(a); // 5

2-2-4 作用域

所谓作用域,就是变量在程序中能够被访问到的区域。这里我们介绍一个全局作用域,一个局部作用域

1. 全局作用域

这是 JavaScript 引擎一进来就处于的运行环境。在全局作用域的中所声明变量称之为全局变量。全局变量的特点在于变量在任何地方都能被访问,如下:

let a = 5; // 这是一个全局变量

2. 局部作用域

在 JavaScript 中,一对大括号就可以产生一个局部作用域。局部作用域里面的变量称之为局部变量。既然是局部变量,那么就只能在这个局部的作用域里面能访问到,外部是访问不到的,如下:

{
    let i = 10;
    console.log(i); // 10
}
console.log(i);
// ReferenceError: i is not defined

顺带一提的是,在大括号中用var声明的变量不是局部变量,而是一个全局变量。这其实也是最早使用var来声明变量所遗留下来的一个问题,如下:

{
    var i = 10;
    console.log(i); // 10
}
console.log(i); // 10

在局部作用域里面,如果变量名和全局作用域里面的变量名冲突,优先使用局部作用域里面的变量:

let i = 10;
{
    let i = 100;
    console.log(i); // 100
}
console.log(i); // 10

如果在局部作用域里面声明变量时没有书写关键字,那么会声明一个全局变量:

{
    i = 10;
}
console.log(i); // 10

本文链接:http://www.yanhongzhi.com/post/js-basis-3.html

-- EOF --

Comments