var,let ,const的区别详解

最新推荐文章于 2024-08-19 15:50:15 发布
最新推荐文章于 2024-08-19 15:50:15 发布
阅读量523 收藏
点赞数
文章标签： js javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42270374/article/details/107536122
版权

    <input type="text" placeholder="技术蛋老师">

    <button>发表评论</button>

    <div></div>

    <script>

        var text=document.querySelector("input[type='text']");

        var button=document.querySelector("button")

        var div=document.querySelector("div")

        button.οnclick=function(){

            //var  content=text.value;

             //content="三联走一泼"   //两个带关键字var变量的值被中间一个替换  

             

               //let关键字允许值得修改,let没有声明提升

             //let content=text.value;

             //let content='哈哈';     //赋值两个重复的let变量会报错

 

             //let content=text.value; 

            // content="哈哈"            //两个let,其中带关键字的值被使用，不带let的值被当成修改值

          

            //div.innerHTML=content;

            //let conten="哈哈哈"      //报错。let没有声明提升 



 

            // const定义了以后，不能重复定义，不能修改值

           // const content=text.value;

            //const content='哈哈'        //赋值两个重复的const会报错

            // content="哈哈"      //两个其中一个没赋值，会报错，所以const更严格

            //div.innerHTML=content;

          

        //   const具有可变 的情况，用数组或对象形式来修改内容的

          //要想解决const问题，把变量改为数组，把用户输入的内容设置为数组的第一个元素，

        //   然后把输入的第一个元素显示出来，输入内容可以显示

        //  const content=[];  //content变量只是有个指针指向这个数组，数组是可以自已修改的，

        

        //    content[0]=text.value;

        //    content[1]="哈哈哈";

        //    div.innerHTML=content[1];

            

        div.innerHTML=content;

        var conten="哈哈哈"    //执行没有报错，var关键字会进行声明提升

        }

    </script>

    <p class="p1">床前明月光</p>

    <p class="p2"></p>

    <script>

        var p1=document.querySelector("p.p1")

        var p2=document.querySelector("p.p2")

        var content="疑是地上霜";

        // function content_default(){

        //     var content="李白睡的香";

        //     return content

        // }

        // p2.innerText=content_default()

 

        {

            let content="李白睡的香";

            p2.innerText=content   

            //const let关键字和大括号来创建块级作用域

        }

    </script>

    <style>

        ul{

            list-style: none;

 

        }

        ul>li{

            width: 40px;

            height: 40px;

            margin: 20px;

            float: left;

            background-color: blueviolet;

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>4</li>

    </ul>

    <script>

        // 把li元素全部获取过来，然后进行循环，以数字5进行5次循环，每次循坏都会为li元素添加鼠标事件，监听事件里面创建一个文本节点，这个文本节点就用循环里面的i来赋值，并且修改li元素的高度，当鼠标移动的时候，box的显示了数值,也改变了高度，但是它们的都是一样的数值，一直的高度，var没有形成块级作用域，回调函数只保存这个参数i,等执行完了。i已经变成5， 等执行栈里面的正常任务执行以后才会执行队列里面的回调函数结果，这个时候所有任务队列再调用li的值肯定都是5

        // var li=document.querySelectorAll("li");

        // for(var i=0;i<5;i++){

        //     li[i].οnmοuseοver=function(){

        //         var text=document.createTextNode(i)

        //         this.appendChild(text);

        //         this.style.height=i*10+"px"

        //     }

        // }

 

        var li=document.querySelectorAll("li");

      

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

            let j=1;

            li[i].οnmοuseοver=function(){

                var text=document.createTextNode(i)

                this.appendChild(text);

                this.style.height=i*10+"px"

            }

        }

    // 把每一次的迭代的变量i都赋值给变量j,因为块级作用域的关系，这样就会迫使每次迭代进行重新绑定，使得任务队列里面的回调函数都有不一样的数值，然后数值的高度就不一样了，完全按照迭代的顺序来， 把块级作用域锁定在整个for循环里，把var改成let,这样就不需要新增一个变凉了

    // （const)不能修改值不能使用

    var li=document.querySelectorAll("li");

      

      for(var let=0;i<5;i++){

          li[i].οnmοuseοver=function(){

              var text=document.createTextNode(i)

              this.appendChild(text);

              this.style.height=i*10+"px"

          }

      }

    </script>

 

 

