JS的变量提升ES6基础

news/2024/7/11 1:42:41 标签: javascript, es6, 前端

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.niftyadmin.cn/n/5246474.html

相关文章

佛罗里达大学利用神经网络,解密 GPCR-G 蛋白偶联选择性

内容一览&#xff1a;G 蛋白偶联受体 (GPCRs) 是一种将细胞膜外的刺激&#xff0c;传递到细胞膜内的跨膜蛋白&#xff0c;广泛参与到人体生理活动当中。近日&#xff0c;佛罗里达大学的研究者测定了 GPCRs 和 G 蛋白的结合选择性&#xff0c;并开发了预测二者选择性的算法&…

贝蒂的捣蛋小游戏~(C语言)

引言&#xff1a; 前面贝蒂已经给大家介绍了选择&#xff0c;循环结构~&#xff0c;今天贝蒂就基于这两种结构&#xff0c;为大家讲解一种捣蛋小游戏的设计思路和方法哦。 1.游戏要求 游戏要求&#xff1a; 1. 电脑⾃动⽣成1~100的随机数 2. 玩家猜数字&#xff0c;猜数字的过…

Linux 环境变量 与 命令行参数

什么是环境变量 从结构上来看&#xff0c;环境变量就是操作系统维护的一组&#xff1a;key-value 的键值对。 不知道你是否有一个疑问&#xff1a;为什么我们写代码编译链接 形成的可执行程序要运行起来需要带路径呢&#xff1f;Linux 内置的命令也是可执行程序&#xff0c;为…

基于Java商品销售管理系统

基于Java商品销售管理系统 功能需求 1、商品管理&#xff1a;系统需要提供商品信息的管理功能&#xff0c;包括商品的录入、编辑、查询和删除。每个商品应包含基本信息如名称、编码、类别、价格、库存量等。 2、客户管理&#xff1a;系统需要能够记录客户的基本信息&#xf…

记:vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】

前言&#xff1a;什么是跨域&#xff0c;网上一搜一大把&#xff0c;所以这里直接跳过&#xff0c;直入主题。 处理方式&#xff1a;不通过后端处理跨域&#xff0c;通过前端服务器nginx处理。 1.前端涉及处理跨域的必要配置&#xff08;开发环境、生产环境&#xff09;&…

ARMV8 - A64 - 函数调用,内存栈操作

说明 看了下ARM平台上C语言函数调用的反汇编代码&#xff0c;理清楚了其中的内存栈汇编操作&#xff0c;特整理下。本文环境基于&#xff1a;ARMv8-a架构A53核soc&#xff0c;aarch64状态。 预先了解的知识点 内存栈 栈和栈帧的基本概念重点&#xff1a;出栈入栈的单位不是…

Java解析xml文件遇到特殊符号会出现异常的解决方案

原创/朱季谦 在一次Java解析xml文件的开发过程中&#xff0c;使用SAX解析时&#xff0c;出现了这样一个异常信息&#xff1a; Error on line 60 of document : 对实体 "xxx" 的引用必须以 ; 分隔符结尾; 我打开xml文件后&#xff0c;发现该“xxx"符号之前跟着…

如何用docker在自己服务器上部署springboot项目

一、将springboot项目打包 1、maven clean项目 2、maven package项目 打包成功之后生成jar文件&#xff08;在target目录下&#xff09; 3、为Java创建Dockerfile 引入jdk8的Docker镜像 FROM openjdk:8 为了使运行其余命令时更容易&#xff0c;让我们设置映像的工作目录。这将…