JavaScript ES6中const、let与var的对比详解


Posted in Javascript onJune 18, 2017

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 声明变量。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 Javascript
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
vue router路由嵌套不显示问题的解决方法
Jun 17 #Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 #Javascript
js轮播图无缝滚动效果
Jun 17 #Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 #Javascript
vue-router单页面路由
Jun 17 #Javascript
You might like
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
通过C++学习Python
2015/01/20 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python如何实现动态数组
2019/11/02 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
C#基础面试题
2016/10/17 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
关于保护环境的标语
2014/06/09 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
师德师风培训感言
2015/08/03 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
高二语文教学反思
2016/02/16 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python