JS的变量提升ES6基础

news2025/1/19 11:11:58

JS的变量提升&ES6基础

  • 变量
    • var关键字
      • var声明作用域
        • 实例一
        • 实例二
        • 多个变量
      • 变量提升
    • let关键字
      • 暂时性死区
      • 全局声明
      • for循环中使用let
    • const关键字

变量

ECMAScript变量时松散类型的,意思是变量可以用于保存任何类型的数据。
声明变量:var 、const、let
var 可以随意使用,而constlet只能在ES6及更晚的版本中使用。

var关键字

作用:定义变量(注意:var是一个关键字)

var name;
var name='kin';
name = 100;

var声明作用域

实例一

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

function test(){
	var name = "kin";//局部变量
}
test();
console.log(name);//报错

name变量是在函数内部使用var定义的
函数叫test(),调用它会创建这个变量并给它赋值,调用之后变量随即被销毁。

实例二

在函数内定义变量时省略var操作符,可以创建一个全局变量:

function test(){
	name = "kin";//全局变量
}
test();
console.log(name);//kin

注意:
虽然可以通过该省略var操作符定义全局变量,但不推荐这么做。在局部作用域中定义的全局变量很难维护,也会造成困惑。这是因为不能一下子断定省略var是不是有意而为之。在严格模式下,如果像这样给未声明的变量赋值,则会导致抛出ReferenceError。

多个变量
var name = "kin";
	age = 12;

变量提升

function foo(){
	console.log(age);
	var age = 26;
}
foo(); // undefined

声明的变量会自动提升到函数作用域顶部
成等价于如下代码

function foo(){
	var age;
	console.log(age);
	age = 26;
}
foo();//undefined

提升------把所有变量声明都拉到函数作用域的顶部

function foo(){
	var age = 16;
	var age = 26;
	var age = 36;
	console.log(age);
}
foo();//36

反复多次使用var声明同一个变量

let关键字

let声明的范围是块作用域,var声明的范围是函数作用域。

if(true){
	var name = "kin";
	console.log(name);//kin
}
console.log(name);//kin

对比:

if(true){
	let age = 26;
	console.log(age);//26
}
console.log(age);//ReferenceError:age 没有定义

age变量不能在if块外部被引用,是因为他的作用域仅限于该块内容。
块作用域是函数作用域的子集,因此适用于var的作用域限制同样也适用于let
注意:
let也不允许同一个块作用域对一个变量重复声明。

var name;
var name;

let age;
let age;//SyntaxError;标识符age已经声明过了

由于同一个块中没有重复声明,嵌套使用相同的标识符不会报错。

var name = 'kin';
console.log(name);//kin
if(true){
	var name = '前端';
	console.log(name);//前端
}

let age = 30
console.log(age);//30

if(true){
	let age = 26;
	console.log(age);//26
}

暂时性死区

letvar重要的区别:
let声明的变量不会再作用域中被提升
var声明:

console.log(name)//undefined
var name = "kin"

let声明:

console.log(age)
let age = 18 //ReferenceError:age 没有定义

let声明之前的执行瞬间被称为“暂时性死区”,在此阶段引用任何后面才声明的变量都会抛出ReferenceError。

全局声明

使用let在全局作用域中声明的变量不会成为window对象的属性。

var name = 'kin';
console.log(window.name);//kin
let age = 26;
console.log(window.age);//undefined

for循环中使用let

使用var在for循环中定义的迭代变量会渗透到循环体外

for (var i=0;i<5;i++){
}
console.log(i);//5

使用let在循环中定义的迭代变量仅限于循环块内部

for (let i=0;i<5;i++){
}
console.log(i);//ReferenceError: i is not defined

示例:

for (var i=0;i<5;i++){
	setTimeout(()=>console.log(i),0)
}
//你认为输出的结果是:0、1、2、3、4
//实际输出:5、5、5、5、5
因为在循环退出的时候,迭代变量报错的事导致循环退出的值:5,在之后执行超时逻辑,所有的i都是同一个变量。

使用let可以解决这个问题

