ES6教程:let和const命令的用法

ES6中新增了let和const命令,分别用于声明变量和常量。

1. 使用let命令取代var命令

在ES6之前的版本中,使用var声明变量,在ES6中新增了let来声明变量。let完全可以取代var,因为二者的语义相同,而且let没有“副作用”。

我们先来看一下let命令有哪些特点:

  1. 不存在变量提升:变量只有在声明之后才能使用;
  2. 不允许重复声明:在相同的作用域下,一个变量名只能使用一次,不能重复声明;
  3. 具有块级作用域:在代码块中声明的变量,只对当前代码块和其内部嵌套代码块有效,如果嵌套代码块中声明了同名变量时,则对该嵌套代码块无效;
  4. 存在暂时性死区:当全局变量与代码块中变量同名时,代码块中的变量就有了块级作用域,其变量声明前不能使用。

JavaScript是弱类型的编程语言,在ES6之前使用var关键字声明变量,会发生变量提升的现象。简单来说,就是在声明变量之前就对该变量进行调用,程序不会报错,而且打印出来的值为undefined。如果是有Java或C++编程经验的小伙伴,肯定对这种现象是无法忍受的。我们用一段代码来演示一下这种现象:

function test(){
    console.log(i);
    var i = 1;
}
test();

运行结果:

undefined

上面代码中,变量i是使用var命令声明的,我们在变量声明之前在控制台打印i,虽然此时变量i还没有声明,但是该变量已经存在了,只不过是没有值,所以会输出undefined

如果是同样的代码,把var替换成let来声明,其他代码不变,程序运行后的结果为:

当变量使用let声明时,不会发生变量提升,这就说明在变量声明之前,变量i是不存在的,要打印一个不存在的变量,就会抛出上面的错误。

在ES5 中有两个作用域,分别是全局作用域和函数作用域,到了ES6就新增了一个块级作用域。如果没有块级作用域的话,在处理业务场景时会带来很多不便,比如内层变量覆盖外层变量,再或者是使用for循环时,循环中迭代的变量泄露为全局变量等等。

ES6中的let命令为JavaScript新增了块级作用域,我们看下面的代码:

function test() {
    let i = 1;
    if(true){
        let i = 2;
    }
    console.log(i);
}
test();

运行结果为:

1

test()函数代码块中,对变量i做了两次声明,按照var命令声明变量的逻辑,结果应该是2,但是使用let命令声明的变量,在该变量的代码块中,不受内层代码块的影响。无论有多少层级的代码块,其每一层都有一个单独的作用域。在内层作用域中可以定义外层作用域的同名变量,但变量的值不受外层作用域变量的影响。

如果理解了let命令的块级作用域的话,那么再来理解暂时性死区,就轻松多了。我们对上面那段代码稍加改造,演示暂时性死区:

function test() {
    let i = 1;
    if(true){
        console.log(i);
        let i = 2;
    }
    console.log(i);
}
test();

运行结果为:

由于各层级代码块都有自己单独的作用域,内层作用域不受外层的影响,所以当我们在if()语句中再次声明变量i时,该作用域下的变量是独立存在的,在未声明之前就调用该变量,就会出现我们前面说过的“变量提升”的概念,let命令是不存在变量提升的,所以就会抛出上面这种错误。

2. 使用const命令声明常量

const命令的用法和let类似,使用const命令声明的是一个只读常量,一旦声明,常量的值就不能改变。const声明的变量值不能改变,这就意味着,变量一旦声明后,就必须马上给其赋初始化值。

但是在letconst之间,我建议优先使用constconst相比let而言,有几个优点:

一是const从语义上就表示常量,那就可以提醒协同开发的其他人员,这个变量的值不能被修改,防止误操作修改变量的值导致程序出错;

二是const比较符合函数式的编程思想,运算不改变值,只是新建值;

三是JavaScript编译器会对const进行优化,如果const使用频率比较高的话,有利于提高程序的运行效率,这取决于letconst在底层编译器内部的处理差异。

如果从长远的角度看,JavaScript有可能会实现多线程编程,考虑到线程安全,let命令声明的变量只能在单线程中使用,不能用于多线程的数据共享。

原文地址:https://blog.51cto.com/6323662/2472640

时间: 2024-07-28 19:18:32

ES6教程:let和const命令的用法的相关文章

ES6中let与const命令详解

阮一峰ES6入门 let 作用域 let命令用来声明变量,但声明的变量只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 for循环 上图代码中i是var声明的,在全局范围内部有效,所以全局只有一个变量i. 每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i. 也就是说数组a的成员里面的i,指向

es6的let 和const命令

1.不存在变量提升,即变量不可以在声明之前使用,否者会报错(值为undefined). 2.ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域.凡是在声明之前就使用这些变量,就会报错. 3.不允许重复声明. 4.let和const为js新增了块级作用域.(function({}())); 5.const定义常量,对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针. 原文地址:https://www.cnbl

1.《ES6标准入门》(阮一峰)--2.let 和 const 命令

1.let命令 基本用法 let只在命令所在的代码块内(花括号内)有效. for循环的计数器,就很合适使用let命令. //var var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 //let var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i)

let和const命令

基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表明,let声明的变量只在它所在的代码块有效. for循环的计数器,就很合适使用

1.let 和 const 命令

let 和 const 命令 let 和 const 命令 let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表明

let 和 const 命令

let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表明,let声明的变量只在它所在的代码块有效. for循环的计数

ES6标准学习: 1、let 与 const 命令

1.let命令 一.基本用法 首先看下面一段代码: var a = [] for (var i = 0; i < 10; i++) { a[i] = function () { return i } } a.map(fn => { console.log(fn()) }) 以上代码的运行结果可能是什么? 0, 1, 2, ... 9  ? 结果是:连续输出了10次 10 简单的解释就是,当使用map遍历a中的每一个fn时,当fn执行时,在作用域链上查找i时,找到的i是最终已经变成了10的i,而

ES6入门之let和const命令

前言 大家好,我是一只流浪的kk,当你看到这边博客的时候,说明你已经进入了ES6学习的领域了,从本篇博客开始,我将会将自己学习到ES6的相关知识进行整理,方便大家参考和学习,那么我将带你进入第一节的内容学习let和const命令,本篇博客从三个方面进行全方位解析. let命令 首先我们需要学习的是let命令的使用,这个使用非常简单,它其实也是声明变量的一种方式,和var相比我把它的特点总结了如下四点,一起来看看吧! (1):基本用法 <!DOCTYPE html> <html> &

ES6之let(理解闭包)和const命令

ES6之let(理解闭包)和const命令 最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉.因此购买了阮一峰老师的ES6标准入门,在此感谢阮一峰老师的著作. 我们知道,ECMAScript 6即ES6是ECMAScript的第五个版本,因为在2015年6月正式发布,所以又成为ECMAScript2015.ES6的主要目的是为了是JS用于编写复杂的大型应用程序,成为企业级的开发语言. 说明:由于有时候我们希望得知es6代码的具体实现原理或者说希望能够转化为es5使用,