javascript中var与let与const的区别

news/2024/7/11 1:00:57 标签: javascript, ES6

var与let的区别

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

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

javascript">        {
            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申明变量

javascript">        //采用var 申明的变量作用域会提升
        {
            console.log(a);//输出undefined
            var a = "dd";
        }
上面的代码经过作用域提升之后相当于下面的代码

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

javascript">        {
            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代码改为如下

javascript">       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申明

javascript">       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申明的变量初始化后不能被修改


http://www.niftyadmin.cn/n/861754.html

相关文章

java排序算法集

java中排序算法集 java排序算法包括了很多种&#xff0c;包括了插入排序、选择排序、快速排序、归并排序、桶排序、堆排序等等一系列的。 一、选择排序的递归与非递归实现 首先是非递归实现&#xff0c;代码如下。 /*** TODO:非递归选择排序算法(每次找出列表中最小元素或者最…

java扫描文件夹下面的所有文件(递归与非递归实现)

java中扫描指定文件夹下面的所有文件 扫描一个文件夹下面的所有文件&#xff0c;因为文件夹的层数没有限制可能多达几十层几百层&#xff0c;通常会采用两种方式来遍历指定文件夹下面的所有文件。递归方式非递归方式&#xff08;采用队列或者栈实现&#xff09; 下面我就给出两…

SpringMVC+Spring+Mybatis 整合教程(入手及用)

原文链接 http://www.jianshu.com/p/afc5446df498

web文件上传下载原理浅析

一、web文件上传浅析 现在有很多Web程序都有上传功能&#xff0c;实现上传功能的组件或框架也很多&#xff0c;如基于java的Commons FileUpload、还有Struts1.x和Struts2中带的上传文件功能&#xff08;实际上&#xff0c;Struts2在底层也使用了Commons FileUpload&#xff09;…

前后台交互中文乱码解决方式之一

设置tomcat的编码 在server.xml中寻找<Connector connectionTimeout"20000" port"8081" protocol"HTTP/1.1" redirectPort"8443"/>在后面加入 URIEncoding"utf-8"<Connector connectionTimeout"20000" p…

Ubuntu服务器搭建MySQL+Tomcat+JDK

话不多说&#xff0c;感谢博主&#xff0c;原文连接如下&#xff1a;Ubantu服务器搭建MySQL Tomcat JDK 注&#xff1a;博主里面很多命令没有使用sudo命令&#xff0c;比如解压tomcat&#xff0c;直接使用tar命令可能遇到权限不够的情况&#xff0c;这个时候需要在前面加上s…

浏览器的cookie,localStorage,sessionStorage区别

浏览器的cookie&#xff0c;localStorage,sessionStorage区别 localStorage,sessionStorage,cookies都是客户端存储的解决方案 1、localStorage和sessionStorage的声明周期 localStorage和sessionStorage都是用来存储客户端临时信息对象&#xff0c;他们只能存储字符串类型的…

javascript事件循环机制

文章出处https://zhuanlan.zhihu.com/p/26229293 函数调用栈与任务队列 Javascript有一个main thread 主进程和call-stack&#xff08;一个调用堆栈&#xff09;&#xff0c;在对一个调用堆栈中的task处理的时候&#xff0c;其他的都要等着。当在执行过程中遇到一些类似于setTi…