for (let i=0;i<5;i++){
	setTimeout(()=>console.log(i),0)
}
//0 1 2 3 4

const关键字

const的行为与let基本相同。
区别:

  • const声明变量时必须同时初始化变量
  • 修改const声明的变量会导致运行时错误
const age = 18;
age = 20 // TypeError : 给常量赋值
//const 也不允许重复声明
const name = 'kin';
const name = 'nnn';//SyntaxError

const声明的作用域也是块

const name = 'kin';
if(true){
	const name = 'nnn';
}
console.log(name);//kin

ok!目前就这些啦,大家有问题欢迎评论区讨论呀!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1293593.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NumPy学习:NumPy(Numerical Python)基础(一)

1.什么是NumPy NumPy 是 Python 中用于科学计算的基础包。 它是一个 Python 库&#xff0c;提供多维数组对象&#xff0c; 各种派生对象&#xff08;例如掩码数组和矩阵&#xff09;&#xff0c;以及 用于对阵列进行快速操作的各种例程&#xff0c;包括 数学、逻辑、形状操作、…

AI助力智慧农业,基于YOLOv8全系列模型【n/s/m/l/x】开发构建不同参数量级的识别系统

智慧农业随着数字化信息化浪潮的演变有了新的定义&#xff0c;在前面的系列博文中&#xff0c;我们从一些现实世界里面的所见所想所感进行了很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《自建数据集&#xff0c;基于YOLOv7开发构建农田场景下杂草…

视觉资料记录

1. 江南才尽&#xff0c;年少无知&#xff01;_RK3399移植,(02)Cartographer源码无死角解析-免费,(01)ORB-SLAM2源码无死角解析-免费-CSDN博客江南才尽&#xff0c;年少无知&#xff01;擅长RK3399移植,(02)Cartographer源码无死角解析-免费,(01)ORB-SLAM2源码无死角解析-免费,…

HCIP考试实验

实验更新中&#xff0c;部分配置解析与分析正在完善中........... 实验拓扑图 实验要求 要求 1、该拓扑为公司网络&#xff0c;其中包括公司总部、公司分部以及公司骨干网&#xff0c;不包含运营商公网部分。 2、设备名称均使用拓扑上名称改名&#xff0c;并且区分大小写。 3…

java之“输入与输出”程序详解

