基于JavaScript ES新特性let与const关键字

目录
  • 1.let关键字
    • 1.1基本用法
    • 1.2不存在变量提升
  • 1.3暂时性死区
  • 1.4不允许重复声明
  • 1.5与函数的关系
  • 2.const关键字
    • 2.1基础用法

1.let关键字

1.1基本用法

let是ECMAScript 2015新增的一个关键字,用于声明变量,其用法类似于var,与之不同的是声明的变量只能在所在的代码块中使用。

语法结构如下所示:

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

参数说明:

var1, var2, …, varN:变量名。必须是合法的标识符。

value1, value2, …, valueN:变量的初始值。可以是任意合法的表达式。

示例代码如下所示:

在全局作用域是定义变量

// 定义全局变量
var a = 100; // 使用 var 关键字
let b = 200; // 使用 let 关键字
console.log(a); // 100
console.log(b); // 200

我们发现简单的定义一个全局变量两者并没有什么区别。

在块作用域中定义变量

关于块级作用域可以参考这篇。

// 在块作用域中定义变量
{
  var a = 100; // 使用 var 关键字
  let b = 200; // 使用 let 关键字
}
console.log(a); // 100
console.log(b); // 抛出异常,描述信息为 ReferenceError: b is not defined

如果let是在代码块中使用的,其代码块则是一个全新的作用域,在作用域外则无法访问其变量。

ES6 提供的let关键字,特别适合在作为for循环计算器的变量使用,如果这样做的话,其变量只能在循环体内使用,出了这个循环体就会抛出异常,

示例代码如下所示:

// 定义一个循环体
for (let v = 0; v < 10; v++) {
  console.log("这是一个 for 循环"); // 这是一个 for 循环 * 10
}
console.log(v); // 抛出异常,描述信息为:ReferenceError: v is not defined

值得注意的是,for循环还有一个特别之处,那就是设置循环变量的那一部分是一个父作用域,而循环体又是一个单独的子作用域,

示例代码如下所示:

for (let v = 0; v < 10; v++) {
  let v = 10
  console.log(v); // 100 * 10
}

得出上面的那种结果就表示两个v并不是处于同一个作用域。

1.2不存在变量提升

如果使用var定义变量,就会发生所谓的变量提成,如下代码所示:

console.log(v); // undefined
var v = 100;

我们在变量声明之前使用这个值,其并不会报错,而结果是undefined,这是一个奇怪的逻辑,按照一般的逻辑如果这样使用的话,其应该会抛出异常。

ECMAScript 2015中,let关键字就解决了这个奇怪的现象,

如下代码所示:

console.log(v); // 抛出异常 描述信息为 ReferenceError: Cannot access 'v' before initialization
let v = 100;

在上述代码中,则会抛出异常,描述信息为 在声明之前不能使用某变量。

1.3暂时性死区

只要块级作用域中存在let关键字定义的变量,他所声明的变量就绑定 这个区域,不会再受外界的影响。示例代码如下所示:

let v = 100;
{
  console.log(v); // 抛出异常 描述信息为 ReferenceError: Cannot access 'v' before initialization
  // 此变量绑定在该块级作用域中,该作用域只能只用此变量
  let v = 200;
}

ECMAScript 2015明确规定,如果区块中存在let关键字,则这个区块对这些命令声明的变量从一开始就形成封闭作用域。只要在声明之前使用这些变量,就会报错。

总的来说,在块级作用域中,使用let关键字声明变量之前,该变量是不可用的,这在语法上称为暂时性死区 ,英文temporal dead zone 简称TDZ。

1.4不允许重复声明

ECMAScript 2015提供的let关键字是不允许进行重复声明,这点与var又不相同,示例代码如下所示:

// 使用 var 声明变量
var a = 100;
console.log(a); // 100
var a = 1000; // 重复声明
console.log(a); // 1000

// 使用 let 声明变量
let b = 100;
console.log(b); // 100
let b = 1000; // 重复声明
console.log(b); // 抛出异常 描述信息为:SyntaxError: Identifier 'b' has already been declared

如果重复声明会抛出SyntaxError异常

1.5与函数的关系

我们在的函数参数相当于使用let关键字定义的变量,如果在函数体中重新使用let关键字重新声明一个与参数名一样的变量则会抛出SyntaxError异常,当然,函数体中使用let也不允许出现变量提升

