首页 > 其他分享 >第一百零六篇:变量的不同声明(var,let和const的不同)

第一百零六篇:变量的不同声明(var,let和const的不同)

时间:2022-11-08 23:55:48浏览次数:33  
标签:const 变量 一百零六 let var panghu 声明 log

好家伙,JS基础接着学,

本篇内容为《JS高级程序设计》第三章学习笔记



1.变量

 

ECMAScript 变量是松散类型的,意思是变量可以用于保存任何类型的数据。

(确实松散,不像C或C++那样,分int,float,char等等...,一个变量可以用来保存任何类型的数据)

每个变量只不过是一个用于保存任意值的命名占位符。有3个关键字可以声明变量:

var、const 和let

其中,var 在 ECMAScript的所有版本中都可以使用,而const和1et只能在ECMAScript 6及更晚的版本中使用。 

 

2.var声明

用var声明的变量可以保存任何类型的值

在不进行初始化的情况下,变量会保存一个特殊值undifined

var panghu;
console.log(panghu);

看图:

 

 

 

 

2.1.var声明作用域

function test(){
    var panghu = "panghu";
}
test();
console.log(panghu);

看图:

 

 

 

在函数内忽略var声明变量,可以声明一个全局变量

function test(){
    panghu = "panghu";
}
test();
console.log(panghu);

看图:

 

 

 

 至此,我们可以得出:

使用var操作符定义的变量会成为包含它的函数的局部变量

(人话翻译:在函数内使用var声明变量,那么该变量的作用域在该函数内)

 

2.2.var声明提升

使用var关键字声明的变量会自动提升到函数作用域的顶部

(仅仅是声明提升,不包含赋值操作)

(代码拿前面的掉一下顺序就好了)

 

 

 

 在这里我们可以看到,panghu在console.log(panghu);前就已经被声明了,

再看一个例子

 

 

两次输出内容不同

 

由此,我们知道

function test(){
    var panghu = "panghu";
    console.log(panghu);
}
test();

function test(){
    var panghu;
    console.log(panghu);
    panghu = "panghu";
}
test();

两者等价

这便是"变量提升"了

 

 

3.let声明

let和var的作用差不多,但也有所区别,

区别1:var声明的范围是函数作用域,而let声明的范围是块作用域,

举例子:

if(1){
    var panghu = "panghu";
    console.log("第一次输出"+panghu);
}
console.log("第二次输出"+panghu);

if(1){
    let kunkun = "kunkun";
    console.log("第三次输出"+kunkun);
}
console.log("第四次输出"+kunkun);

看图

 

 

 一个例子很好的说明了,

let声明的变量,到了块作用域外就寄了

而var声明的变量,依旧好好活着

 

这两个关键字声明的并不是不同类型的对象,

他们只是指出变量在相关作用域如何存在

 

 

3.1.对声明冗余(重复声明同一变量)报错不会因混用let和var影响

 

 

 (四个排列组合告诉你,不要重复声明变量)

 

3.2.暂时性死区

 区别二:let没有"变量提升"

console.log(panghu);
var panghu;

console.log(kunkun);
let kunkun;

 

 

 

 (let声明的变量,寄)

在let声明之前执行的瞬间被称为"暂时性死区",

在此阶段引用任何后面才声明的变量都会报错:ReferenceError

 

3.3.全局声明

区别三:

与var关键字不同,使用let 在全局作用域中声明的变量不会成为window 对象的属性(var声明的变量则会)

 

var panghu ="panghu"; console.log(window.panghu);
let kunkun ="kunkun"; console.log(window.kunkun);

 

 

 

 

补充:

3.4.条件声明

在使用var 声明变量时,由于声明会被提升,JavaScript引擎会自动将多余的声明在作用域顶部合并为一个声明。 因为let的作用域是块,所以不可能检查前面是否已经使用let声明过同名变量,同时也就不可能在没有声明的情况下声明它。

我们知道,var可以多次声明,而let多次声明会报错,因此,let是更为严谨的

 

4.const 声明

