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 相关文章推荐
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 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
php 团购折扣计算公式
2011/11/24 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python中尾递归用法实例详解
2015/04/28 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python函数参数操作详解
2018/08/03 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python中无限循环需要什么条件
2020/05/27 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
小学运动会入场式解说词
2014/02/18 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
就业协议书样本
2014/08/20 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
庆七一活动简报
2015/07/20 职场文书
2015年店长个人工作总结
2015/10/23 职场文书