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 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python实现多线程抓取知乎用户
2016/12/12 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
情人节活动策划方案
2014/02/27 职场文书
前处理班长职位说明书
2014/03/01 职场文书
社区助残日活动总结
2014/08/29 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书