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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
浅谈Web Storage API的使用
Jun 23 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
python中根据字符串调用函数的实现方法
2016/06/12 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Django中Model的使用方法教程
2018/03/07 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
python实现操作文件(文件夹)
2019/10/31 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python @property及getter setter原理详解
2020/03/31 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
《十六年前的回忆》教学反思
2014/02/14 职场文书
春节联欢会主持词
2014/03/24 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
运动会3000米加油稿
2015/07/21 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers