视频链接:

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. web前端面试第一次[javascript函数和方法的区别]

    //函数 function f1(){ console.log("我是函数"); } //调用函数 f1(); //创建一个空对象 var obj = {} //把函数定义到对象里 ...

  2. 前端面试之JavaScript中数组的方法!【残缺版!!】

    前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...

  3. 前端面试之JavaScript中的闭包!

    前端面试之JavaScript中的闭包! 闭包 闭包( closure )指有权访问另一个函数作用域中变量的函数. ----- JavaScript 高级程序设计 闭包其实可以理解为是一个函数 简单理 ...

  4. 前端面试之JavaScript的基本数据类型!

    前端面试之JavaScript的基本数据类型! JS的基本数据类型 数字 字符串 布尔值 JavaScript中有两个特殊的原始值: null (空) 和undefined (未定义), , 它们不是 ...

  5. JavaScript var, let, const difference All In One

    JavaScript var, let, const difference All In One js var, let, const 区别 All In One 是否存在 hoisting var ...

  6. var let const 的区别

    Var let const 的区别 1.Var 定义的变量存在变量提升,而了let和const不存在变量提升.即在定义的变量代码上使用该变量,var的会输出undefined,而let的会报错. 2. ...

  7. Javascript var 和 let 的区别

    Javascript var 和 let 的区别 var 是函数块的全局变量. let 是代码块的局部变量. let 变量不会提升,如果先使用后定义会 undefind. 参考: https://de ...

  8. 前端面试整理——javascript算法和测试题

    (1)算法: 1.斐波那契数列:1.1.2.3.5.8.13.21.输入n,输出数列中第n位数的值. 方案一: function fn(n){ var num1 = 1, num2= 1, num3 ...

  9. let、var、const用法区别

    1.var var 声明的变量为全局变量,并会进行变量提升:也可以只声明变量而不进行赋值,输出为undefined,以下写法都是合法的. var a var a = 123  2.let let 声明 ...

随机推荐

  1. JavaWeb学习day4-Maven&IDEA中的使用

    1.创建本地仓库 ,因为使用apache官方的下载方式需要挂梯,下载速度慢且容易出错,可以配置阿里的下载路径,同时配置如下图的仓库路径 2.创建原型项目 3.等待jar包下载导入完成,出现下图即代表成 ...

  2. 随机获取gbr颜色值

  3. CesiumJS 2022^ 原理[3] 渲染原理之从 Entity 看 DataSource 架构 - 生成 Primitive 的过程

    目录 API 用法回顾 1. 为什么要从 Viewer 访问 Entity API 1.1. 高层数据模型的封装 - DataSource API 1.2. 显示管理器 DataSourceDispl ...

  4. 使用 Python 来自动回微信

    准备 Python3 Python Itchat库(可以通过pip install itchat来安装) (可选)Python Pymongo库(可以通过pip install pymongo来安装) ...

  5. Spring Boot 启动源码解析结合Spring Bean生命周期分析

    转载请注明出处: 1.SpringBoot 源码执行流程图 2. 创建SpringApplication 应用,在构造函数中推断启动应用类型,并进行spring boot自动装配 public sta ...

  6. 如何查看Linux进程详情?(ps命令)

    点击关注上方"开源Linux", 后台回复"读书",有我为您特别筛选书籍资料~ 1. ps是什么? 要对进程进行监测和控制,首先必须要了解当前进程的情况,也就是 ...

  7. js项目案例

    2021.04.12 --mouseover抖动情况之一

  8. ElasticSearch7.3学习(二十二)----Text字段排序、Scroll分批查询场景解析

    1.Text字段排序 场景:数据库中按照某个字段排序,sql只需写order by 字段名即可,如果es对一个text field进行排序,es中无法排序.因为文档入倒排索引表时,分词存入,es无法知 ...

  9. 精华!一张图进阶 RocketMQ

    前 言 大家好,我是三此君,一个在自我救赎之路上的非典型程序员. "一张图"系列旨在通过"一张图"系统性的解析一个板块的知识点: 三此君向来不喜欢零零散散的知识 ...

  10. Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...