javascript中var与let与const的区别

来源：互联网发布：4g 网络手机编辑：程序博客网时间：2024/04/27 09:09

var与let的区别

到ES6的时候，javascript中声明变量的方式有三种var、let、const

1：作用域只是局限于当前代码块

        {            var str = "aaa";            console.log(str);//aaa            let str1 = "dddd";            console.log(str1);//dddd        }        console.log(str);//aaa        console.log(str1);//报错，str1 is not defined

上面代码中采用var 和 let 分别申明了变量，采用var 申明的变量在外面可已使用，但采用let申明的变量只能在当前代码块中使用，在外边是用不了。

2：使用let 申明的变量作用域不会提升，而采用var申明的会作用域提升。

采用var申明变量

        //采用var 申明的变量作用域会提升        {            console.log(a);//输出undefined            var a = "dd";        }

上面的代码经过作用域提升之后相当于下面的代码

        //作用域声明提升总是会将变量的申明提升到当前作用域的最前面，如下所示        {            var a;            console.log(a);//因此输出为undefined            a = "ddd";        }

采用let申明的变量作用域不会提升，因此下面代码将会报错

        {            console.log(b);//这里将会报错，因为b没有申请            let b = "SYC";        }

3：采用let在相同的作用于下面不能申明相同的变量，采用var申明相同的变量后面会覆盖当前作用域前面的

4：for循环体现父子作用域

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>首页</title></head><body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button>    <script>       var btns = document.getElementsByTagName('button');       for(i var i = 0; i < btns.length; i ++){            btns[i].onclick = function(){                alert("按钮"+i);//这里一直是按钮4            }       }    </script></body></html>

在上面每次点击都会显示最后一个按钮被点击，在alert的时候js在当前作用于下面找出i没有找到所以便向上查找，找到for循环的作用域，for循环是同步事件，里面的i=4所以一直显示的是4

通过函数闭包的形式可以实现点击不同的按钮，显示不同的数据，将上面的js代码改为如下

       var btns = document.getElementsByTagName('button');       for(i var i = 0; i < btns.length; i ++){           (function(i){               btns[i].onclick = function(){                   alert("按钮"+i);               }           })(i);       }

将为按钮添加的按钮的事件处理程序放到函数闭包里面，将i作为变量传入进去，函数闭包会保存当前变量。所以点击不同的按钮就会显示不同的数字。

采用let申明将会实现点击不同按钮显示不同的数字效果，将上面的js代码稍作改动，将var申明的变量采用let申明

       let btns = document.getElementsByTagName('button');       for(let i = 0; i < btns.length; i ++){           btns[i].onclick = function(){               alert("按钮"+i);           }       }

const申明变量

const关键字用于申明常量

const申明的作用域不会被提升

cosnt只能作用于当前作用域

const申明的变量需要初始化

const申明的变量初始化后不能被修改

阅读全文

0 0