发布于 1个月前

理解JavaScript的var, let和const使用与作用域

在JavaScript里,var,let和const都可以用来声明变量的。

var username= '张三';
let gender = 'Male';
const age = 20;

let,var和const的使用

let和var可以在声明后更改它们的值,并且在声明时不赋值,JavaScript会自动以默认值对它们做初始化。const声明的变量不能改变,也即是常量,声明变量时必须赋值。

var username= '张三';
let gender = 'Male';
const age = 20;

username= '翠花'; // 运行正常 
gender = 'Female'; // 运行正常
age = 18; // 报错TypeError: Assignment to constant variable.

let,var和const的声明不赋值示例

var username; // 运行正常,默认值为undefined
let gender ; //运行正常,默认值为undefined
const age; // 报错SyntaxError: Missing initializer in const declaration

const实际是声明了一个常量,有以下特点:

  • 如果值是对象,可以更改对象属性值,也可以添加其他属性。但不能重新赋值。
  • 如果值是数组,则数组中的值可以更改,但不能重新赋值。
  • 风格选择:为了和变量区分开,可以把const声明的常量用大写标识,如const PAHT = “/path”
// 对象常量
const user = {
  username: '张三',
};

user.username= '李四'; //修改常量user里的属性值
user.gender= 'Male'; // 给常量user添加gender属性
delete user.username; // 删除常量user的属性
user = {}; // 重新赋值,报错TypeError: Assignment to constant variable.

// 数组常量
const arr = [1, 2, 3];
arr.push(4); // 添加值
arr = []; // 重新赋值,报错TypeError: Assignment to constant variable.

声明变量或常量的作用域

变量的作用域决定了程序的哪些其他部分可以访问它。JavaScript 中的作用域分为三种类型:

  • 函数作用域
  • 块作用域
  • 全局作用域

函数作用域

在函数中声明的变量将具有函数作用域。无论是声明为 var、let 还是 const,它都只能在声明它的函数中访问。

// 函数作用域
function doSomething() {
  var username= '张三';
  let gender= 'Male';
  const age = 20;
}
doSomething();

console.log(username);
console.log(gender);
console.log(age );

因为这三个变量/常量是在函数doSomething中声明的,为函数作用域,所以在函数外调用报错:

Uncaught ReferenceError: username is not defined
   at <anonymous>:8:13

块作用域

使用大括号{}将代码包起来就创建了块作用域。块作用域对let,var,const影响是有区别的:

  • let 和 const 都不能在定义它们的块之外访问。
  • var可以在定义它的块之外访问。
// 块作用域
{
  var username= '张三';
  let gender= 'Male';
  const age = 20;
}

console.log(username); // 输出张三
console.log(gender); // 报错Uncauses ReferenceError: gender is not defined
console.log(age); // 报错Uncauses ReferenceError: age is not defined

for循环也构成了一个块作用域:

//var定义变量
for (var x = 0; x < 10; x++) {
  console.log(x); //输出0到9
}
console.log(x);// 输出10

//let定义变量
for (let y = 0; y < 10; y++) {
  console.log(y);  //输出0到9
}
console.log(y);
// 报错UnCauses ReferenceError: y is not defined

全局作用域

全局作用域是在函数作用域和块作用域之外声明的变量。 这些变量可以在 JavaScript 程序中全局访问。 尽量不要使用全局变量。 在 JavaScript 程序中拥有许多全局变量通常会导致无法预料的错误。

var username= '张三';
  let gender= 'Male';
  const age = 20;

// 函数作用域内变量可以使用
function doSomething() {
  console.log(username);    //输出张三
  console.log(gender);      //输出Male
  console.log(age );        //输出20
}
doSomething();

// 块作用域内变量可以使用
{
  console.log(username);    //输出张三
  console.log(gender);      //输出Male
  console.log(age );        //输出20
}

总结

  1. 声明变量使用let,尽量不要使用var,由于var可以超出块作用域,这样可能会导致程序中出现无法预料的错误
  2. 当确定值不会更改时,使用const,把它声明为常量。
©2020 edoou.com   京ICP备16001874号-3