草庐IT

JavaScript var let const的区别

PaturNax 2023-03-28 原文

视频链接:
JavaScript var let const的区别 - Web前端工程师面试题讲解

参考链接:
JavaScript 变量
JavaScript Let
JavaScript Const

练习网站:
codepen.io

初步认识:

功能实现

HTML的部分:

<input type="text" placeholder="帕图纳克斯">
<button>发表评论</button>
<div></div>

JS的部分:

//首先要要我想弄一个评论功能,
//通过document.querySelector获取到HTML中input标签的type属性为"text"的输入框的部分
//于是赋值给这个var变量text,该变量就成类似容器一样的存在
var text = document.querySelector("input[type='text']");
var button = document.querySelector("button");
var div = document.querySelector("div");

button.onclick = function(){
//用var创建变量content,把输入的内容赋值给content
  var content = text.value;
//接着就把内容赋值给下面的评论显示区域
  div.innerText = content;
};

现在我输入内容就显示出评论的结果了:

重复声明

在不新增变量以及不该写整体结构的前提下,我们可以利用var变量可以重复声明的性质,改写原来评论输入的内容:

JS部分改写:

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

button.onclick = function(){
  var content = text.value;
  var content = "下次一定";
  div.innerText = content;
};

值的修改

而 如果我们不声明 var 这个变量,直接赋值就叫值的修改:

button.onclick = function(){
  var content = text.value;
  content = "下次一定";
  div.innerText = content;
};

当我们使用let变量时,想重复定义是不可以的,但是可以进行值的修改或者创建一个新的let变量

const变量则更加严格,即不能重复定义,也不存在值修改,但是可以创建一个数组,利用数组通过指针指向和被引用的特点,来存新的变量达到我们修改评论的目的,例子如下。

JS的部分:

button.onclick = function(){
  const content = [];
  content[0] = text.value;
  content[1] = "下次一定";
  div.innerText = content[1];
};

声明提升

接下来弄一个新的例子来说明
HTML部分:

<p class="p1">听君一席话</p>
<p class="p2"></p>

JS部分:

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

p2.innerText=content;

var content = "如听一席话"

之所以p2的类没有显示内容,则是因为var变量可以声明提示,类似如下的效果:

var content

p2.innerText=content;

content = "如听一席话"

此外let、const声明的变量是没有声明提升,但是可以利用值的修改可令let声明的变量不报错。

创建块级作用域

就是弄个函数,一个函数尽管使用了函数外的同名变量,但是可以选择是否调用,来达到改变该案例p2段落的情况。

不过这样太麻烦了,其实用let/const+花括号内容括起来就可以形成块级作用域的效果:

循环

注意:ES6之前的循环不算是块级作用域的一种
以下就弄也给循环案例
HTML部分:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

JS部分:

var li = document.querySelectorAll("li");
//这里进行5次循环
for(var i=0;i<5;i++){
  //每次循环都为li元素添加鼠标事件
  li[i].onmouseover = function(){
    //在这个监听事件,就添加文本节点用循环里的i赋值
    var text = document.createTextNode(i);
    this.appendChild(text);
    //并且修改li元素的高度
    this.style.height = i * 10 + "px";
  }
}

鼠标逐个移动每个li,可以看到它们的间距确实变大了,但是变大的间距都是一致的,并不是逐个上升的,这里是回调函数的问题。

该函数的具体实现流程如下:

首先鼠标事件里的内容是回调函数

需要等执行栈里面的正常任务执行以后才会执行任务队列里面的回调函数的结果,var关键字没有形成块级作用域,回调函数只保存了参数i,等正常任务执行后,i就为5了。

可以在循环声明一个新的let变量j,把i的数值赋给j,并且令鼠标事件只认j,这样因为块级作用域的关系,每次迭代可以进行重新绑定,这样就可以使任务队列里面的回调函数都有不一样的i

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

for(var i=0;i<5;i++){
  let j=i;
  li[j].onmouseover = function(){
    var text = document.createTextNode(j);
    this.appendChild(text);
    this.style.height = i * 10 + "px";
  }
}


可以看到现在就达到我们希望可以逐个增大的效果了

