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中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
使用 JavaScript 制作页面效果
Apr 21 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实现的最大正向匹配算法示例
2017/12/19 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
浅析Git版本控制器使用
2017/12/10 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
中学教师培训制度
2014/01/31 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技