当前位置:首页 > 日记 > 正文

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

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

前言

在javascript中,我们都知道使用var来声明变量。javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量。

函数级作用域会导致一些问题就是某些代码块内的变量会在全局范围内有效,这我们是非常熟悉的:

for (var i = 0; i < 10; i++) { console.log(i); // 0,1,2...,9}console.log(i); //10if(true){ var s = 20;}console.log(s); //20

在es6中增加了let(变量)和const(常量)来声明变量,使用的是块级作用域,变量声明只在代码块内有效,下面来看看详细的介绍:

let命令

ES6新增了let命令用于声明变量。它的用处和var很相似,只不过let所声明的变量只在let命令所在的代码块内有效。

看下下面代码:

 {  let a = 10;  var b = 9; } alert( a ); // ReferenceError: a is not defined alert( b ); //9

再看看下面代码:

var a = []; for(var i = 0; i < 10; i++) {  var c = i;  a[i] = function() {   console.log( c );  }; } a[6](); //9

而如果使用let声明的话,最后输出的值是“6”。代码如下:

var a = [];for (var i = 0; i < 10; i++) {  let c = i;  a[i] = function() {   console.log( c );  };}a[6](); //6

此外,let声明的变量不会提升。看下下面的代码片段。

 function do_someting() {  console.log( a ); //ReferenceError  let a = 2; }

最后,let不允许在相同的作用域内,重复声明同一个变量。

 // 报错 {  let a = 10;  var a = 1; } // 报错 {  let a = 10;  let a = 1; }

let实际上是JavaScript增加的块级作用域。

 function foo() {  let n = 6;   if (true) {   let n = 10;  }  console.log( n ); //6 }

上面代码有两个代码块,都声明了n变量,运行后输出的是6。这表明外层代码块不受内层代码块的影响。如果,改成使用var定义变量n的话,最后输出的就是10.

另外,ES6还规定,函数本身的作用域在其所在的代码块作用域之内。

 function f() { console.log("I am outside"); } (function () {  if (false) {   //重复声明一次函数f   function f() {    console.log("I am inside");   }  }  f(); }());

上面的代码片段,在ES5中运行会得到“Iam inside”, 但是在ES6中运行,则会得到“Iam outside”。

const命令

const是用来声明常量的。一旦声明,其值就不能改变。

 const PI = 3.1415; console.log( PI ); //PI PI = 3; console.log( PI ); //3.1415 const PI = 3.1; console.log( PI ); //3.1415

有一点需要我们注意的是,对常量的重复定义不会报错,它只会默默的失败。

const的作用域与let命令相同:即只在声明所在的块级作用域内有效。

 if(condition) {  const MAX = 5; } // 常量MAX在此处不可见(或者说不可得)

此外,const常量也不可重复声明。

 var message = "Hello!"; let age = 25; //以下两行都会报错 const message = "Goodbye!"; const age = 30;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。

相关文章

如何在PPT中制作文字动画效果

如何在PPT中制作文字动画效果

动画效果,文字,如何在,电脑软件,PPT,  为什么别人的PPT就制作的那么好看呢?其实没有什么不同的,只是我们不会用PPT而已。现在很多幻灯片中都会选择文字动画效果,立马给人很高大上的感觉。以下是小编为您带来的关于PPT制作文字动画效果,希望…

ORACLE自动备份控制文件的方法介绍

ORACLE自动备份控制文件的方法介绍

自动备份,方法,控制文件,电脑软件,ORACLE,RMAN(Recovery Manager)是一个用于备份Oracle工具(备份),恢复(恢复)和恢复(恢复)databases.rman只能用于Oracle8或更高版本。它可以备份整个数据库或数据库组件,如表空间,数据文件,控制文件,归档文件,并为参数fil…

Illustrator简单绘制一个可爱的小

Illustrator简单绘制一个可爱的小

图标,绘制,饼干,可爱,简单,今天为大家分享Illustrator简单绘制一个可爱的小饼干图标方法介绍,操作很简单,也很基础,喜欢的朋友可以跟着这篇教程进行操作,希望能对大家有所帮助!步骤:教程结束,以上就是Illustrator简单绘制一个可爱的小饼干图标教程…

InDesign字符集基线偏移、旋转和间

InDesign字符集基线偏移、旋转和间

字符集,基线,间距,电脑软件,InDesign,以通用符号的字符特征为例,介绍了字符基线偏移、旋转和距离的设置方法。 步: 1、拖动鼠标选择风字。 2、按Ctrl + T组合键打开字符面板;;,基线偏移;输入- 3按下{Enter}键,然后输入字符旋转15按下{Enter}键。…

Word2016文档裁剪图形的方法是什么

Word2016文档裁剪图形的方法是什么

文档,方法,图形,电脑软件,  我们向Word中插入图片之后,有时候会因为图片的大小或者只想保留图片某些部分而对图片进行裁剪,相比于早期的版本Word2016中的裁剪更为强大和好用。以下是小编为您带来的关于Word2016裁剪图形的方法,希望对您有所…

基于Node.js的WebSocket通信实现

基于Node.js的WebSocket通信实现

电脑软件,Node,js,WebSocket,node的依赖包node中实现Websocket的依赖包有很多,websocket、ws均可,本文选取ws来实现,首先安装依赖npm install ws聊天室实例假如A,B,C,D用户均通过客户端连接到Websocket服务,其中每个人发的消息都需要将其通过We…

PHP基于关联数组20行代码搞定约瑟

PHP基于关联数组20行代码搞定约瑟

数组,约瑟夫,示例,代码,电脑软件,本文实例讲述了PHP基于关联数组20行代码搞定约瑟夫问题。分享给大家供大家参考,具体如下:记得前段时间一写做java开发的兄弟对我说他java60行做了个约瑟夫问题,挺不错的。调侃php应该写这个挺不行的。于是 呵…

详解vuex 中的 state 在组件中如何

详解vuex 中的 state 在组件中如何

组件,详解,电脑软件,state,vuex,前言不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的。组件在渲染过程中,获取的state状态为空。也就是说组件在异步完成之前就已经完成渲染了…

PS滤镜如何制作彩色玻璃

PS滤镜如何制作彩色玻璃

滤镜,彩色玻璃,电脑软件,PS,   这个教程介绍运用了一系列的滤镜制作玻璃网效果,不过用到的滤镜都是平时非常常用的,如果我们平时多细心一点,也可以用这些滤镜制作更加丰富的创意图形!下面跟小编来了解一下如何用PS滤镜制作彩色玻…

微信小程序教程系列之页面跳转和参

微信小程序教程系列之页面跳转和参

页面跳转,参数传递,教程,程序,系列之,关于页面的跳转,微信小程序提供了3种方法:方法一:使用API wx.navigateTo()函数示例:首先先新建一个test页面如何新建页面?请到先阅读下面教程微信小程序的新建页面 —— 微信小程序教程系列(4)index.wxml:在i…

PS背光如何将深色照片变亮

PS背光如何将深色照片变亮

照片,深色,如何将,变亮,电脑软件,有时在照片中,不容易得到一个自己一个意义上的场景,有逆光,避光,不是拿着好看的风景的美景,而是不怜惜,他又拿了什么光,回家后,画出了好黑的森林啊!如果你有这样的图片,不要把它拿出来,试试下面的方法看看它是否改变了…

win10怎么开启移动热点

win10怎么开启移动热点

热点,电脑软件,Windows10如何用无线网卡创建移动热点?由于有些地方没有网络,所以我们需要使用无线网卡进行上网。无论是无线网卡还是USB无线网卡都有承载网络模式,承载网络是指把接收到的无线信号再创建一个Wifi热点给手机使用,这样是不是就方…