<i id='shFRL'><tr id='shFRL'><dt id='shFRL'><q id='shFRL'><span id='shFRL'><b id='shFRL'><form id='shFRL'><ins id='shFRL'></ins><ul id='shFRL'></ul><sub id='shFRL'></sub></form><legend id='shFRL'></legend><bdo id='shFRL'><pre id='shFRL'><center id='shFRL'></center></pre></bdo></b><th id='shFRL'></th></span></q></dt></tr></i><div id='shFRL'><tfoot id='shFRL'></tfoot><dl id='shFRL'><fieldset id='shFRL'></fieldset></dl></div>

      <tfoot id='shFRL'></tfoot>
      <legend id='shFRL'><style id='shFRL'><dir id='shFRL'><q id='shFRL'></q></dir></style></legend>

      <small id='shFRL'></small><noframes id='shFRL'>

      • <bdo id='shFRL'></bdo><ul id='shFRL'></ul>

    1. JavaScript变量声明var,let.const及区别浅析

      在JavaScript中,我们可以使用 var,let 和 const 关键字来声明变量,但这些关键字的用法和区别是比较容易混淆的。本文将对这三种关键字进行详细讲解。
            <bdo id='pgShZ'></bdo><ul id='pgShZ'></ul>

            <i id='pgShZ'><tr id='pgShZ'><dt id='pgShZ'><q id='pgShZ'><span id='pgShZ'><b id='pgShZ'><form id='pgShZ'><ins id='pgShZ'></ins><ul id='pgShZ'></ul><sub id='pgShZ'></sub></form><legend id='pgShZ'></legend><bdo id='pgShZ'><pre id='pgShZ'><center id='pgShZ'></center></pre></bdo></b><th id='pgShZ'></th></span></q></dt></tr></i><div id='pgShZ'><tfoot id='pgShZ'></tfoot><dl id='pgShZ'><fieldset id='pgShZ'></fieldset></dl></div>
            <legend id='pgShZ'><style id='pgShZ'><dir id='pgShZ'><q id='pgShZ'></q></dir></style></legend>

              <tbody id='pgShZ'></tbody>

            1. <small id='pgShZ'></small><noframes id='pgShZ'>

            2. <tfoot id='pgShZ'></tfoot>

                JavaScript变量声明var,let,const及区别浅析

                在JavaScript中,我们可以使用 var,let 和 const 关键字来声明变量,但这些关键字的用法和区别是比较容易混淆的。本文将对这三种关键字进行详细讲解。

                var

                在ES6之前,JavaScript中只有 var 这一个声明变量的关键字。var 关键字声明的变量作用域是函数级别的。

                function example1() {
                  var foo = 'hello';
                
                  if (true) {
                    var foo = 'world';
                    console.log(foo);//"world"
                  }
                  console.log(foo);//"world"
                }
                
                example1();
                

                在上面的例子中,即使变量 foo 在 if 语句块中已经定义过了,但由于 var 关键字声明的变量作用域是函数级别的,导致我们在函数内部的任何地方都可以访问到 foo 变量,所以在函数内部两次打印 foo 全部都是 "world"。

                使用 var 声明的变量,我们还可以重复声明,这种行为虽然是不推荐的,但毕竟语言本身允许,所以需要多加注意。

                function example2() {
                  var foo = 'hello';
                  var foo = 'world';
                
                  console.log(foo);//"world";
                }
                
                example2();
                

                let

                在ES6中,引入了一个新的关键字 let ,它声明的变量也是块级作用域的。

                function example3() {
                  let foo = 'hello';
                
                  if (true) {
                    let foo = 'world';
                    console.log(foo);//"world"
                  }
                
                  console.log(foo);//"hello"
                }
                
                example3();
                

                在上面的例子中,变量 foo 只在 if 语句块中被声明,在 if 语句块外部无法访问到。

                另外,使用 let 声明的变量不能重复声明,重复声明会导致语法错误。

                function example4() {
                  let foo = 'hello';
                  let foo = 'world';//Uncaught SyntaxError: Identifier 'foo' has already been declared
                }
                

                const

                const 也是在ES6中新增的一个关键字,它用于声明常量,常量也是块级作用域的,只能在定义时赋值,之后不能再修改它的值。

                function example5() {
                  const foo = 'hello';
                
                  if (true) {
                    const foo = 'world';
                    console.log(foo);//"world"
                  }
                
                  console.log(foo);//"hello"
                }
                
                example5();
                

                在上面的例子中,和 let 一样,变量 foo 只在 if 语句块中被声明,在 if 语句块外部无法访问到。而且由于 const 声明的常量不能再修改它的值,故再次赋值会导致语法错误。

                function example6() {
                  const foo = 'hello';
                
                  foo = 'world';//Uncaught TypeError: Assignment to constant variable.
                }
                

                区别浅析

                在实际开发中,尤其是开发大型应用时,对于变量的使用需要细心考虑。下面是它们的一些区别:

                1. let 和 const 声明的变量作用域为块级,而 var 声明的变量作用域为函数级别的,这会导致在需要访问变量的时候,let 和 const 会产生更多的垃圾数据,内存的消耗要更加大;

                2. let 声明的变量可以被修改,const 声明的常量不可被修改;

                3. 在同一个作用域内,var 声明的变量可以重复声明,let 和 const 声明的变量不能重复声明。

                在实际开发中,应该遵循合适的使用场景和最佳实践,选择合适的变量声明方式。比如:使用 let 或 const 可以防止变量声明提升带来的认知困难,也可以防止在代码中因为变量重名而导致的问题,但在需要使用全局变量时,可以使用 var 进行声明。

                示例

                下面我们通过一个实际的例子演示 var 和 let 在作用域上的区别:

                function example7() {
                  for (var i = 0; i < 5; i++) {
                    setTimeout(function() {
                      console.log(i);
                    }, i * 1000);
                  }
                }
                
                example7();
                

                在此例中,我们尝试使用闭包把变量 i 私有化。但是结果并不符合预期。

                这是因为 var 声明的变量作用域为函数级别的,而 setTimeout 异步函数是在 for 循环结束后才开始执行的,而此时 i 的值是 5,因此我们看到的输出结果是 5 5 5 5 5。

                接下来我们尝试改用 let 关键字进行声明。

                function example8() {
                  for (let i = 0; i < 5; i++) {
                    setTimeout(function() {
                      console.log(i);
                    }, i * 1000);
                  }
                }
                
                example8();
                

                在这个例子中,我们使用 let 声明变量 i,它的作用域是块级作用域,因此 i 的值在每个循环中都被重新声明,而 setInterval 异步函数会在每次循环中都重新执行,因此我们看到的输出结果是 0 1 2 3 4。

                总的来说,使用 let 和 const 更容易让我们写出比较优美、更健壮的代码,但使用 var 也是可行的。需要根据实际的情况进行抉择。

                本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

                相关文档推荐

                layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-
                Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150
                我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen
                https的网站如果引用百度地图,会出现加载不了的问题,这是因为涉及到跨域问题,网站是https的,但是引用百度地图的是http的,这个要怎么操作呢? 比如我引用的地址:http://api.map.baidu.com/api?v=2.0ak=AK显示 后来看了一下,少了一个s=1字段,加一下s=1
                做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码: van-field value="{{form.contactPhone}}"
                由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持
                  <tbody id='GWHU8'></tbody>
                <i id='GWHU8'><tr id='GWHU8'><dt id='GWHU8'><q id='GWHU8'><span id='GWHU8'><b id='GWHU8'><form id='GWHU8'><ins id='GWHU8'></ins><ul id='GWHU8'></ul><sub id='GWHU8'></sub></form><legend id='GWHU8'></legend><bdo id='GWHU8'><pre id='GWHU8'><center id='GWHU8'></center></pre></bdo></b><th id='GWHU8'></th></span></q></dt></tr></i><div id='GWHU8'><tfoot id='GWHU8'></tfoot><dl id='GWHU8'><fieldset id='GWHU8'></fieldset></dl></div>
                <legend id='GWHU8'><style id='GWHU8'><dir id='GWHU8'><q id='GWHU8'></q></dir></style></legend>

                    <bdo id='GWHU8'></bdo><ul id='GWHU8'></ul>

                      • <tfoot id='GWHU8'></tfoot>

                        • <small id='GWHU8'></small><noframes id='GWHU8'>