当然也可以把块级作用域锁定在循环里面达到同样的效果(我测试不成功,不知道为什么i参数的0与1总是重合
JS修改:

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

for(let i=0;i<5;i++){
  li[i].onmouseover = function(){
    var text = document.createTextNode(i);
    this.appendChild(text);
    this.style.height = i * 10 + "px";
  }
}

总结:

有关JavaScript var let const的区别的更多相关文章

  1. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别,作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  2. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别? - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上,我看到了这样几行:我不明白为什么不这样写:在这种情况下,||=和ifnil?有什么区别? 最佳答案 在这种特殊情况下没有区别,但可能是出于习惯。每当我看到nil?被使用时,它几乎总是使用不当。在Ruby中,很少有东西在逻辑上是假的,只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false,因为它具有相同的结果,但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  3. ruby - 这两个 Ruby 类初始化定义有什么区别? - 2

    我正在阅读一本关于Ruby的书,作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中,它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

  4. spring.profiles.active和spring.profiles.include的使用及区别说明 - 2

    转自:spring.profiles.active和spring.profiles.include的使用及区别说明下文笔者讲述spring.profiles.active和spring.profiles.include的区别简介说明,如下所示我们都知道,在日常开发中,开发|测试|生产环境都拥有不同的配置信息如:jdbc地址、ip、端口等此时为了避免每次都修改全部信息,我们则可以采用以上的属性处理此类异常spring.profiles.active属性例:配置文件,可使用以下方式定义application-${profile}.properties开发环境配置文件:application-dev

  5. ruby - 这两段代码有什么区别? - 2

    打印1:defsum(i)i=i+[2]end$x=[1]sum($x)print$x打印12:defsum(i)i.push(2)end$x=[1]sum($x)print$x后者是修改全局变量$x。为什么它在第二个例子中被修改而不是在第一个例子中?类Array的任何方法(不仅是push)都会发生这种情况吗? 最佳答案 变量范围在这里无关紧要。在第一段代码中,您仅使用赋值运算符=为变量i赋值,而在第二段代码中,您正在修改$x(也称为i)使用破坏性方法push。赋值从不修改任何对象。它只是提供一个名称来引用一个对象。方法要么是破坏性

  6. ruby - Ruby 中 .next 和 .succ 的区别 - 2

    Ruby中的Fixnum方法.next和.succ有什么区别?看起来它的工作原理是一样的:1.next=>21.succ=>2如果有什么不同,为什么有两种方法做同样的事情? 最佳答案 它们是等价的。Fixnum#succ只是Fixnum#next的同义词。他们甚至在thereferencemanual中共享同一block. 关于ruby-Ruby中.next和.succ的区别,我们在StackOverflow上找到一个类似的问题: https://stacko

  7. ruby - 在参数为 `yield self` 的方法中使用 `&block` 和在没有参数 `yield self` 的方法中使用 `&block` 有什么区别吗? - 2

    我明白了defa(&block)block.call(self)end和defa()yieldselfend导致相同的结果,如果我假设有这样一个blocka{}。我的问题是-因为我偶然发现了一些这样的代码,它是否有任何区别或者是否有任何优势(如果我不使用变量/引用block):defa(&block)yieldselfend这是一个我不理解&block用法的具体案例:defrule(code,name,&block)@rules=[]if@rules.nil?@rules 最佳答案 我能想到的唯一优点就是自省(introspecti

  8. ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2

    由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察,如下所示:{}.class#=>Hash好的,这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样,下面的代码又显示了Hash?puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么?我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A

  9. ruby - [1,2,3].to_enum 和 [1,2,3].enum_for 在 Ruby 中的区别 - 2

    在Ruby中,我试图理解to_enum和enum_for方法。在我提出问题之前,我提供了一些示例代码和两个示例来帮助理解上下文。示例代码:#replicatesgroup_bymethodonArrayclassclassArraydefgroup_by2(&input_block)returnself.enum_for(:group_by2)unlessblock_given?hash=Hash.new{|h,k|h[k]=[]}self.each{|e|hash[input_block.call(e)]示例#1:irb(main)>puts[1,2,3].group_by2.ins

  10. ruby - Capistrano 中的执行、测试和捕获命令有什么区别? - 2

    关于SSHkit-Github它说:Allbackendssupporttheexecute(*args),test(*args)&capture(*args)来自SSHkit-Rubydoc,我明白execute实际上是test的别名?test之间有什么区别?,execute,capture在Capistrano/SSHKit中我应该什么时候使用? 最佳答案 执行只是执行命令。使用非0退出引发错误。测试方法的行为与execute完全相同,但是它返回bool值(true如果命令以0退出,而false否则)。它通常用于控制任务中的流程

随机推荐