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 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
js 小贴士一星期合集
Apr 07 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
js 实现碰撞检测的示例
Oct 28 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
js代码实现微博导航栏
2015/07/30 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
python开发之for循环操作实例详解
2015/11/12 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python用post访问restful服务接口的方法
2018/12/07 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python sqlite的Row对象操作示例
2019/09/11 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
一道输出判断型Java面试题
2014/10/01 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
网上商城创业计划书范文
2014/01/31 职场文书
租房协议书
2014/04/10 职场文书
幼儿园运动会口号
2014/06/07 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
免职通知
2015/04/23 职场文书
求职信如何撰写?
2019/05/22 职场文书