在ES6以前,JavaScript的变量定义只有var一种方式。在ES6中新增了let和const两种定义变量的方式。
JavaScript es6中var、let以及const三者区别案例详解
var、let和const简介
在ES6以前,JavaScript的变量定义只有var一种方式。在ES6中新增了let和const两种定义变量的方式。
- var定义的是一个可变的变量,它在函数作用域或全局作用域内都是有效的,并且可以被重新赋值。
- let定义的是一个块级作用域的变量,它只在块级作用域内有效,并且可以被重新赋值。
- const定义的也是一个块级作用域的变量,不同的是它定义的是一个常量,值在定义之后就不能被修改。
在JavaScript中,尽量使用let和const来定义变量,避免使用var。
示例1:全局作用域和块级作用域中变量的差异
//定义一个全局变量
var globalVariable = 'globalVariable';
//定义一个函数
function test() {
//定义一个函数作用域中的变量
var localVariable = 'localVariable';
console.log(globalVariable);//可以输出全局变量
console.log(localVariable);//可以输出函数作用域中的变量
}
test();
console.log(globalVariable);//可以输出全局变量
console.log(localVariable);//不能输出函数作用域中的变量,会报错
//使用let定义变量
let a = 10;
if(true) {
//使用let定义块级作用域中的变量
let a = 20;
console.log(a);//可以输出20
}
console.log(a);//可以输出10
输出结果:
globalVariable
localVariable
globalVariable
Uncaught ReferenceError: localVariable is not defined
20
10
从结果可以看到,全局变量和函数作用域中的变量在任何地方都可以被访问到,而let定义的变量只在定义的块级作用域中有效。
示例2:const定义的常量
//定义一个常量
const PI = 3.1415926;
//尝试修改常量的值
PI = 3;
console.log(PI);
输出结果:
Uncaught TypeError: Assignment to constant variable.
从结果可以看到,使用const定义的变量在定义之后就无法修改。
结论
- var定义的变量可以被重新赋值,而let和const定义的变量都不能被重新赋值。
- var定义的变量在函数作用域或全局作用域中都是有效的,而let和const定义的变量只在块级作用域中有效。
- const定义的变量在定义之后就不能被修改,而var和let定义的变量可以被修改。
- 在JavaScript中,尽量使用let和const来定义变量,避免使用var。
沃梦达教程
本文标题为:JavaScript es6中var、let以及const三者区别案例详解
基础教程推荐
猜你喜欢
- 浅谈Vue2和Vue3的数据响应 2023-10-08
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-28
- 浅析canvas元素的html尺寸和css尺寸对元素视觉的影响 2024-04-26
- this[] 指的是什么内容 讨论 2023-11-30
- js禁止页面刷新与后退的方法 2024-01-08
- vue离线环境如何安装脚手架vue-cli 2025-01-19
- JS前端广告拦截实现原理解析 2024-04-22
- 基于Vue制作组织架构树组件 2024-04-08
- CSS3的几个标签速记(推荐) 2024-04-07
- Ajax实现动态加载数据 2023-02-01
