• 前端面试题:JS中的let和var的区别


    最近很多前端的朋友去面试被问到let和var的区别,其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别。我简单总结一下,以便各位以后面试中使用。

    ES6 新增了let命令,用来声明局部变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束。

    先看个var的常见变量提升的面试题目:

    题目1:
    var a = 99;            // 全局变量a
    f();                   // f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。 
    console.log(a);        // a=>99,  此时是全局变量的a
    function f() {
      console.log(a);      // 当前的a变量是下面变量a声明提升后,默认值undefined
      var a = 10;
      console.log(a);      // a => 10
    }
    
    // 输出结果:
    undefined
    10
    99

    如果以上题目有理解困难的童鞋,请系统的看一下老马的免费JS高级视频教程

    ES6可以用let定义块级作用域变量

    在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。
    例如:

    { 
      var i = 9;
    } 
    console.log(i);  // 9
    ES6新增的let,可以声明块级作用域的变量。
    
    { 
      let i = 9;     // i变量只在 花括号内有效!!!
    } 
    console.log(i);  // Uncaught ReferenceError: i is not defined

    let 配合for循环的独特应用

    let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。看一个常见的面试题目:

    for (var i = 0; i <10; i++) {  
      setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
        console.log(i);        // 执行此代码时,同步代码for循环已经执行完成
      }, 0);
    }
    // 输出结果
    10   共10个
    // 这里面的知识点: JS的事件循环机制,setTimeout的机制等

    如果把 var改成 let声明:

    // i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。
    for (let i = 0; i < 10; i++) { 
      setTimeout(function() {
        console.log(i);    //  i 是循环体内局部作用域,不受外界影响。
      }, 0);
    }
    // 输出结果:
    0  1  2  3  4  5  6  7  8 9

    let没有变量提升与暂时性死区

    let声明的变量,不存在变量提升。而且要求必须 等let声明语句执行完之后,变量才能使用,不然会报Uncaught ReferenceError错误。
    例如:

    console.log(aicoder);    // 错误:Uncaught ReferenceError ...
    let aicoder = 'aicoder.com';
    // 这里就可以安全使用aicoder

    ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
    总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

    let变量不能重复声明

    let不允许在相同作用域内,重复声明同一个变量。否则报错:Uncaught SyntaxError: Identifier 'XXX' has already been declared

    例如:

    let a = 0;
    let a = 'sss';
    // Uncaught SyntaxError: Identifier 'a' has already been declared

    总结

    ES6的let让js真正拥有了块级作用域,也是向这更安全更规范的路走,虽然加了很多约束,但是都是为了让我们更安全的使用和写代码。

    顺便打个小广告,老马目前专注于做线下的IT全栈实习,不8000就业不还实习费,如果有需要的请关注一下: aicoder.com

    老马录制的免费在线视频教程: qtxh.ke.qq.com

    作者:FlyDragon

    出处:http://www.cnblogs.com/fly_dragon/

    关于作者:专注于微软平台项目架构、管理和企业解决方案。如有问题或建议,请多多赐教!

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通malun666@126.com 联系我,非常感谢。

  • 相关阅读:
    开放源码的对象关系映射工具ORM.NET 插入数据 Insert/Update Data
    开放源码的对象关系映射工具ORM.NET 快档开发入门 Quick Start
    .NET 动态脚本语言Script.NET 开发指南
    开放源码的对象关系映射工具ORM.NET 删除数据 Deleting Records using ORM.NET
    .NET Remoting过时了吗?为什么公司的项目还是选择用.NET Remoting,而不是WCF?
    开放源码的对象关系映射工具ORM.NET 查看和显示数据 View and Display data using ORM.NET
    开放源码的对象关系映射工具ORM.NET 查询表 调用存储过程 增加自定义代码
    技术人生:坚持,每日一博
    CQRS:CQRS + DDD + MDP 实现快速应用程序开发
    NodeJs:Happy代码生成器,重构了代码,更新了文档,完善了示例,欢迎下载使用
  • 原文地址:https://www.cnblogs.com/liangziaha/p/15308101.html
Copyright © 2020-2023  润新知