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 lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
js获取和设置属性的方法
Feb 20 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
Bootstrap布局方式详解
May 27 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
ElementUI之Message功能拓展详解
Oct 18 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
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
php学习之 数组声明
2011/06/09 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
vue实现登录功能
2020/12/31 Vue.js
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python删除文本中行数标签的方法
2018/05/31 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python新手学习标准库模块命名
2020/05/29 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
募捐倡议书怎么写
2014/05/14 职场文书
奶茶店创业计划书
2014/08/14 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
应届毕业生求职信范文
2015/03/19 职场文书