// 使用 let 声明变量
let a = 100;
// 定义一个函数
function fun(b) {
  // let b = 10; // 抛出异常,描述信息为:SyntaxError: Identifier 'b' has already been declared
  console.log(a); // 抛出异常,描述信息为:ReferenceError: Cannot access 'a' before initialization
  let a = 200;
}
fun(20)

2.const关键字

2.1基础用法

const关键字用于声明一个常量,我们可以将const关键字生成的常量理解为不可变的let变量,这里因为const关键字具有let关键字的所有特性,在原基础上增加了不可变这个特性。

所谓的常量就是初始化之后不可变,且声明时必须初始化,示例代码如下:

const a = 2
a = 3 // 抛出异常

const b // 未初始化抛出异常

但是我们通过const去初始化一个对象或者数组,我们可改变里面的值,它并不是报错,示例代码如下:

const arr = []
arr[0] = 100
console.log(arr) // [100]
const obj = {}
obj.name = '一碗周'
console.log(obj) // {name: "一碗周"}

出现这种问题的原因是因为const关键字实际上保证的并不是变量的值不能被改动,而是变量所指向的那个内存地址不被改动,对于简单的数据类型,例如StringNumberBoolean,这些值就保存在变量所指向的那个内存地址,所以它不可以进行二次修改。

但是对于复合类型的数据,主要指ArrayObject,变量指向的内存地址,保存的只是一个指针,const只能保证这个指针指向的内存地址是固定的,至于它指向的内存地址中保存的数据结构是不是可变的,就完全不能控制了。

在实际的开发中,我们避免使用var关键字,而是使用const关键字,需要使用变量时,我们使用let关键字。

