JS的变量提升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);//30if(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.hqwc.cn/news/268182.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件测试面试八股文(答案解析+视频教程)

1、B/S架构和C/S架构区别 B/S 只需要有操作系统和浏览器就行&#xff0c;可以实现跨平台&#xff0c;客户端零维护&#xff0c;维护成本低&#xff0c;但是个性化能力低&#xff0c;响应速度较慢。 C/S响应速度快&#xff0c;安全性强&#xff0c;一般应用于局域网中&#xf…

外包干了3年,技术退步太明显了。。。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了差不多3年的功能测试&#xff0c;今年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能…

Linux 高级管理,基于域名的虚拟Web主机

实验环境 某公司的网站服务器使用的公网IP地址为192.168.184.50并使用该IP地址注册了两个域名 www.bdqn1.com和www.jbit.com。服务器中已经安装好了 CentOS 7操作系统.并通过源码编译的 方式安装了Web服务器软件httpd-2.4.25.现需要对httpd服务进行配置.以支持同时运行这两个 W…

OpenHarmony 如何去除系统锁屏应用

前言 OpenHarmony源码版本&#xff1a;4.0release / 3.2 release 开发板&#xff1a;DAYU / rk3568 一、3.2版本去除锁屏应用 在源码根目录下&#xff1a;productdefine/common/inherit/rich.json 中删除screenlock_mgr组件的编译配置&#xff0c;在rich.json文件中搜索th…

智能时代:互联网+如何改变我们的生活与工作

引言 随着科技的不断进步和互联网的普及&#xff0c;我们正处在一个智能时代。这个时代被互联网所定义&#xff0c;它深刻地改变了我们的生活和工作方式。从社交互动到日常工作&#xff0c;智能时代的影响无处不在&#xff0c;给人们带来了前所未有的变革和机遇。 互联网的涌…

【基础知识】大数据概述

关键词—分布式 化整为零&#xff0c;再化零为整 大数据的定义 传统数据库处理起来困难的数据集。 发展历程 中国开源生态图谱2023 参考内容 中国开源生态图谱 2023.pdf 技术组件说明 数据集成 sqoop、dataX、flume 数据存储 hdfs、kafka 数据处理 mapreduce、hive…

leetcode:2367. 算术三元组的数目(python3解法)

难度&#xff1a;简单 给你一个下标从 0 开始、严格递增 的整数数组 nums 和一个正整数 diff 。如果满足下述全部条件&#xff0c;则三元组 (i, j, k) 就是一个 算术三元组 &#xff1a; i < j < k &#xff0c;nums[j] - nums[i] diff 且nums[k] - nums[j] diff 返回不…

告诉大家一款手机上就能使用的SSH工具

工欲善其事必先利其器&#xff0c;我们在日常工作中需要登录服务器。在Pc端工具比较丰富&#xff0c;如Xshell等。而在手机端有没有好用的ssh连接工具呢&#xff1f; 关于 flutter_server_box一个 Flutter 项目&#xff0c;它提供图表来显示 Linux 服务器状态和管理服务器的工…

C++ Qt开发:LineEdit单行输入组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍LineEdit单行输入框组件的常用方法及灵活运用…

题目:肖恩的苹果林(蓝桥OJ 3683)

题目描述&#xff1a; 解题思路&#xff1a; 本题采用二分中的二分答案。枚举每一个最大距离&#xff08;i&#xff1a;1 ~ n&#xff09;以及他们至少能容纳的树木数&#xff08;上一题&#xff1a;跳石头-蓝桥OJ 364&#xff09; 判断二分内判断条件是>还是<以及是lmi…

大数据Vue项目必备|Window下安装并使用nvm(含卸载node、卸载nvm、全局安装npm)

大数据Vue项目必备|Window下安装并使用nvm&#xff08;含卸载node、卸载nvm、全局安装npm&#xff09; 一、卸载旧版本 如果已经安装了node&#xff0c;那么需要先卸载node&#xff0c;如果没有安装那可以直接跳过这一步。 卸载&#xff1a;   打开控制面板 -> 打开程序和…

轻量封装WebGPU渲染系统示例<44>- 材质组装流水线(MaterialPipeline)之灯光和阴影(源码)

目标: 数据化&#xff0c;模块化&#xff0c;自动化 备注: 从这个节点开始整体设计往系统规范的方向靠拢。之前的都算作是若干准备。所以会和之前的版本实现有些差异。 当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sa…