ES6 let和const定义变量与常量的应用实例分析


Posted in Javascript onJune 27, 2019

本文实例讲述了ES6 let和const定义变量与常量的应用。分享给大家供大家参考,具体如下:

关于 let

  • let是小作用域的变量的声明
{
  var a = 12;
  let b = 15;
  {
   console.log(a); // 12
   console.log(b); // 15
  }
}
  • let 是块级作用域,不会被提升;var是函数级的变量,存在变量提升,外部可访问
console.log(a); // Uncaught ReferenceError: a is not defined,直接报错
let a = 12; // let定义的变量不能进行变量的提升
console.log(b); // undefined
var b = 12;
// 上面的过程存在变量提升过程如下:
/*
var b;
console.log(b);
b = 12;
*/
  • {} 块级作用域,子集可访问,外部不可访问
{
 var a = 12;
 let b = 15;
 console.log(b); // 15
}
console.log(a); // 12
console.log(b); // Uncaught ReferenceError: b is not defined
  • let 在for循环中有效, var 在for循环外仍有效
for(var i=0;i<5;i++) {}
console.log(i); // 5 
for(let m=0;m<5;m++){}
console.log(m); // Uncaught ReferenceError: m is not defined
  • 变量在外部定义后,在内部输出,然后再次使用let关键词声明,那么之前输出会【失效】报错
var a = 18;
var b = 10;
fun();
function fun(){
 console.log(b); // 10
 console.log(a); // Uncaught ReferenceError: a is not defined
 let a;
}
  • 使用let声明的变量唯一, 不能重复声明
let a;
var a; // Uncaught SyntaxError: Identifier 'a' has already been declared
  • {} 块级作用域等效于立即执行函数
var config = (function () {
 var res = [];
 res.push(1);
 res.push(2);
 res.push(3);
 return res;
})();
console.log(config); // [1,2,3]
let config;
{
 config = [];
 config.push(1);
 config.push(2);
 config.push(3);
}
console.log(config); // [1,2,3]
  • 严格模式下的函数不会被提升
'use strict';
function a(){console.log(1);}
(function () {
 a(); // 去除'use strict' 之后 报错:a is not a function,加上'use strict'之后正常,输出1
 if(false) {
  function a(){console.log(2);} // 此处重新声明和赋值了一个a函数,上面输出1的时候表示没有被提升
 }
})();
  • 使用var在for循环中定义的变量保持最后一个值的状态
var arr = [];
for(var i=0;i<5;i++) {
 arr.push(function () {
  console.log(i);
 })
}
arr[1](); // 5
  • 使用var在for循环中定义的变量可使用自执行函数和闭包维持变量的状态
var arr = [];
for(var i=0;i<5;i++) {
 arr.push((function (i) {
  return function () {
   console.log(i);
  }
 })(i));
}
arr[1](); // 1
  • 使用let在for循环中定义的变量可自动维持变量的状态
var arr = [];
for(let i=0;i<5;i++) {
 arr.push(function () {
  console.log(i);
 })
}
arr[1](); // 1

关于 const

  • 所有属性同let
  • 使用const定义的是常量不可被修改,而指针对象的地址不可被修改,其属性可以被修改
const a = {
 name:'J'
};
a.name = 'Z';
a.age = 10;
console.log(a); // {name: "Z", age: 10}
a = {}; // 尝试修改引用的地址
console.log(a); // Uncaught TypeError: Assignment to constant variable.
  • 使用Object的freeze进行冻结对象, 严格模式下会报错,非严格模式下无法修改
const a = {
 name:'K'
}
a.age = 13;
console.log(a); // {name: "K", age: 13}
Object.freeze(a);
a.age = 14;
console.log(a); // Uncaught TypeError: Cannot assign to read only property 'age' of object '#<Object>'

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的弹出框插件
Mar 18 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 #Javascript
微信小程序实现form表单本地储存数据
Jun 27 #Javascript
ES6 class的应用实例分析
Jun 27 #Javascript
ES6 Promise对象的应用实例分析
Jun 27 #Javascript
使用Vue 实现滑动验证码功能
Jun 27 #Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 #Javascript
javascript触发模拟鼠标点击事件
Jun 26 #Javascript
You might like
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
跟单文员岗位职责
2014/01/03 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
个人总结格式范文
2015/03/09 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
win10更新失败无限重启解决方法
2022/04/19 数码科技