在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三者区别案例详解
基础教程推荐
猜你喜欢
- 在线FLV播放器实现方法 2024-01-06
- 一文总结Vue和React的异同 2023-07-10
- vue + typescript + 极验登录验证的实现方法 2024-01-05
- ajax请求后台接口数据与返回值处理js的实例讲解 2023-02-23
- 表单上传功能实现 ajax文件异步上传 2023-02-14
- vue打包成功后直接将文件上传到oss 2023-10-08
- Javascript之BOM(window对象)详解 2023-12-02
- ie6 z-index不起作用的完美解决方法 2023-12-22
- 初学者必看的Ajax总结篇 2023-01-26
- Ajax请求响应中用window.open打开新窗口被拦截的解决方法 2023-01-20