const的行为基本与let相同,两者作用域同样为"块"

但仍有区别(怎么可能会没有区别)

声明变量时必须同时初始化变量,

且const声明的变量无法修改,

有趣的是,如果const变量引用的是一个对象,

那么修改这个对象内部的属性并不违反const的"禁止修改"

const panghu ={};
panghu.age = 20;
console.log(panghu.age);

看图:

 

 

 这样的写法是完全可行的

 

 

5.for循环中的let和var

 

我们用let和var声明的变量分别来跑一次for循环

 

 

 一切正常;

然后我们改一下

for(var i=0;i<8;i++){
    setTimeout(()=>console.log(i),0);
}

for(let j=0;j<8;j++){
    setTimeout(()=>console.log(j),0);
}

看图:

 

 

 

之所以会这样,是因为在退出循环时,迭代变量保存的是导致循环退出的值:8。

在之后执行超时逻辑时,所有的i都是同一个变量,因而输出的都是同一个最终值。

 

而在使用let声明迭代变量时,JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量。

)每个setTimeout 引用的都是不同的变量实例,所以console.log输出的是我们期望的值,

也就是循环执行过程中每个迭代变量的值。

(神奇的JS)

 

That's all.

 

标签:const,变量,一百零六,let,var,panghu,声明,log
From: https://www.cnblogs.com/FatTiger4399/p/16871324.html

相关文章

  • Servlet的生命周期; Java IO流处理 ; python有点意思; matlab; 为什么要使用构造方法?JavaB
    Servlet的生命周期Servlet的生命周期主要有三个方法:init()初始化阶段service()处理客户端请求阶段destroy()终止阶段pagehelper怎么使用的​​https://pagehelper.github.......
  • day13-Servlet03
    Servlet0311.练习快捷键-可以快速地在访问的文件件切换ctrl+alt+向左箭头:回到上次访问的位置ctrl+alt+向右箭头:回到下一步访问的位置11.1CatServlet首先创建项目ser......
  • session实现servlet数据共享
    为了满足老师考试要求,要实现数据共享,要实现顾客登录的功能,登录后进行增删改查要对该顾客进行操作,所以需要将该顾客的一些信息共享给其他操作,找了一些资料,来通过session实现......
  • Kubelet源码分析(一):工作原理以及启动流程分析
    一、概要kubelet是运行在每个节点上的主要的“节点代理”,每个节点都会启动kubelet进程,用来处理Master节点下发到本节点的任务,按照PodSpec描述来管理Pod和其中的容......
  • Servlet—环境,生命周期,session
    Servlet简介Servlet(ServerApplet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于交互式地浏览和生成......
  • 【Python零基础入门篇 · 36】:greenlet协程模块的使用、gevent模块的使用、程序打补丁
    greenlet协程模块的使用greenlet:是一个用C实现的协程模块,通过switch()来实现任务函数间的切换。greenlet属于手动切换任务,当遇到IO操作,程序会阻塞,而不能进行自动切换。g......
  • 【Python零基础入门篇 · 36】:greenlet协程模块的使用、gevent模块的使用、程序打补丁
    greenlet协程模块的使用greenlet:是一个用C实现的协程模块,通过switch()来实现任务函数间的切换。greenlet属于手动切换任务,当遇到IO操作,程序会阻塞,而不能进行自动切换。g......
  • day12-Servlet02
    Servlet026.GET和POST请求的分发处理开发Servlet,通常编写doGet,doPost方法。来对表单的get和post请求进行分发处理例子在web文件夹下面创建一个html页面,用于提交表......
  • jsp传入servlet数据
    面对老师的19级期末,要用到jsp传入servlet的数据传输,借鉴了其他人的代码,以下是我的程序jsp界面:<%request.getSession().setAttribute("data","怎么写");%>servlet界面:St......
  • 不同含义的new delete
    new\delete1、newoprator要完成的两部分<1>分配内存,有opratornew来做<2>调用构造函数初始化内存中的对象2、opratornew作用;返回未处理的指针和未初始化的内存原......