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

ES6—— let 和 const 命令

引言

本文主要讲解ES6中变量的相关操作，变量的命名， 讲解 var、 let 、 const 三者的区别

正文

ES6中的 let 和 const 都是用来声明变量的， 他们与 var 有所区别

let 命令

我们都知道在for循环中，我们命名的变量 i 一般都只是为了在这个循环中使用，才临时命名的， 我们希望循环结束后，这个变量就消失， 但是却相反，用 var 命名的变量，在 for 循环结束后并不会销毁，而会存在于全局中。

for(var i=0; i<5; i++) {
	console.log('循环'+ i)
}
console.log(i)

/* 输出结果  */
循环1
循环2
循环3
循环4
5           // 这里是循环外输出的i

但是如果我们在 for 循环中，用到 let 去命名变量会怎么样呢？

for(let i=0; i<5; i++) {
	console.log('循环'+ i)
}
console.log(i)

/* 输出结果  */
循环1
循环2
循环3
循环4
undefined           // 这里是循环外输出的i,显示未定义

这样的话就解决了因为 var 命名导致的变量泄露的问题了, 其实它的本质就是作用域， let 只作用于他自身所在的代码块内，而 var 是针对全局都有效的。例如这一个简单的例子：

{
	let i = 1
	var n = 2
}
console.log(i)
console.log(n)

/* 输出结果 */
undefined
2

可以看到， let 命名的变量只存在于那个代码块内，到外部就访问不到了，而 var 就是针对全局命名的。

const 命令

const 和 let 类似，也是命名的变量只能在它所在的代码块内能被访问得到，到外部就无法被访问到，但是 const 与 let 的区别就在于， const 命名的变量是一个只读变量，简而言之就是命名了就无法在后面被修改，例如这个例子：

const a = 'apple'
let b = 'orange'

a = 'watermelon'
b = 'banana'

/* 输出结果 */
a = 'watermelon'
  ^

显而易见， 系统会直接报错， 因为 const 命名的变量 a 是无法改变的， 后续无法对其进行赋值。

其实 const 命名变量以后， 也不是说就真的无法改变了， 因为const命名时其实是把箭头指向了内存中的一个对象， 只要不改变这个对象地址， const 命名的变量还是可以变化的，例如：

const list1 = []

list1.push('变化1')

console.log(list1)

// ['变化1']

可以看到 list1.pish(' 变化1 ') 不会改变 变量 list1在内存中的地址。

但是 list1 = [ '变化1' ] 就会改变 list1 在内存中的地址，所以会报错

const list1 = []

list1 = ['变化1']

console.log(list1)

// 报错：list1 = ['变化1']
       ^

结束语

这就是 let 和 const 的简单应用，希望对大家有所帮助， 下一篇ES6（2）将讲解变量的解构赋值

