【ES6】let 和 const 详解

news/2024/7/19 14:13:32 标签: js, let, const

文章目录

    • 一、letconst 共同点
      • 1. 不重复声明
      • 2. 无变量提升
      • 3. 作用域限制
      • 4. 暂时性死区
    • 二、letconst 不同点
      • 1. 声明时区别
      • 2. 赋值时区别

let__const__1">一、letconst 共同点

  • 我们以前都是使用var关键字来声明变量的
  • 在ES6的时候,多了两个关键字letconst,也是用来声明变量的,只不过和var有一些区别

1. 不重复声明

  • letconst不允许在相同作用域内,重复声明同一个变量
  • var关键字
js">/* 使用 var 的时候重复声明变量是没问题的,只不过就是后面会把前面的覆盖掉*/
// 在全局作用域中声明变量 num
var num = 100;
{// 在块级作用域中再次声明变量 num
	var num = 200;	// 这里不报错
}
// 在全局作用域中重复声明变量 num	
var num = 300;	// 这里不报错
js">// 在全局作用域中声明变量 num
let num = 100;
{// 在块级作用域中再次声明变量 num
	let num = 200;	// 这里不报错
}
// 在全局作用域中重复声明变量 num	
let num = 300;	// 这里会报错
js">// 在全局作用域中声明变量 num
const num = 100;
{// 在块级作用域中再次声明变量 num
	const num = 200;	// 这里不报错
}
// 在全局作用域中重复声明变量 num	
const num = 300;	// 这里会报错

2. 无变量提升

  • letconst声明的变量不会在预解析的时候解析(也就是没有变量提升)
  • var关键字
js">// 因为预解析(变量提升)的原因,在前面是有这个变量的,只不过没有赋值
console.log(num); // undefined
var num = 100;
js">// 因为 let 不会解析预解析(变量提升),所以直接报错了
console.log(num);	// 这里会报错
let num = 100;
js"> // 因为 const 不会继续预解析(变量提升),所以直接报错了
console.log(num);	// 这里会报错
const num = 100;

3. 作用域限制

  • letconst声明的变量会被所有代码块限制作用范围
  • var关键字
js">// var 声明的变量只有函数能限制其作用域,其他的不能限制
if(true){
	var num = 100;
}
console.log(num);	//100
js">// let 声明的变量,所有的代码块都可以限制其作用域(函数,if,while,for。。)
if(true){
	let num = 100;
	console.log(num);	//100
}
console.log(num);	//报错
js">// const 声明的变量,所有的代码块都可以限制其作用域(函数,if,while,for。。)
if(true){
	const num = 100;
	console.log(num);	//100
}
console.log(num);	//报错
  • let关键字在for循环中特例:
js">// ()相当于一个父作用域,{}是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);	// abc
}

4. 暂时性死区

ES6 明确规定,如果区块中存在 letconst 关键字,这个区块对声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

总之,在代码块内,使用 letconst 关键字声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”( temporal dead zone,简称 TDZ)。

let__const__99">二、letconst 不同点

1. 声明时区别

  • let声明的时候可以不赋值,const声明的时候必须赋值
js">let num1 ;
console.log(num1);	// undefined
const num2;
console.log(num2);	// 这里就会报错了,因为 const 声明的时候必须赋值

2. 赋值时区别

  • let声明的变量的值可以改变,const声明的变量的值不可以改变
js">let num = 100;
num = 200;
console.log(num);	// 200
const num2 = 100;
num2 = 200;
console.log(num2);	// 这里就会报错了,因为 const 声明的变量值不可以改变(我们也叫做常量)

http://www.niftyadmin.cn/n/509587.html

相关文章

【ES6】解构赋值

文章目录一、解构赋值二、解构数组1. 变量赋值2. 交换变量3. 默认值4. 不完全解构5. 解构数组嵌套6. 与...运算符结合使用三、解构对象1. 获取成员2. 对象赋值3. 默认值4. 解构嵌套对象四、解构函数1. 函数的参数2. 函数返回值四、其他解构1. 字符串3. 其他数据类型一、解构赋值…

ant vue a-table 动态改变表头的值

{title: () > (this.dataSource[0] && this.dataSource[0].awardType"6" ? 翻倍倍数 : 奖励值),align: "center",key: "signPoints",type: JVXETypes.inputNumber,},

js 60. 排列序列

给出集合 [1,2,3,…,n]&#xff0c;其所有元素共有 n! 种排列。 按大小顺序列出所有排列情况&#xff0c;并一一标记&#xff0c;当 n 3 时, 所有排列如下&#xff1a; “123” “132” “213” “231” “312” “321” 给定 n 和 k&#xff0c;返回第 k 个排列。 示例 1&…

React vscode 创建 react 项目流程【超详细】

文章目录一、安装node二、配置淘宝镜像三、配置 vscode&#xff08;win10&#xff09;四、全局安装脚手架五、创建项目编写第一个 react 程序教程一、安装node 请在官网下载安装&#xff1a;https://nodejs.org/zh-cn/vscode 中 点击 ( ctrl ) 调出终端输入指令node -v&#…

js 67. 二进制求和

给你两个二进制字符串&#xff0c;返回它们的和&#xff08;用二进制表示&#xff09;。 输入为 非空 字符串且只包含数字 1 和 0。 示例 1: 输入: a “11”, b “1” 输出: “100” 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; /*** param {string} a* para…

React 编写我的第一个 react 应用程序

react开发需要引入多个依赖文件&#xff1a;react.js、react-dom.js&#xff0c;分别又有开发版本和生产版本&#xff0c;create-react-app里已经帮我们把这些东西都安装好了&#xff0c;不要自己手动安装配置。 具体步骤&#xff1a;先创建一个 react 项目&#xff1a;点这跳转…

javaScript 阶乘尾数

设计一个算法&#xff0c;算出 n 阶乘有多少个尾随零。 示例 1: 输入: 3 输出: 0 解释: 3! 6, 尾数中没有零。 /*** param {number} n* return {number}*/ var trailingZeroes function(n) {let count 0 while(n>5){countparseInt(n/5);}return count;};

【React】基础入门教程

文章目录一、数据渲染1.1、条件渲染1.2、列表渲染1.3、dangerouslySetInnerHTML二、组件模块2.1、创建类组件2.2、创建函数组件2.3、组件的组合&#xff08;Fragment&#xff09;2.4、组件的嵌套三、组件中DOM样式本文只介绍最基础的几个&#xff0c;如果有些东西没写到&#x…