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

 更新时间:2021年12月02日 09:04:39   投稿:hqx  
这篇文章主要介绍了基于JavaScript ES新特性let与const关键字,let是ECMAScript 2015新增的一个关键字,用于声明变量,const关键字用于声明一个常量,更多详细内容,请需要的小伙伴参考下面文章的介绍,希望对你有所帮助

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关键字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript立即执行函数用法解析

    JavaScript立即执行函数用法解析

    这篇文章主要介绍了JavaScript立即执行函数,我们知道,在一般情况下,函数必须先调用才能执行,如下所示,我们定义了一个函数,并且调用,下面一起进入文章来接具体的使用方法吧
    2021-12-12
  • 微信公众号菜单配置微信小程序实例详解

    微信公众号菜单配置微信小程序实例详解

    这篇文章主要介绍了微信公众号菜单配置微信小程序实例详解的相关资料,需要的朋友可以参考下
    2017-03-03
  • 微信小程序 MD5加密登录密码详解及实例代码

    微信小程序 MD5加密登录密码详解及实例代码

    这篇文章主要介绍了微信小程序 MD5加密登录密码详解及实例代码的相关资料,这里附有实例代码,需要的朋友可以参考下
    2017-01-01
  • 关于js typeof 与 instanceof 判断数据类型区别及开发使用

    关于js typeof 与 instanceof 判断数据类型区别及开发使用

    我们经常会遇到判断一个变量的数据类型或该变量是否为空值的情况,你是如何去选择判断类型操作符的?本文来记录一下我们开发人员必须掌握关于 typeof 和 instanceof 的知识点及在开发中的使用建议,同时在面试过程中也经常会遇到这样的问题,需要的朋友可参考下文章内容
    2021-10-10
  • 小程序开发实战:实现九宫格界面的导航的代码实现

    小程序开发实战:实现九宫格界面的导航的代码实现

    本篇文章主要介绍了小程序开发实战:实现九宫格界面的导航的代码实现,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • 微信小程序中使元素占满整个屏幕高度实现方法

    微信小程序中使元素占满整个屏幕高度实现方法

    这篇文章主要介绍了微信小程序中使元素占满整个屏幕高度实现方法的相关资料,需要的朋友可以参考下
    2016-12-12
  • JavaScript组合继承详解

    JavaScript组合继承详解

    这篇文章主要介绍了JavaScript组合继承,下面文章将围绕了JavaScript组合继承的相关资料展开详细内容,需要的小伙伴可以参考一下,希望对你有所帮助
    2021-11-11
  • 常用的前端JavaScript方法封装

    常用的前端JavaScript方法封装

    这篇文章主要向大家介绍的是一些常用的前端JavaScript方法封装,数组去重、字符串去重、深拷贝 浅拷贝、reverse底层原理和扩展、圣杯模式的继承等多个方法,需要的朋友可以阅读下文的具体内容
    2021-09-09
  • 微信小程序 toast组件详细介绍

    微信小程序 toast组件详细介绍

    这篇文章主要介绍了 微信小程序 toast组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • JavaScript sort方法实现数组升序降序

    JavaScript sort方法实现数组升序降序

    这篇文章主要为大家介绍了JavaScript sort方法实现数组升序降序示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07

最新评论