JavaScript变量基本使用方法实例分析

首先我们需要理解什么是JavaScript变量，变量是一个容器，用于存储数据值。在JavaScript中创建变量时需要使用var、let或const关键字进行声明。

声明变量

1. var变量

使用var声明的变量在声明的时候没有值，我们可以在后面对其进行赋值，也可以在声明时直接赋值。var有全局作用域和函数作用域两种，而且var可以被重复声明。

var a = 10;               // 这里直接对变量a进行了赋值
var b;                    // 这里变量b在声明时没有赋值
b = 'hello world';        // 这里是后面对变量b进行赋值

1. let变量

使用let声明的变量可以在后面进行赋值，也可以在声明时直接赋值，let有块级作用域，不可以重复声明。

let a = 10;              // 这里直接对变量a进行了赋值
let b;                   // 这里变量b在声明时没有赋值
b = 'hello world';       // 这里是后面对变量b进行赋值

1. const变量

使用const声明的变量必须在声明时进行赋值，并且变量的值不能再次被改变，const同样有块级作用域，不可以重复声明。

const a = 10;           // 这里直接在声明时对变量a进行了赋值
const b = 'hello';      // 这里直接在声明时对变量b进行了赋值
// 这里会报错 TypeError: Assignment to constant variable.
a = 20;

变量的作用域

JavaScript中变量的作用域分为全局作用域、函数作用域和块级作用域。

全局作用域：在函数外声明的变量拥有全局作用域，可以在代码的任何地方进行访问。

var a = 10;           // 这里变量a就拥有全局作用域

function test() {
    console.log(a);   // 在函数内部可以访问到全局变量a
}

test();              // 10

函数作用域：在函数内声明的变量拥有函数作用域，只能在函数内部进行访问。

function test() {
    var a = 10;       // 这里变量a拥有函数作用域

    console.log(a);   // 在函数内部可以访问到变量a
}

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

块级作用域：使用let和const声明的变量拥有块级作用域，只在当前块内部可访问。

{
    let a = 10;       // 这里变量a拥有块级作用域

    console.log(a);   // 在块内部可以访问到变量a
}

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

示例说明

1. 示例一：全局变量和局部变量的区别

var a = 10; // 使用var声明全局变量a

function test() {
    var a = 20;   // 使用var声明局部变量a
    console.log(a); // 输出局部变量a，结果为20
}

test();  // 调用test函数
console.log(a);   // 输出全局变量a，结果为10

在上面的代码中，全局变量a和test函数中的局部变量a不会冲突，test函数只会访问到局部变量a的值，因此调用test函数后输出的结果为20。

1. 示例二：使用let声明的变量有块级作用域

for (let i = 0; i < 5; i++) {
    console.log(i);   // 输出i的值
}

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

在上面的代码中，使用let声明的变量i拥有块级作用域，只能在for循环的代码块内部进行访问，因此最后一行代码会报错。而使用var声明的变量i，则可以在代码块外部访问。