ES6入门之let和const命令
<h1>媒介</h1><p>各人好，我是一只流浪的kk,当你看到这边博客的时间，说明你已经进入了ES6学习的范畴了，从本篇博客开始，我将会将本身学习到ES6的相干知识举行整理，方便各人参考和学习，那么我将带你进入第一节的内容学习let和const命令，本篇博客从三个方面举行全方位分析。</p>
<h1>let命令</h1>
<p>首先我们必要学习的是let命令的利用，这个利用非常简单，它着实也是声明变量的一种方式，和var相比我把它的特点总结了如下四点，一起来看看吧！</p>
<h4>(1)：根本用法</h4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>let命令的根本用法</title>
</head>
<body>
<script type="text/javascript">
let a=10;
var b=20;
console.log(a);//10
console.log(b);//20
</script>
</body>
</html>
<p>我们看到我们如今是利用let关键字定义变量的，长处的话我们一步一步举行解说</p>
<h4>(2)：不具备变量提升的能力</h4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不具备变量提升的能力</title>
</head>
<body>
<script type="text/javascript">
console.log(a);//报错
let a=10;
console.log(b);//undefined
var b=20;
</script>
</body>
</html>
<p>在这个案例中，我们看到利用let关键字定义的变量会报错，而利用var关键字定义的变量不会报错，这一进一步说明let关键字定义的变量不具备变量提升的能力，从而也时间提示我们养成良好的编程习惯，任何变量都应该依照先定义后利用的原则。</p>
<h4>(3)：临时性死区</h4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>let临时性死区</title>
</head>
<body>
<script type="text/javascript">
if(true){
tep='abc';
console.log(tep);//ReferenceErro
let tep;
console.log(tep);//undefined
tep=123;
console.log(tep);//123
}
</script>
</body>
</html>
<h4>(4)：不答应重复声明</h4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不答应重复声明</title>
</head>
<body>
<script type="text/javascript">
function bar(){
var a=10
let a=20;
let b=10;
let b=20;
}
bar();//报错
function foo(args){
{
let args;
}
}
foo();//不报错
</script>
</body>
</html>
<h1>块级作用域</h1>
<p>在ES5中，我们只有函数级作用域和全局作用域，这对我们的开辟带来很大的不方便，例如同事之间的开辟，变量的定义可能会相同，这就有可能会造成代码发生错误，我先用一个例子来表明一下吧！</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
</head>
<body>
<script type="text/javascript">
let arr=[];
for(var i=0;i<10;i++){
arr=function(){
console.log(i);
}
}
arr();
</script>
</body>
</html>
<p>在这里我们盼望提到当前i,而最闭幕果是10，变量<code>i</code>是<code>var</code>命令声明的，在全局范围内都有用，所以全局只有一个变量i,每一次循环，变量<code>i</code>的值都会发生改变，而循环内被赋给数组<code>a</code>的函数内部的<code>console.log(i)</code>，内里的<code>i</code>指向的就是全局的<code>i</code>。也就是说，全部数组<code>a</code>的成员内里的<code>i</code>，指向的都是同一个<code>i</code>，导致运行时输出的是最后一轮的<code>i</code>的值，也就是 10。那么怎样管理呢？</p>
<p>我们再来看另一个示例</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin: 20px;
font: 30px/100px "microsoft yahei";
text-align: center;
}
</style>
</head>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
<script type="text/javascript">
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
divs.onclick=function(){
alert(i);
}
}
</script>
</body>
</html>
<p>假定页面中有10个div，我们每点击一个div，我们想要弹出当前div的下标，但是都是弹出10，这就是和我们前面提到的情况一样，</p>
<p>管理方案一：利用闭包</p>
<p>在没有ES6之前，我们管理这类问题通常利用闭包，那么什么是闭包呢？以后的章节我会拿出来单独讲，这里讲一下浅近的字面意思：当一个内部函数被调用，就会形成闭包，闭包就是可以或许读取其他函数内部变量的<strong><br /></strong></p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin: 20px;
font: 30px/100px "microsoft yahei";
text-align: center;
}
</style>
</head>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
<script type="text/javascript">
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
divs.onclick=(function(n){
return function(){
alert(n);
}
})(i);
}
</script>
</body>
</html>
<p>如今的话，我们每点击div一次都可以得到当前下标(索引)</p>
<p>管理方案二：利用块级作用域</p>
<p>利用块级作用可以快速管理这个问题</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
</head>
<body>
<script type="text/javascript">
let arr=[];
for(let i=0;i<10;i++){
arr=function(){
console.log(i);
}
}
arr();
</script>
</body>
</html>
<p>在这里，let声明的变量仅在块级作用域内有用，变量<code>i</code>是<code>let</code>声明的，当前的<code>i</code>只在本轮循环有用，所以每一次循环的<code>i</code>着实都是一个新的变量，所以最后输出的是<code>6</code>。你可能会问，假如每一轮循环的变量<code>i</code>都是重新声明的，那它怎么知道上一轮循环的值，从而盘算出本轮循环的值？这是由于 JavaScript 引擎内部会记着上一轮循环的值，初始化本轮的变量<code>i</code>时，就在上一轮循环的基础上举行盘算</p>
<h1>const命令</h1>
<h4>(1)：根本用法</h4>
<p> const声明一个只读的常量，一旦声明，常量的值就不能改变，而且用const声明的常量必须全部大写，例如PI,MAX,MIN等等</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>const根本用法</title>
</head>
<body>
<script type="text/javascript">
const PI=3.14;
console.log(PI);
PI=2
</script>
</body>
</html>
<p>同样，利用const声明的变量不得改变值，所以说const一旦声明变量，就必须立即初始化，不得留到以后赋值</p>
<h4>(2)：临时性死区</h4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>const临时性死区</title>
</head>
<body>
<script type="text/javascript">
if(true){
const MIN=10
}
console.log(MIN);
if(true){
console.log(MAX);
const MAX=10;
}
</script>
</body>
</html>
<p>同样，利用const声明的变量也不具备变量提升的能力</p>
<h4>(3)：不答应重复声明</h4>
<p>同样const命令也不答应重复声明，我们来看下面的例子</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>const不可重复声明变量</title>
</head>
<body>
<script type="text/javascript">
var message='hello world';
let age=18;
const message='你好';//报错
const age=20;//报错
</script>
</body>
</html>
<p>在这里我们用const重复声明变量，控制台输出Uncaught SyntaxError: Identifier 'message' has already been declared,所以const也不答应重复声明变量<br /></p>
<h1>ES6声明变量的六种方法</h1>
<p>在ES5中我们只有var,function两种声明变量的方法，但是在ES6中新增了let,const,import,class等四种声明变量的方法，所以如今我们一共有六种声明变量的方法，在之后的博客中我们回对import，class举行解说。</p>
<h1>总结</h1>
<p>本篇博客我们一共学习了三个知识点，let命令，块级作用域，const命令，以及总结了let命令和const命令的相似之处，这只是简单的ES6入门，下一篇博客是解说变量的解构赋值。</p>
<p> </p><br><br/><br/><br/><br/><br/>来源：<a href="https://www.cnblogs.com/jjgw/p/11675028.html" target="_blank">https://www.cnblogs.com/jjgw/p/11675028.html</a>
页:
[1]