侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

ES6 let和const定义变量与常量的应用实例分析

前端  /  管理员 发布于 5年前   404

本文实例讲述了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); // undefinedvar b = 12;// 上面的过程存在变量提升过程如下:/*var b;console.log(b);b = 12;*/
  • {} 块级作用域,子集可访问,外部不可访问
{ var a = 12; let b = 15; console.log(b); // 15}console.log(a); // 12console.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 '#'

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

  • JavaScript ES6中const、let与var的对比详解
  • JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
  • 深入浅出ES6之let和const命令
  • ES6新特性一: let和const命令详解
  • ES6入门教程之let和const命令详解
  • ES6入门教程之let、const的使用方法
  • ES6中let 和 const 的新特性
  • ES6数组与对象的解构赋值详解
  • ES6的解构赋值实例详解
  • ES6 对象的新功能与解构赋值介绍
  • 解析JavaScript的ES6版本中的解构赋值
  • ES6中let、const的区别及变量的解构赋值操作方法实例分析


  • 上一条:
    react 移动端实现列表左滑删除的示例代码
    下一条:
    浅谈目前可以使用ES10的5个新特性
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客