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 相关文章推荐
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
JavaScript异步加载问题总结
Feb 17 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
详解datagrid使用方法(重要)
Nov 06 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
javascript 节点排序 2
2011/01/31 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
浅谈react前后端同构渲染
2017/09/20 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
自荐信的两点禁忌
2013/10/30 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
安全隐患整改报告
2014/11/06 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
学困生转化工作总结
2015/08/13 职场文书
财务年终工作总结大全
2019/06/20 职场文书
话题作文之呼唤
2019/12/18 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js