JavaScript ES6中const、let与var的对比详解
ECMAScript 6 新增 const 和 let 命令,用来声明变量。
声明方式 | 变量提升 | 作用域 | 初始值 | 重复定义 |
const | 否 | 块级 | 需要 | 不允许 |
let | 否 | 块级 | 不需要 | 不允许 |
var | 是 | 函数级 | 不需要 | 允许 |
变量提升:const 和 let 必须先声明再使用,不支持变量提升
console.log(c1, l1, v1); // 报错 // Uncaught ReferenceError: c1 is not defined const c1 = 'c1'; let l1 = 'l1'; var v1 = 'v1';
作用域:const,let 支持块级作用域,有效避免变量覆盖
const c21 = 'c21'; let l21 = 'l21'; var v21 = 'v21'; if (0.1 + 0.2 != 0.3) { const c21 = 'c22'; let l21 = 'l22'; var v21 = 'v22'; console.log(c21, l21, v21); // 输出 c22 l22 v22 } console.log(c21, l21, v21); // 输出 c21 l21 v22
块级作用域,在外层不能直接访问内层变量
if (0.1 + 0.2 != 0.3) { const c22 = 'c22'; let l22 = 'l22'; var v22 = 'v22'; console.log(c22, l22, v22); // 输出 c22 l22 v22 } console.log(c22, l22, v22); // 报错 // Uncaught ReferenceError: c22 is not defined // 同样地, l22 is not defined
const 定义常量,该常量不能赋值,但该常量的属性可以赋值
const c231 = {}; const c232 = []; c231.name = 'seven'; c232.push(27); console.log(c231, c232); // 输出 {name: "seven"} [27] // 禁止给对象赋值,应该使用 Object.freeze const c233 = Object.freeze({}); const c234 = Object.freeze([]); c233.name = 'seven'; // 普通模式下不报错 // 严格模式下报错 // Uncaught TypeError: Cannot add property name, object is not extensible c234.push(27); // 普通模式下就会报错 // Uncaught TypeError: Cannot add property 0, object is not extensible console.log(c233, c234); // 输出 {} []
全局变量不再设置为顶层对象(window)的属性,有效避免全局变量污染
const c24 = 'c24'; let l24 = 'l24'; console.log(c24, l24); // 输出 c24 l24 console.log(window.c24, window.l24); // 输出 undefined undefined
符合预期的 for 循环
for (var i = 0; i != 3; i++) { setTimeout(function() { console.log(i); },10); } // 依次打印 for (let i = 0; i != 3; i++) { setTimeout(function() { console.log(i); },10); } // 依次打印,为啥呢
可以看到在 for 循环中使用 let 方式声明变量才是符合预期。
在 for 中每一次循环,let 都是重新声明变量,并且因为 JavaScript 引擎会记住上一次循环的值,初始化 i 时在上一轮的基础上计算。
可以看到在 for 循环中至少有两层作用域,看下面的例子更容易理解。
for (let i = 0; i != 3; i++) { let i = 'seven'; console.log(i); } console.log('eight'); // 依次打印 seven seven seven eight
初始值:const 声明的变量必须设置初始值,且不能重复赋值。
const c3 = 'c3'; let l3 = 'l3'; var v3 = 'v3'; console.log(c3, l3, v3); // 输出 c3 l3 v3 c3 = 2; // Uncaught TypeError: Assignment to constant variable l3 = 2; v3 = 2; console.log(c3, l3, v3); // 输出 c3 2 2 const c32; // 报错 // Uncaught SyntaxError: Missing initializer in const declaration
重复定义:const 和 let 不支持重复定义
const、let 缩小了变量作用域,完美避免变量污染;const 固定变量(即固定变量类型),对于弱类型 JavaScript 来说,可以明显提升性能。推荐在应用中使用 const、let 声明变量。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
相关文章
- 这篇文章主要介绍了C#中var关键字用法,实例分析了C#中var关键字的应用场合,对于.NET的学习具有一定参考价值,需要的朋友可以参考下...2020-06-25
- 这篇文章介绍了c#中var关键字用法,有需要的朋友可以参考一下...2020-06-25
详解C# 匿名对象(匿名类型)、var、动态类型 dynamic
随着C#的发展,该语言内容不断丰富,开发变得更加方便快捷,C# 的锋利尽显无疑。下面通过本文给大家分享C# 匿名对象(匿名类型)、var、动态类型 dynamic,需要的的朋友参考下吧...2020-06-25- 这篇文章主要介绍了JDK10中的局部变量类型推断var,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-29
- 这篇文章主要给大家介绍了关于c#中object、var和dynamic的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- 这篇文章给大家介绍了C#中的var和dynamic的相关知识,var和dynamic的本质区别是类型判断的时间不同,前者是编译时,后者是运行时。具体内容详情大家通过本文学习下吧...2020-06-25
- C#中的很多关键词用法比较容易混淆,var和dynamic就是其中一组,他们都可以申明动态类型的变量,但是本质上他们还是有不少区别的,下面通过本文给大家介绍Dynamic和Var的区别及如何正确使用dynamic,需要的朋友参考下...2020-06-25
- 这篇文章主要介绍了Javascript var变量删除原理及实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-26
Android Studio / IDEA kotlin 显示 var 真实类型操作
这篇文章主要介绍了Android Studio / IDEA kotlin 显示 var 真实类型操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-25JavaScript ES6中const、let与var的对比详解
这篇文章主要给大家介绍了在JavaScript中const、let与var对比的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。...2017-06-24- 这篇文章主要介绍了JavaScript变量中var,let和const的区别,JavaScript中一共有3种用来声明变量的关键字,分别是var、let和const,文章通过围绕主题展开对三个关键词的详细介绍,需要的朋友可以参考一下...2022-09-14
javascript的var与let,const之间的区别详解
这篇文章主要为大家介绍了 javascript的var与let,const之间的区别,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>...2022-01-01- 这篇文章主要介绍了JavaScript变量or循环中的var和let详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下...2022-09-14
- 这篇文章介绍了C#中的var关键字用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2022-08-27
GoFrame通用类型变量gvar与interface基本使用对比
这篇文章主要为大家介绍了GoFrame通用类型变量gvar与interface基本使用对比,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-06-10