精华内容
下载资源
问答
  • JavaScript中varlet区别

    千次阅读 2018-11-02 10:24:57
    JavaScript中varlet区别 ES6引入let关键字,在JS中varlet都是用来声明变量,var没有块级作用域,let有。let因为有了块级作用域,还会带其他的不同。 现在来具体举例说明下区别: 1、关于块级作用域 var a = ...

    添加链接描述

    今日头条:https://www.toutiao.com/i6535675554807415299/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1&from=singlemessage&timestamp=1541120454&app=news_article&utm_source=weixin&iid=44628601808&utm_medium=toutiao_android&group_id=6535675554807415299

    JavaScript中var与let区别

    ES6引入let关键字,在JS中var与let都是用来声明变量,var没有块级作用域,let有。let因为有了块级作用域,还会带其他的不同。

    现在来具体举例说明下区别:

    1、关于块级作用域

    var a = 0;

    {

    var a = 1;

    }

    console.log(a); // 1

    如果是let:

    let a = 0;

    {

    let a = 1;

    }

    console.log(a); // 0

    2、重定义同名变量

    var b = 1;

    var b = 2;

    console.log(b); // 2

    var b = 1;

    {

    var b = 2;

    }

    console.log(b); // 2

    如果是let:

    let b = 1;

    let b = 2; // 报错。Identifier ‘b’ has already been declared

    let b = 1;

    {

    let b = 2;

    }

    console.log(b); // 1

    3、变量提升

    var a = 1;

    function foo() {

    console.log(a); // undefined

    var a = 2;

    }

    foo();

    如果是let则抛异常。 a is not defined

    4、全局对象属性

    var a = 1;

    console.log(window.a, a); // 1,1

    如果是let:

    let b = 1;

    console.log(window.b, b); // undefined, 1

    5、for(含for-of、for-in)循环中的不同,let会创建一个新的作用域

    for (var i = 0; i < 3; i++) {

    setTimeout(function() {

    console.log(“setTimeout:”, i); // 3次3

    });

    }

    如果是let:

    for (let i = 0; i < 3; i++) {

    setTimeout(function() {

    console.log(“setTimeout:”, i); // 0,1,2

    });

    }

    这是为什么?每次都会声明新的同名变量吗?那怎么递增和怎么影响到外部呢?

    1.for(expression) 括号里面表达式是一个父级作用域

    2.for循环的每个迭代都会创建一个新的{}作用域块,也就有了块级作用域。新的块是基于前一个执行环境所创建,在初始化时会把变量声明和最新赋值都带过来(thisIterationEnv.InitializeBinding (bn, lastValue))。因此变量会跟着递增,同时如果修改了{}块中的变量也会影响到表达式作用域中的同名变量。但如果在{}块内显式地声明了同名变量,则此时变量修改就不会影响到父级。

    3.var允许重复声明覆盖外层同名的变量,let因为块级作用域所以不会覆盖父级同名的变量

    循环就像以下:

    var i = 1; i++;

    {

    var i = i; // i = 2

    setTimeout(function() {

    console.log(i); // 3

    }, 0);

    }

    i = 3;

    console.log(i); // 3

    如果是let:

    let i = 1; i++;

    {

    let i = 2;

    setTimeout(function() {

    console.log(i); // 2

    }, 0);

    }

    i = 3;

    console.log(i); // 3

    再看一段代码:

    for (let i = 0; i < 3; i++, console.log(“expression作用域:”, i)) {

    setTimeout(function() {

    console.log(“setTime function作用域:”, i);

    });

    let i = 10; // 删除这行试下

    i++;

    console.log(“for block作用域:”, i);

    }

    执行结果:

    JavaScript中var与let区别

    展开全文
  • JavaScript中let和var区别详解

    千次阅读 2020-07-06 15:10:05
    想要了解var(ES5)和let(ES6)区别,首先就要了解ES5下JS的变量提升 一、变量提升(声) 当浏览器开辟出供代码执行的栈内存后,代码并没有自上而下立即执行,而是继续做了一些事情:把当前作用域所有带var/...

    想要了解var(ES5)和let(ES6)区别,首先就要了解ES5下JS的变量提升

    一、变量提升(声)

    当浏览器开辟出供代码执行的栈内存后,代码并没有自上而下立即执行,而是继续做了一些事情:把当前作用域中所有带var/function关键字的进行提前的声明和定义 => 变量提升机制

    • 带var的只是提前声明(declare)var a;,如果只声明没有赋值,默认值是undefined
      例如:
    console.log(a);
    var a = 13;
    

    输出:undefined
    相当于:

    var a;		// 只声明没有赋值,默认为undefined
    console.log(a);
    a = 13;
    
    • 带function的不仅声明,而且还定义了(defined),准确来说就是让变量和某个值进行关联。

    二、let和var的区别

    1. letconst不存在变量提升机制

    创建变量的六种方式中:var/function有变量提升,而let/const/class/import都不存在这个机制

    2. var允许重复声明,而let不允许重复声明

    在相同的作用域(或执行上下文中)

    • 如果使用var/function关键词声明变量并且重复声明,是不会有影响的(声明第一次之后,之后再遇到就不会再重复声明了)
    • 但使用let/const就不行,浏览器会校验当前作用域中是否已经存在这个变量了,如果已经存在了,则再次基于let等重新声明就会报错

    在浏览器开辟栈内存供代码自上而下执行之前,不仅有变量提升的操作,还有很多其他的操作 => “词法解析”或者“词法检测”:就是检测当前即将要执行的代码是否会出现“语法错误 SyntaxError”,如果出现错误,代码将不会再执行(第一行都不会执行)

    console.log(1)  // => 这行代码就已经不会执行了
    let a = 12
    console.log(a)
    let a = 13      // => 此行出错:SyntaxError: Identifier 'a' has already been declared
    console.log(a)
    
    

    所谓重复就是:不管之前通过什么方法,只要当前栈内存中存在了这个变量,我们使用let/const等重复再声明这个变量就是语法错误。eg:

    console.log(a)
    var a = 12
    let a = 13  // => SyntaxError: Identifier 'a' has already been declared
    console.log(a)
    
    console.log(a)
    let a = 13
    var a = 12  // => SyntaxError: Identifier 'a' has already been declared
    console.log(a)
    
    3. let能解决typeof检测时出现的暂时性死区问题(let比var更严谨)
    console.log(a)
    // => ReferenceError: a is not defined
    

    typeof a 未报错

    console.log(typeof a)
    // =>  'undefined' 这是浏览器的bug,本应报错,因为没有a(暂时性死区)
    

    使用let后:

    console.log(typeof a)
    // => ReferenceError: Cannot access 'a' before initialization
    let a
    

    返回不能在a被定义之前使用它,解决暂时性死区问题。

    4. let创建的全局变量没有给window设置对应的属性

    首先看带var与不带var创建全局变量时的区别

    /*
     * 不带var的:相当于给全局对象window设置了一个属性a
     *      window.a = 13
     */
    a = 13
    console.log(a)  // => window.a 13
    /*
     * 栈内存变量存储空间
     *            b
     * 带var的:是在全局作用域下声明了一个变量b(全局变量),
     * 但是在全局下声明的变量也相当于给全局对象window增加了一个对应的
     * 属性b(只有全局作用域具备这个特点)
     */
    var b = 14
    console.log(b)
    console.log(window.b)
    

    不带var
    带var的
    使用let创建时:

    /*
     * 栈内存变量存储空间
     *   c
     * 带let的:仅仅在全局作用域下声明了一个变量b(全局变量),
     * 并未给全局对象window增加对应的属性c
     */
    let c = 15
    console.log(c)                          // => 15
    console.log(window.c)                   // => undefined
    

    let创建

    5. let会产生块级作用域

    经典例题指路:面试题总结2-大厂
    之“下面代码能否实现点击某个按钮,body的背景色改为按钮对应的颜色,若不能,如何改进(腾讯)”

    展开全文
  • Javascript中var和let间差异

    千次阅读 2017-03-30 10:30:10
    Javascript中var和let间差异 Javascript申明变量的方式有letvar、const三种不同方式。let和const行为在词法环境相同,但是var差异很大,var在早起被引入,现代Javascript一般不使用,但旧代码到处都是,本文详细...

    Javascript中var和let间差异

    Javascript申明变量的方式有let、var、const三种不同方式。let和const行为在词法环境中相同,但是var差异很大,var在早起被引入,现代Javascript一般不使用,但旧代码到处都是,本文详细说明,希望不让你迷惑。

    示例1 两者相同

    function sayHi() {
      var phrase = "Hello"; // local variable, "var" instead of "let"
    
      alert(phrase); // Hello
    }
    
    sayHi();
    
    alert(phrase); // Error, phrase is not defined
    

    示例2 两者不同

    下面是不同的,var没有块区域,仅为全局或函数区域,可以越过块区域。

    if (true) {
      var test = true; // use "var" instead of "let"
    }
    
    alert(test); // true, the variable lives after if
    

    如果我们使用 let 在第二行,在alter语句不能访问test百年来。但是var忽略代码块,所以我们其实申明test变量为全局变量了。

    对loop也是同样的,var不能是块区域或局部循环区域:

    for(var i = 0; i < 10; i++) {
      // ...
    }
    
    alert(i); // 10, "i" is visible after loop, it's a global variable
    

    如果代码块在函数里,那么var变成了函数级变量:

    function sayHi() {
      if (true) {
        var phrase = "Hello";
      }
    
      alert(phrase); // works
    }
    
    sayHi();
    alert(phrase); // Error: phrase is not defined
    

    如你所见,var穿过if,for或其他代码块,这时早期Javascript块没有词法环境,var是早起遗留产物。

    var在函数开始时处理

    var申明在函数(或脚本开始处,为全局变量)开始点处理。换言之,var变量在函数开始处被申明,无论其被定义在哪里(假设不是定义在嵌套函数里)。代码示例:
    function sayHi() {
    phrase = “Hello”;

      alert(phrase);
    
      var phrase;
    }
    

    与下面代码效果一样:

    function sayHi() {
      var phrase;
    
      phrase = "Hello";
    
      alert(phrase);
    }
    

    甚至在被忽略的代码块中:

    function sayHi() {
      phrase = "Hello"; // (*)
    
      if (false) {
        var phrase;
      }
    
      alert(phrase);
    }
    

    一般称这种行为叫“提升”,因为所有var被提升至函数顶端。所以,示例中if(false)段代码永远不被执行,但没关系,var被提升至函数顶部,所有示例中(*)行变量已经存在。

    申明被提升,但赋值没有提升
    演示示例如下:
    function sayHi() {
    alert(phrase);

      var phrase = "Hello";
    }
    
    sayHi();
    

    var = phrase = “Hello” 有两个动作
    1、申明变量 var
    2、变量赋值 =

    申明被提升至函数顶部,但赋值总是在原来的地方,所以代码实际效果如下:

    function sayHi() {
      var phrase; // declaration works at the start...
    
      alert(phrase); // undefined
    
      phrase = "Hello"; // ...assignment - when the execution reaches it.
    }
    
    sayHi();
    

    因为所有all申明被提升至函数顶部,所以我们能在函数内其他地方引用,但变量在赋值前是undefined。上面两个示例alert运行都没有错误。因为变量phrase已经存在,但有没有被赋值,所以显示undefined。

    总结

    针对var有两个主要差异:

    1、变量无块范围,最小可见范围是函数级。
    2、变量申明被提升至函数顶部。

    这种差异大多数情况不是好事,我们不能创建块级变量,占用更多内存;提升变量位置给错误提供更多空间。因此,一般新的脚本var通常很少使用。

    展开全文
  • 下面通过代码给大家介绍JavaScript中varlet、const区别,具体代码如下所述: //1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。 var a; console.log(a); //undefined //2.let是块级作用域,...
  • What we know is that…(英语作文万能开头) :在JavaScript中有三种声明变量的方式:varlet、const。 目录1.var2. let3. const 1.var (1)var定义的变量在之后可以修改,如果不初始化会输出undefined,不会报错...
  • JavaScript中有三种声明变量的方式:varlet、const。下文给大家介绍js三种定义变量的方式const, varlet的区别。 1.const定义的变量不可以修改,而且必须初始化。 const b = 2;//正确 // const b;//错误,...
  • var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest); //输出undefined }()); 2.使用未声明的变量,表现不同 //一个例子 (function() { console.log(varTest); //输出...
  • JavaScript中varlet和const的区别

    万次阅读 多人点赞 2018-07-14 15:04:05
    一、前言在ES6(ES2015)出现之前,JavaScript中声明变量就只有通过 var 关键字,函数声明是通过 function 关键字,而在ES6之后,变量声明的方式有 varlet 、 const 、 function 、 class ,本文主要讨论 var ...

    一、前言

    在ES6(ES2015)出现之前,JavaScript中声明变量就只有通过 var 关键字,函数声明是通过 function 关键字,而在ES6之后,声明的方式有 varletconstfunctionclass ,本文主要讨论 varletconst 之间的区别。

    二、var

    如果使用关键字 var 声明一个变量,那么这个变量就属于当前的函数作用域,如果声明是发生在任何函数外的顶层声明,那么这个变量就属于全局作用域。举例说明:

    var a = 1; //此处声明的变量a为全局变量
    function foo(){
       var a = 2;//此处声明的变量a为函数foo的局部变量
       console.log(a);//2
    }
    foo();
    console.log(a);//1

    如果在声明变量时,省略 var 的话,该变量就会变成全局变量,如全局作用域中存在该变量,就会更新其值。如:

    var a = 1; //此处声明的变量a为全局变量
    function foo(){
       a = 2;//此处的变量a也是全局变量
       console.log(a);//2
    }
    foo();
    console.log(a);//2

    注意:var 声明的变量存在提升(hoisting)。

    三、提升

    提升是指无论 var 出现在一个作用域的哪个位置,这个声明都属于当前的整个作用域,在其中到处都可以访问到。注意只有变量声明才会提升,对变量赋值并不会提升。如下例所示:

    console.log(a);//undefined
    var a = 1;

    该代码段跟下列代码段是一样的逻辑:

    var a;
    console.log(a);//undefined
    a = 1;

    而如果对未声明过的变量进行操作,就会报错

    console.log(b);//假设b未声明过,Uncaught ReferenceError: b is not defined

    四、let

    let 声明的变量,具有如下几个特点:

    1. let 声明的变量具有块作用域的特征。
    2. 在同一个块级作用域,不能重复声明变量。
    3. let 声明的变量不存在变量提升,换一种说法,就是 let 声明存在暂时性死区(TDZ)。

    如下面几个例子所示

    let a = 1;
    console.log(a);//1
    console.log(b);//Uncaught ReferenceError: b is not defined
    let b = 2;
    
    function foo(){
        let a = 1;
        let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared
    }

    以下是一个经典的关于 varlet 的一个例子:

    for (var i = 0; i < 10; i++) {
        setTimeout(function(){
            console.log(i);
        },100)
    };

    该代码运行后,会在控制台打印出10个10.若修改为:

    for (let i = 0; i < 10; i++) {
        setTimeout(function(){
            console.log(i);
        },100)
    };

    则该代码运行后,就会在控制台打印出0-9.

    五、const

    const 声明方式,除了具有 let 的上述特点外,其还具备一个特点,即 const 定义的变量,一旦定义后,就不能修改,即 const 声明的为常量。

    例如:

    const a = 1;
    console.log(a);//1
    a = 2;
    console.log(a);//Uncaught TypeError: Assignment to constant variable.

    但是,并不是说 const 声明的变量其内部内容不可变,如:

    const obj = {a:1,b:2};
    console.log(obj.a);//1
    obj.a = 3;
    console.log(obj.a);//3

    所以准确的说,是 const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的,只是变量标识符不能重新分配。

    六、总结

    1. var 声明的变量属于函数作用域,letconst 声明的变量属于块级作用域;
    2. var 存在变量提升现象,而 letconst 没有此类现象;
    3. var 变量可以重复声明,而在同一个块级作用域,let 变量不能重新声明,const 变量不能修改。

    展开全文
  • javaScript中varlet、const的区别

    千次阅读 2017-08-24 15:43:29
    javascript中有三种声明变量的方式:varlet、const。 1、var  之前我们在写js代码的时候都知道可以用var定义全局变量局部变量,也可以省略var,而且在非严格模式下不会报错,但是实际上在严格模式下,两者的...
  • 下面就是小编总结出的关于javascript中var与ES6规范中let、const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数var声明,其作用域是函数体的全部。 for...
  • 今天无意当中遇到了js的变量声明,发现除了var居然还有let声明方法,比较新奇,特地记录下来它们两者的区别!绝对能让你理解清楚,PS 后面有重头戏 思路 主要从四个角度来讲述它们的区别 变量提升 作用域 ...
  • 主要给大家介绍了在JavaScript中const、letvar对比的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。
  • 第一次接触let关键字,有一个要非常非常要注意的概念就是”javascript 严格模式”,比如下述的代码运行就会报错: let hello = 'hello world.'; console.log(hello); 错误信息如下: let hello = 'hello world.'; ...
  • JavaScript中 let var 定义变量说明

    千次阅读 2018-04-14 15:04:10
    语法let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];参数var1, var2, …, varN变量名。可以是任意合法的标识符。value1, value2, …, valueN变量的初始值。可以是任意合法的表达式。描述let...
  • 在讲let和var的区别前,我们先来了解一下JS声明变量的几种方式 在ES6之前,常用的声明变量的方式 var 如: var a = 12; function 如: function A(){…},function是定义一个函数,实际上也相当于是创建变量的一...
  • javascript中let和var的区别

    千次阅读 2019-02-22 13:50:10
    javascript中let和var的区别 程序媛萌小雪Mxx 0.12018.02.23 11:06*字数 584 let是es6新增命令,也是用来声明变量的,可能很多小伙伴都像我一样,定义变量的时候都会用var而很少用到let,那么,let和var到底有...
  • 微信小程序可以使用Javascript的最新ES6标准来开发所以微信小程序中varlet、const用法与区别可以视为Javascript ES6标准中varlet、const用法与区别 let命令 基本用法 ES6 新增了let命令,用来声明变量。它的用法...
  • ES6let const 都是用来声明变量的, 他们与 var 有所区别 let 命令 我们都知道在for循环,我们命名的变量 i 一般都只是为了在这个循环使用,才临时命名的, 我们希望循环结束后,这个变量就消失, 但是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 138,793
精华内容 55,517
关键字:

javascript中var和let

java 订阅