^smile
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解微信小程序中var、let、const用法与区别
10-15
微信小程序是可以使用最新ES6标准规范的Javascript来开发的，所有ES6中的新特性微信小程序也是支持的，下面我们来总结下信小程序中var、let、const用法与区别
ES6入门教程之let和const命令详解
08-30
在ES6中，`let`和`const`是两种新的变量声明方式，它们引入了块级作用域的概念，解决了JavaScript中`var`声明变量的一些问题。 `let`命令： `let`是ES6中用于声明变量的新关键字，它的一个显著特点是变量的作用域...
全面解析var、const、let的区别
HuaiCheng9067的博客
05-11 259
作用域：变量作用域（全局变量和局部变量） 、函数作用域（函数内部的变量） 作用域链：其实就是一些可访问对象的集合。比如函数执行时会产生一个活动对象，活动对象中。 在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，该内部属性...
var、let、const三者的相同点及不同点
qq_65552364的博客
05-23 8956
目录 一、var、let、const的相同点 二、var、let、const的不同 区别一：var 存在变量提升 而 let 与 const 不存在变量提升 区别二：var定义的变量可以声明多次，而let、const定义的变量只能声明 区别三：var、let声明的变量可以再次赋值，而const声明的变量不能再次赋值 区别四：var声明的变量没有自身的作用域，而ler、const声明的变量有自身的作用域 一、var、let、const的相同点 va...
JavaScript系列文章：谈谈let和const
weixin_30415113的博客
10-11 230
最近接触到ES6的一些相关新特性，想借let和const两个命令谈谈JavaScript在变量方面的改进。 由于let和const有很多相似之处，我们就先说一说let吧。 1. let添加了块级作用域 我们知道，JavaScript是没有块级作用域的，如果在块内使用var声明一个变量，它在代码块外面仍旧是可见的： if (true) { var foo = 3; } co...
var，let或const？
编程故事的地方
10-22 100
ES6简介 您必须了解var才能掌握let / const的好处。 让我们倒带。 评论：变量声明 重要的是，请使用var故意在特定范围内声明变量，以使代码清晰易维护。 var x = "outside";function foo() { var x = "inside"; console.log(x);}foo(); // insideconsole.log(x); // outsid...
let 与 const
weixin_45052104的博客
06-05 182
let : 1. let声明的变量不再做变量提升,只能先声明,后使用, 2. let声明的全局变量不再是window的属性 3. let声明变量,会自动产生块级作用域,在块级作用域中声明的变量,只在当前作用域中有效 for(let i = 1;i < 5;console.log(i),i ++){ let i = 10; alert(i); } consol...
let 和 const
qq_41706280的博客
11-05 116
1. let 1.1 let可用来声明局部变量，这个局部变量只在 let 命令所在的代码块有效 例子1： var a = []; for(var i = 0; i < 10; i++){ a[i] = function(){ console.log(i); }; } a[6](); //10 因为 i 是全局变量，所以 a[i] 这个函数虽然是在循环内...
let和const
weixin_58448088的博客
01-13 1068
详解：使用 var 定义的循环变量 和 使用 let 定义的循环变量，执行原理和执行效果的不同
JavaScript ES6中const、let与var的对比详解
10-19
本文将详细介绍const、let和var的用法、作用域、变量提升、初始化以及重复声明等方面的区别。 首先，var关键字是早期JavaScript中唯一的变量声明方式。它存在一些问题，比如变量提升和全局变量污染。变量提升意味着...
ES6新特性一： let和const命令详解
01-19
本文实例讲述了ES6新特性中的let和const命令。分享给大家供大家参考，具体如下： 1. let 命令 ① 在js中是没有块级作用域的，var 声明的变量作用域是整个函数体，而let可以起到这一作用 { let a = 1; var b = 2; ...
详解javascript中var与ES6规范中let、const区别与用法
10-15
JavaScript中的`var`、`let`和`const`是ES6（ECMAScript 2015）引入的三种不同的变量声明方式，它们各有特点，适用于不同的场景。 首先，`var`是ES5及之前版本的变量声明方式，存在一些问题。其中最显著的是变量...
let和const命令
liying123466的博客
09-23 1182
一：let （1）暂时性死区 var tmp = 123; if(true){ console.log(tmp); //123 } let tmp =123; if(true){ console.log(tmp); //123 } var tmp =123; if(true){ console.log(tmp); //123 ...
let和const的区别
weixin_40058289的博客
11-21 1097
let const
var,let,const你真的理解了吗？
weixin_42771483的博客
05-18 125
近期学习心得记录，接下来的内容如果你之前也和我一样一知半解，那评论区留下你的剑~哈哈哈哈哈哈哈哈 好了，正题开始。 let , const 这两个关键字是ES6新增的，let，const 定义的变量会被束缚在{ }这样的代码块中，不会有变量提升，但是var 就存在变量提升。（嗯，之前知道了这个概念，但是不知道是个什么情况，下面我们来分析吧） 1. <script> console.log(a); var a = 'hello?'; </script> 解释：v
【ES6】var、let、const三者的区别
11-07 149
首先，一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？       ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。         2011 年，ECM...
nodejs安装
最新发布
a1241436267的博客
08-19 404
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值