es(ecmascript)标准下中的let、var和const-编程思维

ES标准下中的let,var和const

  1. let会报重复声明,var则比较随意,重不重复无所谓

    // 使用 var 的时候重复声明变量是没问题的,只不过就是后面会把前面覆盖掉
    var num = 100
    var num = 200
    
    // 使用 let 重复声明变量的时候就会报错了
    let num = 100
    let num = 200 // 这里就会报错了
    
    // 使用 const 重复声明变量的时候就会报错
    const num = 100
    const num = 200 // 这里就会报错了
    
  2. var对变量预解析可以“先使用再定义”,而let和const则不行,也就是没有变量提升

    // 因为预解析(变量提升)的原因,在前面是有这个变量的,只不过没有赋值
    console.log(num) // undefined
    var num = 100
    
    // 因为 let 不会进行预解析(变量提升),所以直接报错了
    console.log(num) 
    let num = 100
    
    // 因为 const 不会进行预解析(变量提升),所以直接报错了
    console.log(num) 
    const num = 100
    
  3. “let先使用再定义”(补充上一条)

  4. var与window挂钩,会自动成为window的属性,let不会

    var name = 'dasha'
    let age = 12
    console.log(window.name)	//	dasha
    console.log(window.age)		//	undefined
    
  5. const定义常量,以上的都是叫变量,let和var都可以更改变量的值,const则不行

    let num = 100
    num = 200
    console.log(num) // 200
    
    const num = 100
    num = 200 // 这里就会报错了,因为 const 声明的变量值不可以改变(我们也叫做常量)
    
  6. const声明时必须赋值,否则就会报错

    let num
    num = 100
    console.log(num) // 100
    
    const num // 这里就会报错了,因为 const 声明的时候必须赋值
    
  7. let和const都会被代码块限制作用范围,而var只有函数才能限制范围,其他的不能限制

    // var 声明的变量只有函数能限制其作用域,其他的不能限制
    if (true) {
        var num = 100
        }
    console.log(num) // 100
    
    // let 声明的变量,除了函数可以限制,所有的代码块都可以限制其作用域(if/while/for/...)
    if (true) {
        let num = 100
        console.log(num) // 100
    }
    console.log(num) // 报错
    
    // const 声明的变量,除了函数可以限制,所有的代码块都可以限制其作用域(if/while/for/...)
    if (true) {
        const num = 100
        console.log(num) // 100
    }
    console.log(num) // 报错
    

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/waterrec/p/16850345.html

前端设计模式——解释器模式-编程思维

解释器模式(Interpreter Pattern):是一种行为型设计模式,它可以用来解决一些特定问题,例如编译器、计算器等等。这种模式定义了一个语言的语法,并用一个解释器来解释语言中的表达式。 解释器模式可以用来处理例如数据格式化、表单验证等业务场景。在这些场景中,我们需要定义一些语法规则,然后使用解释器来解释这些规

前端设计模式——享元模式-编程思维

享元模式(Flyweight Pattern):是一种用于优化对象创建和管理的设计模式。它旨在减少内存消耗和提高性能,通过共享具有相同状态的对象来实现这一目标。 具体来说,享元模式涉及两个主要的对象:享元工厂和具有共享状态的享元对象。享元工厂负责创建和管理共享对象,以确保每个对象只被创建一次。享元对象则包含需要共享的状

介绍一下requestanimationframe和requestidlecallback-编程思维

当我们需要执行动画或其他高性能操作时,常常会遇到以下问题: - 任务的执行频率过高,对 CPU 和内存造成了大量的压力。- 任务的优先级较高,导致其他任务无法及时得到处理。 为了解决这些问题,JavaScript 提供了两个调度 API:requestAnimationFrame 和 requestIdleCall

h5海报制作实践-编程思维

引言 年后一直处于秣马厉兵的状态,上周接到了一个紧急需求,为38妇女节做一个活动页,主要功能是生成海报,第一次做这种需求,我也是个半桶水前端,这里将碰到的问题、踩的坑,如何解决的分享给大家,讲的不到位的地方还望斧正。 效果展示 目前活动还是在线状态,这里是最后生成海报的效果,扫描二维码就可以进入页面。 实现方案 起初

看看你的正则行不行——正则优化一般的json字符串-编程思维

json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示 首先是对输入进行转换,如果是对象则转化为规范的json字符串,不是对象时,先将字符串转化为对象(防止不规范的字符串)

浅谈array --javascript内置对象-编程思维

Array --JavaScript内置对象 描述 可以用一个变量存储多种数据类型的Array对象,Array不是关联数组,不能使用字符串作为索引访问数组元素,需要使用非负整数的下标访问数组中的元素。 和对象的某些特征很相似,例如:属性访问器一半相似,衍生出的使用 .call() 或者 .apply() 将数组方法赋予

vue2数据驱动渲染(render、update)-编程思维

上一篇文章我们介绍了 Vue2模版编译原理,这一章我们的目标是弄清楚模版 template和响应式数据是如何渲染成最终的DOM。数据更新驱动视图变化这部分后期会单独讲解 我们先看一下模版和响应式数据是如何渲染成最终DOM 的流程 Vue初始化 new Vue发生了什么 Vue入口构造函数 function Vue(o

以前端视角,漫谈「云端」-编程思维

作者:京东零售 郑炳懿 前言: 当今世界,云计算技术在快速发展,不断为我们带来新的应用场景和解决方案。作为一名前端开发者,了解云技术并掌握如何在前端中应用它们是必不可少的。本篇文章将介绍云计算技术的基本概念,并从前端角度探讨如何使用云技术提高应用的可扩展性、安全性、性能和用户体验。 一、云技术 1.1 什么是云技术 在

企业微信js sdk介绍和使用-编程思维

前言 企业微信JS-SDK是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包。 – 企业微信开发文档 https://developer.work.weixin.qq.com/document/path/90513 所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名),且可信域名必须有ICP备案且在

微信sdk的集成和使用-编程思维

微信JS-SDK集成与使用 绑定域名 登录微信公众平台进入"公众号设置”的“功能设置”里填写“JS接口安全域名” Vue项目引入微信JS-sdk 方式一: 使用 npm install weixin-js-sdk 方式二:在Vue项目下public文件夹下的index.html页面,引入微信配置文件 ····