ES6新增关键字let和const介绍

目录
  • 一、let关键字
    • 1、基本语法
    • 2、let和var的区别
      • 2.1、同一作用域内let不能重复定义同一个名称,var可以重复定义
      • 2.2、两者作用域不同
      • 2.3、不存在变量提升
  • 二、const

ES6新增加了两个重要的JavaScript关键字:let和const

一、let关键字

let声明的变量只在let命令所在的代码块内有效。

1、基本语法

let a='123'

2、let和var的区别

var也是用来声明变量,let和var有什么区别呢?区别主要是以下三点:

2.1、同一作用域内let不能重复定义同一个名称,var可以重复定义

看下面的例子:

// 同一个作用域内let不能重复定义同一个名称
let a='123';let a='456'; // 错误
// var可以重复定义
var a=10;
var a=20;

2.2、两者作用域不同

let属于块级作用域,只在当前块内有效。

var属于全局作用域。

看下面的示例:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 同一个作用域内let不能重复定义同一个名称
                // let a='123';let a='456'; // 错误
                // var可以重复定义
                var a=10;
                var a=20;
                // 有着严格的作用域,变量隶属于当前作用域
                // let块级作用域{},var函数作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    console.log(str);
                }
                // 调用函数
                testVar(); // 输出123
                // 定义函数
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 调用函数
                testLet(); // 报错
            }
        </script>
</head>
</html>

效果:

打印str1的时候会报错,因为超出了str1的作用域。

2.3、不存在变量提升

var声明的变量存在变量提升,即可以在变量声明之前就使用该变量,值为undefined;而let不存在变量提升,必须先声明变量才能使用。看下面的例子:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 1、同一个作用域内let不能重复定义同一个名称
                // let a='123';let a='456'; // 错误
                // var可以重复定义
                // var a=10;
                // var a=20;
                // 2、有着严格的作用域,变量隶属于当前作用域
                // let块级作用域{},var函数作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 调用函数
                testVar(); // 输出123
                // 定义函数
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 调用函数
                //testLet(); // 报错
                //3、不存在变量提升
                // var命令会发生‘变量提升'(可以在声明前使用,值为undefined)
                // let不存在变量提升
                console.log(a); // undefined
                var a=12;
                console.log(b); // 报错:b is not defined
                let b='123';
            }
        </script>
</head>
</html>

效果:

二、const

const与let的相同点:都是块级作用域。

不同点:const声明的是一个只读的常量,声明之后就不允许改变。意味着,声明的同时必须初始化。看下面的例子:

const pi='3.1415926';
pi='3.1415927'

查看控制台结果:

声明的同时必须初始化,看示例:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 1、同一个作用域内let不能重复定义同一个名称
                // let a='123';let a='456'; // 错误
                // var可以重复定义
                // var a=10;
                // var a=20;
                // 2、有着严格的作用域,变量隶属于当前作用域
                // let块级作用域{},var函数作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 调用函数
                testVar(); // 输出123
                // 定义函数
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 调用函数
                //testLet(); // 报错
                //3、不存在变量提升
                // var命令会发生‘变量提升'(可以在声明前使用,值为undefined)
                // let不存在变量提升
                // console.log(a); // undefined
                // var a=12;
                // console.log(b); // 报错:b is not defined
                // let b='123';

                // const 只读常量
                // 相同:与let都是块级作用域
                // const pi='3.1415926';
                // pi='3.1415927' // 不允许修改
                const b; // 错误:声明的时候必须初始化
            }
        </script>
</head>
</html>

控制台结果:

注意:

const 如何做到变量在声明初始化之后不允许改变的?其实 const 其实保证的不是变量的值不变,而是保证变量指向的内存地址所保存的数据不允许改动。此时,你可能已经想到,简单类型和复合类型保存值的方式是不同的。是的,对于简单类型(数值 number、字符串 string 、布尔值 boolean),值就保存在变量指向的那个内存地址,因此 const 声明的简单类型变量等同于常量。而复杂类型(对象 object,数组 array,函数 function),变量指向的内存地址其实是保存了一个指向实际数据的指针,所以 const 只能保证指针是固定的,至于指针指向的数据结构变不变就无法控制了,所以使用 const 声明复杂类型对象时要慎重。

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 1、同一个作用域内let不能重复定义同一个名称
                // let a='123';let a='456'; // 错误
                // var可以重复定义
                // var a=10;
                // var a=20;
                // 2、有着严格的作用域,变量隶属于当前作用域
                // let块级作用域{},var函数作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 调用函数
                testVar(); // 输出123
                // 定义函数
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 调用函数
                //testLet(); // 报错
                //3、不存在变量提升
                // var命令会发生‘变量提升'(可以在声明前使用,值为undefined)
                // let不存在变量提升
                // console.log(a); // undefined
                // var a=12;
                // console.log(b); // 报错:b is not defined
                // let b='123';

                // const 只读常量
                // 相同:与let都是块级作用域
                // const pi='3.1415926';
                // pi='3.1415927' // 不允许修改
                // const b; // 错误:声明的时候必须初始化
                // 数组
                const arr=[];
                arr.push('123');
                console.log(arr);
                // 对象
                const obj={};
                obj.name='abc';
                console.log(obj);
            }
        </script>