java之“输入与输出”程序详解 一、eclipse操作示例1、完整代码2、运行效果3、代码与运行结果关系图 一、eclipse操作示例 1、完整代码 import java.util.Scanner;public class inputOutput {/*** param args 输入与输出*/public static void main(String[] args) {// 输出Sy…

Rsync+Sersync

服务器相关参数 源服务器 192.168.17.101 目标服务器&#xff08;同步到的服务器&#xff09; 192.168.17.103 ##目标服务器配置 ###1、配置rsync服务 1、安装rsync yum -y install rsync 2、配置rsync vim /etc/rsyncd.conf 配置文件内容 uid root gid root use c…

【数据结构】C语言结构体详解

目录 前言 一、结构体的定义 二、定义结构体变量 三、结构体变量的初始化 四、使用typedef声明新数据类型名 五、指向结构体变量的指针 总结 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1…

接口测试要测试什么?

第一部分&#xff1a; 首先&#xff0c;在做接口测试的过程中&#xff0c;经常有后端开发会问&#xff1a; 后端接口都测试什么&#xff1f;怎么测的&#xff1f;后端接口测试一遍 &#xff0c;前端也测试一遍&#xff0c;是不是重复测试了&#xff1f; 于是&#xff0c;为了…

2023年5个自动化EDA库推荐

EDA或探索性数据分析是一项耗时的工作&#xff0c;但是由于EDA是不可避免的&#xff0c;所以Python出现了很多自动化库来减少执行分析所需的时间。EDA的主要目标不是制作花哨的图形或创建彩色的图形&#xff0c;而是获得对数据集的理解&#xff0c;并获得对变量之间的分布和相关…

Apache Kafka CVE-2023-25194(metasploit版)

Step1&#xff1a;用docker搭建环境 Step2&#xff1a;docker查看映射端口 Step3&#xff1a;访问特定端口&#xff0c;然后靶标应用。 Step4&#xff1a;用metasploit进行攻击&#xff1a; 首先&#xff0c;打开metasploit&#xff0c;然后查询需要攻击的板块&#xff0…

对Spring源码的学习:一

目录 BeanFactory开发流程 ApplicationContext BeanFactory与ApplicationContext对比 基于XML方式的Bean的配置 自动装配 BeanFactory开发流程 这里的第三方指的是Spring提供的BeanFactory&#xff0c;Spring启动时会初始化BeanFactory&#xff0c;然后读取配置清单&#…

元宇宙:重塑游戏行业体验下一个前沿

游戏行业在其整个历史中经历了显著的转变&#xff0c;从超级马里奥的像素化冒险发展到Red Dead Redemption等游戏中迷人的开放世界体验。随着时间的推移&#xff0c;游戏不断突破数字领域所能达到的极限。然而&#xff0c;被称为元宇宙的突破性演变将彻底改变游戏行业&#xff…

【复杂gRPC之Java调用go】

1 注意点 一般上来说如果java调用java的话&#xff0c;我们可以使用springcloud来做&#xff0c;而面对这种跨语言的情况下&#xff0c;gRPC就展现出了他的优势。 代码放在这了&#xff0c;请结合前面的go服务器端一起使用 https://gitee.com/guo-zonghao/java-client-grpc /…

2-4、DEBUG和源程序区别

语雀原文链接 文章目录 1、DEBUG 和 汇编编译器MASM区别1&#xff1a;默认进制不同区别2&#xff1a;[地址]示例1&#xff1a;debug示例2&#xff1a;[0]示例3&#xff1a;[寄存器]示例4&#xff1a;ds:[0]小结 区别3&#xff1a;源程序数据不能以字母开头 1、DEBUG 和 汇编编…

labelme等标注工具/数据增强工具输出JSON文件格式检查脚本

标注的文件太多了&#xff0c;还有用数据增强工具生成了一票的新数据。在转换或使用训练时候会报错&#xff0c;错误原因是json中语法有问题&#xff0c;这样会中断程序运行&#xff0c;调试造成很大困扰。 检查确实最后有问题&#xff0c;多写了一次 写一个脚本&#xff0c;用…

机器学习应用 | 使用 MATLAB 进行异常检测(下)

在使用MATLAB 进行异常检测&#xff08;上&#xff09;中&#xff0c;我们探讨了什么是异常值&#xff0c;简单的一维数据异常检测问题&#xff0c;针对高维数据的有监督异常检测方法。 在&#xff08;下&#xff09;篇中&#xff0c;我们将和大家一起探讨无监督异常检测。 没…

Unity 状态系统

状态系统 原理食用方法Demo 原理 #mermaid-svg-lUbxJ8eMP3KqrEhY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lUbxJ8eMP3KqrEhY .error-icon{fill:#552222;}#mermaid-svg-lUbxJ8eMP3KqrEhY .error-text{fill:#55…

算法通关村第十八关-青铜挑战回溯是怎么回事

大家好我是苏麟 , 今天聊聊回溯是怎么个事 . 回溯是最重要的算法思想之一&#xff0c;主要解决一些暴力枚举也搞不定的问题&#xff0c;例如组合、分割、子集、排列&#xff0c;棋盘等。从性能角度来看回溯算法的效率并不高&#xff0c;但对于这些暴力都搞不定的算法能出结果就…

快速排序的非递归实现

上期我们实现了快速排序的递归实现&#xff0c;但是我们知道如果递归深度太深&#xff0c;栈就会溢出&#xff0c;所以我们本期将为大家讲述快速排序的非递归实现&#xff0c;我们需要用到栈的数据结构&#xff0c;我们知道栈中的数据全是在堆区开辟的空间&#xff0c;堆的空间…

【EXCEL】offset函数

语法&#xff1a; offset(reference,row,column,[height],[width]) 例子&#xff1a;