到此这篇关于基于JavaScript ES新特性let与const关键字的文章就介绍到这了,更多相关ES新特性let与const关键字内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript中ES6规范中let和const的用法和区别

    ES6-- let 和 const 命令 引言 本文主要讲解ES6中变量的相关操作,变量的命名, 讲解 var. let . const 三者的区别 正文 ES6中的 let 和 const 都是用来声明变量的, 他们与 var 有所区别 let 命令 我们都知道在for循环中,我们命名的变量 i 一般都只是为了在这个循环中使用,才临时命名的, 我们希望循环结束后,这个变量就消失, 但是却相反,用 var 命名的变量,在 for 循环结束后并不会销毁,而会存在于全局中. for(var i=0;

  • JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别... var x = 1; y = 4; console.log(x);//1 console.log(y);//4 console.log(window.x);//1 console.log(window.y);//4 简单测试下可以知道定义的x和y都被挂载在window对象上,变为window下的属性,这并不能说明什么... delete x; delet

  • JavaScript ES6中const、let与var的对比详解

    ECMAScript 6 新增 const 和 let 命令,用来声明变量. 声明方式 变量提升 作用域 初始值 重复定义 const 否 块级 需要 不允许 let 否 块级 不需要 不允许 var 是 函数级 不需要 允许 变量提升:const 和 let 必须先声明再使用,不支持变量提升 console.log(c1, l1, v1); // 报错 // Uncaught ReferenceError: c1 is not defined const c1 = 'c1'; let l1 =

  • 详解javascript中var与ES6规范中let、const区别与用法

    随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

  • JavaScript es6中var、let以及const三者区别案例详解

    首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?         ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展.         2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5         2015 年 6 月,ECM

  • 基于JavaScript ES新特性let与const关键字

    目录 1.let关键字 1.1基本用法 1.2不存在变量提升 1.3暂时性死区 1.4不允许重复声明 1.5与函数的关系 2.const关键字 2.1基础用法 1.let关键字 1.1基本用法 let是ECMAScript 2015新增的一个关键字,用于声明变量,其用法类似于var,与之不同的是声明的变量只能在所在的代码块中使用. 语法结构如下所示: let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]; 参数说明: v

  • JavaScript ES新特性块级作用域

    目录 1.块级作用域是什么 2.为什么需要块级作用域 3.与函数声明 前言: 在学习块级作用域之前需要我们对作用域有个了解,所谓的作用域就是代码当中的某个成员起作用的范围. 1.块级作用域是什么 所谓的块级作用域,就是该变量只能在声明时的代码块或者子代码块中使用.在ECMAScript 2015以前的版本中是不存在块级作用域的,而ECMAScript 2015提供的let关键字,使JavaScript出现了块级作用域,示例代码如下所示 /* * 块级作用域只能使用 let 关键字 * let关键

  • JS ES新特性之变量的解耦赋值

    目录 1.数组的解耦赋值 1.1数组解耦赋值是什么 1.2数组解耦赋值失败 1.3不完全解耦赋值 1.4默认值 1.5数组解耦赋值的复杂情况 2.对象的解耦赋值 2.1对象解耦赋值的特殊情况 2.2解耦赋值失败 2.3不完全解耦赋值 2.4默认值 3.字符串.数值.和布尔值的解耦赋值 3.1字符串解耦赋值 3.2数值和布尔值的解耦赋值 4.函数的解耦赋值 5.小括号的问题 5.1不能使用小括号的情况 5.2可以使用小括号的情况 6.变量解耦赋值的用处 6.1交换变量的值 6.2从函数返回多个值

  • JS ES新特性 扩展运算符介绍

    一.扩展运算符 扩展运算符是三个点... , 允许将一个表达式原地展开,当需要多个参数(比如函数的调用时) 或者多个值(比如数组)它会将其转为用逗号分隔的参数序列. 示例代码如下所示: // 定义一个数组 let arr = [1, 2, 3, 4, 5, 6] // 使用 ... 扩展运算符展开 console.log(...arr); // 1 2 3 4 5 6 // 定义一个函数 function fun(...item) { console.log(...item); } // 调用函

  • JS ES新特性 模板字符串

    目录 1.模板字符串是什么 2.多行模板字符串 2.1带表达式的模板字符串 3.带标签的模板字符串 4.原始字符串 5.判断是否包含某字符串 5.1includes()方法 5.2startsWith()方法 5.3endsWith()方法 1.模板字符串是什么 模板字符串( Template String )是增强版的字符串,使用反引号(```)来代替谱通字符串中的用双引号和单引号.它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 普通用法如下所示: // 使用 `

  • 探讨:JavaScript ECAMScript5 新特性之get/set访问器

    EcmaScript5简介 首先得先搞清楚ECMAScript是神马,我们知道JavaScript或者说LiveScript最开始是Netscape搞出来的,后来微软也跟进搞出了Jscript,ScriptEase也有自己的CENvi,这样就有了三个版本的浏览器Script各行其是,大家懂这个混乱的,于是乎标准化的问题被提上议事日程.1997年以JavaScript1.1为蓝本的建议被提交到欧洲计算机制造商协会( E uropean C omputer M anufacturers A ssoc

  • javascript中let和var以及const关键字的区别

    1.声明后未赋值,表现相同 //一个例子 'use strict'; (function() { var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest); //输出undefined }()); 2.使用未声明的变量,表现不同 //一个例子 (function() { console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行) console.

  • 了解javascript中let和var及const关键字的区别

    1.声明后未赋值,表现相同 //一个例子 'use strict'; (function() { var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest); //输出undefined }()); 2.使用未声明的变量,表现不同 //一个例子 (function() { console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行) console.

  • JavaScript ECMAScript 6(ES2015~ES2022)所有新特性总结

    目录 前言 ES2015(ES6) let.const关键字和块级作用域 函数的扩展 数值的扩展 字符串的扩展 数组的扩展 对象的扩展 类 模块化 解构赋值 Symbol Promise Iterator Generator Proxy和Reffect Set.Map.WeakSet.WeakMap ES2016(ES7) 指数运算符 Array.prototype.includes()方法 ES2017(ES8) async/await语法糖 Atomics对象 对象扩展 函数扩展 字符串扩展

  • 浅谈ECMAScript6新特性之let、const

    第一次写博客有点紧张,如果说的不对的地方,欢迎大家留言指正.咱们先来说说"ECMAScript"这到底是啥玩意儿?它和javascript的关系又是如何的?首先,在1996年11月的时候,javascript的创造者(网景公司Netscape)和sun公司联合ECMA(欧洲计算机制造商协会)对javascript进行标准化,次年,ECMA发布262号标准文件文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准(在这里提个问题:为什么要标准化?),并将这种语言称为ECMAScri

随机推荐