</head>
</html>

控制台结果:

到此这篇关于ES6新增关键字let和const的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 深入浅出ES6之let和const命令

    let和const声明的变量只在代码块内有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 不存在变量提升 变量一定要在声明后使用,否则报错 var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError let tmp; } 不允许重复声明 // 报错 function () { let a = 10; var a = 1; } 块级作用域 f

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

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

  • ES6入门教程之let、const的使用方法

    一.前提 解决ES5中只有全局作用域和函数作用域,没有块级作用域而带来的不合理的场景. let 基本用法 用法和var 一样,只是let声明的变量只有在let命令所在的代码块有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 可以看出var 声明的变量在代码块之外也是可以调用,而let声明的则调用报错.所以let 声明只在它声明的当前代码块中才能调用. 变量提升 在使用 var 的时候会出现 "变

  • ES6中let 和 const 的新特性

    在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量.本文给大家介绍ES6中let 和 const 的特性,具体内容如下所示: let的特性: 1.不存在变量提升现象:即声明前使用,报ReferenceError.适用于for循环计数器. 2.暂时性死区:即在块级作用域内使用let声明变量,该变量只能在该作用域内使用. 3.不允许重复声明:let声明过的变量不能再次声明,否则报错. const的特性:

  • ES6新特性一: let和const命令详解

    本文实例讲述了ES6新特性中的let和const命令.分享给大家供大家参考,具体如下: 1. let 命令 ① 在js中是没有块级作用域的,var 声明的变量作用域是整个函数体,而let可以起到这一作用 { let a = 1; var b = 2; } console.log(b); // 2 console.log(a); // a is not defind ② 而let可以起到这一作用啊在js中变量和函数的声明会提升到当前作用域最顶部执行.这样就会出现问题. var a = []; //

  • ES6学习笔记之let与const用法实例分析

    本文实例讲述了ES6学习笔记之let与const用法.分享给大家供大家参考,具体如下: 在ES6中不是var,而是通过let来声明变量,用const来声明常量,有如下一些不同: 1.let与const作用域只限于当前代码块{},而var则没有这种限制. 2.使用let.const申明的变量作用域不会被提升.例如: console.log(str); var str="var declare"; 控制台输出undefined:因为变量申明是在任意代码执行前处理的,在代码区中任意地方声明变

  • ES6 let和const定义变量与常量的应用实例分析

    本文实例讲述了ES6 let和const定义变量与常量的应用.分享给大家供大家参考,具体如下: 关于 let let是小作用域的变量的声明 { var a = 12; let b = 15; { console.log(a); // 12 console.log(b); // 15 } } let 是块级作用域,不会被提升:var是函数级的变量,存在变量提升,外部可访问 console.log(a); // Uncaught ReferenceError: a is not defined,直接

  • ES6入门教程之let和const命令详解

    前言 在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量. 函数级作用域会导致一些问题就是某些代码块内的变量会在全局范围内有效,这我们是非常熟悉的: for (var i = 0; i < 10; i++) { console.log(i); // 0,1,2...,9 } console.log(i); //10 if(true){ var s = 20; } console.log(s); //

  • ES6中let、const的区别及变量的解构赋值操作方法实例分析

    本文实例讲述了ES6中let.const的区别及变量的解构赋值操作方法.分享给大家供大家参考,具体如下: 声明:本文内容依照阮一峰老师ECMAScript 6 入门一书所总结. let和const 相同点 都存在块级作用域 都不存在变量声明提升 都会造成"暂时性死区" 在一个作用域下不可重复声明 不同点 const一旦声明必须立即赋值 const声明的变量指向的内存地址不得改动. 变量解构赋值 数组的解构赋值 解构成功 let [a, b, c] = [1, 2, 3]; 解构不成功

  • es6中let和const的使用方法详解

    本文实例讲述了es6中let和const的使用方法.分享给大家供大家参考,具体如下: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表

随机推荐