到此这篇关于JavaScript中ES6规范中let和const的用法和区别的文章就介绍到这了,更多相关JavaScript中let和const用法区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 5分钟快速掌握JS中var、let和const的异同

    前言 首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展. 2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5 2015 年 6 月,ECMAScript 6 正式通过,成为国际标准

  • 详解javascript中var与ES6规范中let、const区别与用法

    随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

  • JavaScript变量声明var,let.const及区别浅析

    var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局变量,并且赋值为0. console.log(typeof z); // undefined,因为z还不存在. function a() { // 当a被调用时, var y = 2; // y被声明成函数a作用域的变量,然后赋值成2. console.log(x, y); // 0 2 function b() { // 当b被调用时, x = 3; // 全局变量x被赋值为3,不生成全局变量. y = 4;

  • javascript中let和var以及const关键字的区别

    1.声明后未赋值,表现相同 //一个例子 'use strict'; (function() { var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest); //输出undefined }()); 2.使用未声明的变量,表现不同 //一个例子 (function() { console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行) console.

  • JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. const b = 2;//正确 // const b;//错误,必须初始化 console.log('函数外const定义b:' + b);//有输出值 // b = 5; // console.log('函数外修改const定义b:' + b);//无法输出 2.var定义的变量可以修改,

  • JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别... var x = 1; y = 4; console.log(x);//1 console.log(y);//4 console.log(window.x);//1 console.log(window.y);//4 简单测试下可以知道定义的x和y都被挂载在window对象上,变为window下的属性,这并不能说明什么... delete x; delet

  • JavaScript ES6中const、let与var的对比详解

    ECMAScript 6 新增 const 和 let 命令,用来声明变量. 声明方式 变量提升 作用域 初始值 重复定义 const 否 块级 需要 不允许 let 否 块级 不需要 不允许 var 是 函数级 不需要 允许 变量提升:const 和 let 必须先声明再使用,不支持变量提升 console.log(c1, l1, v1); // 报错 // Uncaught ReferenceError: c1 is not defined const c1 = 'c1'; let l1 =

  • JavaScript中var、let、const区别浅析

    下面通过代码给大家介绍JavaScript中var.let.const区别,具体代码如下所述: //1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. var a; console.log(a); //undefined //2.let是块级作用域,函数内部使用let定义后,对函数外部无影响. let c = 3; console.log(c) function change(){ let c = 6; console.log(c) } change(); (1)只要

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

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

  • Numpy中np.random.rand()和np.random.randn() 用法和区别详解

    numpy.random.rand(d0, d1, -, dn)的随机样本位于[0, 1)中:本函数可以返回一个或一组服从**"0~1"均匀分布**的随机样本值. numpy.random.randn(d0, d1, -, dn)是从标准正态分布中返回一个或多个样本值. 1. np.random.rand() 语法: np.random.rand(d0,d1,d2--dn) 注:使用方法与np.random.randn()函数相同 作用: 通过本函数可以返回一个或一组服从"0

  • JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且

  • 解析JavaScript的ES6版本中的解构赋值

    什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray

  • JavaScript中 ES6变量的结构赋值

    变量的结构赋值用户很多 1.交换变量的值 let x = 1; let y = 2; [x,y] = [y,x] 上面的代码交换变量x和变量y的值,这样的写法不仅简洁,易读,语义非常清晰 2.从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能讲他们放在数组或者对象里返回.了解 解构赋值 ,取值这些值非常方便 //返回一个数组 function example(){ return [1,2,3]; } let [a,b,c] = example(); [a,b,c]; //[1,2,3]

  • JavaScript中ES6字符串扩展方法

    es6这个String对象倒是扩展了不少方法,但是很多都是跟字符编码相关,个人选了几个感觉比较常用的方法: includes 搜索字符的神器 还记得我们之前如何判断某个字符串对象是否包含特地字符的吗? var str='google'; if(str.indexOf('o')>-1){ console.log('yes'); }else{ console.log('no'); } indexOf本来只是一个获取字符对应位置的方法,因为找到不到会返回-1这个值,就成了判断是否包含的方法,inclu

  • JavaScript中 ES6 generator数据类型详解

    1. generator简介 generator 是ES6引入的新的数据类型, 看上去像一个函数,除了使用return返回, yield可以返回多次. generator 由function* 定义, (注意*号), 2. 示例 函数无法保存状态, 有时需要全局变量来保存数字: 2.1 'use strict'; function next_id(){ var id = 1; while(id<100){ yield id; id++; } return id; } // 测试: var x,

  • JavaScript中ES6 Babel正确安装过程

    JavaScript中ES6 Babel正确安装过程

    本文介绍Babel6.x的安装过程~首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行环境,针对Babel6.x版本) 1.首先安装babel-cli(用于在终端使用babel) npm install -g babel-cli 2.然后安装babel-preset-es2015插件 npm install --save babel-preset-es2015 注:Babel5版本默认包含各种转换插件,然而Babel6.x相

  • 原生JavaScript之es6中Class的用法分析

    本文实例讲述了原生JavaScript之es6中Class的用法.分享给大家供大家参考,具体如下: es6class写法 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } es5写法 function Point(x, y) { this.x = x; this.y = y; } Point.prototyp

随机推荐