let命令

基本用法

我们都知道let命令是用来声明变量的,类似于var,但是通过let命令声明的变量只在所在代码块内有效。

let a = [];
for (let i = 0;i < 10; i   ) {
    a[i] = function () {
        console.log(i);
    }
}
a[5](); // 5

如上代码所示,使用的是let声明的i,那么这个变量仅在块级作用域内有效,即只在每轮循环内有效,所以每次循环的i其实都是一个新变量,所以最后输出了5。

如果使用了var去申明i,那么这个i是在全局范围内都有效的,函数数组里的i都会指向同一个i,导出最后输出的是最后一轮循环的i的值。

那就有了一个疑问,使用let声明的i如果每一轮都是一个新变量,那怎么知道上一轮循环的值然后计算出本轮的值?

这是因为JavaScript引擎内部会记住上一轮循环的值,初始化当次循环的i时,会在上一轮循环的基础上计算。

for循环还有一个特别的地方,就是设置循环变量的括号内是一个父作用域,而循环体内是一个单独的子作用域。

特性

不存在变量提升:

不存在变量提升我们应该都知道,在var命令中会发生“变量提升”,就是变量可以在声明之前使用,而值是undefined。这种是比较奇怪的现象,因为他都还没声明怎么就可以使用呢?

所以。let命令改变了这种语法,通过let声明的变量一定要在变量声明后才能用,不然就会报错。

console.log(b) // undefined
console.log(a) // 报错ReferenceError
let a = 2;
var b = 1;

暂时性死区

只要块级作用域内存在Let命令,那么这个let声明的变量就绑定了这个区域,不会受到外部的影响。

var num = 1;
if(true) {
    num = 2; // 报错,ReferenceError
    let num;
}

如上面代码所示,if代码块内想要修改的是if外部的num,但是if内部通过let声明了一个num但为赋值,所以导致了通过let声明的num绑定了这个块级作用域(即if内部这个块级作用域),所以不会受到外部的num影响,所以对num赋值会报错。

ES6明确规定了,如果在区块内存在let和const命令,那么这个区块对这些命令声明的变量从一开始就形成封闭的作用域,只要在声明之前就使用这些变量,就会报做。也称暂时性死区(temporal dead zone,简称TDZ)

当然,这也造成了typeof变得不安全了,因为如果一个变量没有声明就使用typeof不会报错,会返回一个undefined,但是现在不成立了,因为会报错ReferenceError。

function bar(x = y, y = 2) {
    return[x,y] 
}
bar() // 报错

如上代码所示,调用bar函数会报错,因为参数x的默认值等于另一个参数y,但是x在声明的时候y还没有声明,属于死区

总之,只要进入当前作用域,所要使用的变量就已经存在,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

其实let和const是存在变量提升的,但是由于暂时性死区的关系,变量已经存在了,但是不可获取,要等到声明变量的时候才可以获取和使用。

不允许重复声明

let不允许在校内共同作用域内重复声明同一个变量,这个就不用说了大家都知道。

let a = 1;
let a = 2; // 报错

const

我们都知道const声明一个只读的常量。修改这个值就会报错。但是实际上保证的不是变量的值不能改动,而是变量指向的那个内存地址不能改动。

对于简单数据类型来说,值就是保存在变量指向的内存地址中,因此等同于常量。

而对于复合类型的数据,变量指向的内存地址保存的是一个指针,const只保证指针是固定,不保证内部的结构是不是可变的。

    // 给对象添加一个属性
    const foo = {}
    foo.name = 123
    console.log(foo.name) // 123
    // 将foo指向另一个对象,就会报错
    foo = {} // 报错。

如果想要将对象冻结,可以使用Object.freeze

const foo = Object.freeze({});

特性

  • 只在声明所在的块级作用域内有效。
  • const声明的常量不会提升,同样存在暂时性死区,只能在声明后使用。
  • 不可重复声明。

补充——块级作用域

函数能不能在块级作用域中声明呢?

ES5中是规定函数只能在顶级作用域和函数作用域之中声明,不能在块级作用域声明。

ES6中引入了块级作用域,明确允许在块级作用域之中声明函数。而且。函数声明的语句的行为类似于let,在块级作用域之外不可引用。

function f() {
    console.log('I am outside!')
}
(function() {
    if(false) {
        function f() {
            console.log('I am inside')
        }
    }
}
f();
}())

上面的代码,在es5中运行时会得到I am inside!,因为if内部的f函数会被提升到函数头部。

但是在ES6环境则会报错,为什么呢?

因为游览器的实现有自己的方式:

  • 允许在块级作用域内声明函数
  • 函数声明类似于var,会提升到全局作用域或函数作用域的头部
  • 函数声明还会提升到所在的块级作用域的头部

所以上述代码实际在ES6的游览器中会生成这样的代码:

  function f() {
    console.log("I am outside!");
  }
  (function () {
    var f = undefined;
    if (false) {
      function f() {
        console.log("I am inside");
      }
    }
  })();

因此,应该避免在块级作用域内声明函数,如果确定需要写成函数表达式的形式,而不是函数声明语句。

到此这篇关于详细解析let和const命令的文章就介绍到这了,更多相关let和const内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

详细解析let和const命令的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)

    这篇文章主要介绍了Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  6. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  7. iOS 6 javascript与object.defineProperty的间歇性问题

    当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题?https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说

  8. ios – 如何使用JSExport导出内部类的方法

    解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.

  9. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  10. ios – 内存泄漏与UIWebView和Javascript

    清楚地包含一个Javascript文件到我的HTML是使UIWebView泄漏内存.当我重复使用相同的UIWebView对象时,或者每当我有内容实例化一个新的漏洞时,会出现泄漏的事实,导致我认为必须有一些JavaScript文件被loadHTMLString处理,导致泄漏.有人知道如何解决这个问题吗?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部