ES6语法:let和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>

控制台结果:

原文地址:https://www.cnblogs.com/dotnet261010/p/10805516.html

时间: 2024-10-10 13:17:52

ES6语法:let和const的相关文章

ES6语法将扁平的JSON对象结构化

适用于支持ES6语法的项目中. Form表单提交整个Table的数据,每单个表单必须有唯一的name,当数据量较大时,不可能去手动设置每一个name名. 因此通过遍历出有规律的name,然后通过Form表单提交所有数据,再去处理数据,将其转为分类的结构化数据,作为参数传给后端. const obj = { id0: 'id000', id1: 'id001', id2: 'id002', num0: 'num000', num1: 'num001', num2: 'num002', card0:

Es6语法

1. let, const 这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途. 首先来看下面这个例子: var name = 'zach' while (true) { var name = 'obama' console.log(name) //obama break } console.log(name) //obama 使用var 两次输出都是obama,这是因为ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景.第一种场景就是你现在

如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!

为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性进行兼容,那么浏览器肯定无法识别我们的ES6代码,好比浏览器根本看不懂我写的let和const是什么东西?只能报错了.这就是浏览器对ES6的兼容性问题. 好消息 哪里有灾难,哪里就有勇士和救兵,针对ES6的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的ES6语法转换成ES5,相当于

ES6语法的学习与实践

ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常用到的ES6语法做简要的介绍. 1.let,const let和const是ES6中新增的两个关键字,用来生命变量,let和const都是块级作用域.let声明的变量只在let命令所在的代码块内有效.const声明一个只读变量,一旦声明,常量的值就不可更改.与var声明的变量不同,var声明的是函数

gulp打包js多个文件夹并压缩混淆,编译ES6语法

感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件gulp-uglify 执行: cnpm install gulp-uglify --save-dev (这里暂时都用淘宝镜像cnpm) 这时候已经可以开始压缩es5的js文件了,但是我们要编译es6语法,那就需要babel 执行: cnpm install gulp-babel --save-dev

react入门系列之todolist代码优化(使用react 新特性,es6语法)

代码优化 1 /** 2 - 今天我们通过es6语法,以及react新特性来优化我们的todo-list 3 - 顺带解决上个版本的key报错问题 4 */ 使用es6的解构赋值优化代码 1 /** 2 - 当我们需要一个对象某个属性的时候,我们可以使用解构赋值,这样在后续的代码就不需要通过原对象不停调用属性去获取了 3 - const { index } = this.props -----> 这就是解构赋值,在后续同一作用域使用this.props.index的时候直接使用index就可以了

ES6语法介绍

刚开始用vue或者react,很多时候我们都会把ES6这位大兄dei加入我们的技术栈中.但是ES6那么多那么多特性,我们真的需要全部都掌握吗?秉着二八原则,掌握好常用的.有用的这个可以让我们的开发快速起飞. 接下来我们就聊聊ES6那些可爱的新特性吧. 1.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: function aa() { if(flag) { var

面试时面试官想要听到什么答案 关于es6中let、const、promise、块级作用域的问题

前言 前面写了一篇关于vue方面问题的面试题(面试时面试官想要听到什么答案(关于一些vue的问题)),感谢大家的阅读和意见,今天整理了一下我面试时经常会问到的一些关于es的问题,写了这篇文章,感谢拨冗翻阅拙作,敬请斧正.因为最近比较忙es6的问题就写了这些,写的比较水了,这些也是我比较常问的还有一些比较碎的内容面试问了但本文未体现只挑选了重点的,class和symbol也是两个重点,因为我了解不深所以就没有去问这两个 - -下面进入正文,本文会列举一些平时面试时问到的问题和答案,并说明我在当时问

es6学习 -- let和const

在es6中let和const声明的变量都只能在其声明的块级作用域中使用,所谓的块级作用域就是{}这么一对大括号. 为什么需要块级作用域? ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 第一种场景,内层变量可能会覆盖外层变量. var tmp = new Date(); function f() { console.log(tmp); if (false) { var tmp = 'hello world'; } } f(); // undefined 上面代码的原

WebStorm ES6 语法支持设置

ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言. 作为一只猴子,我也想尝试一下ES6有什么新特性,于是开始了学习之路. 在webstorm写下了这段代码,体验一下ES6语法的便利,但是一大堆报错 各种语法错误 what the fuck 相信每一只程序猴都不想在这样的环境下编码,