ES6学习(二) -- let&const

栏目: JavaScript · 发布时间: 4年前

内容简介:var有三个特点:变量声明提升、可重复定义、全局变量挂在到window上。这三个特点有时候往往适得其反,开发时有时候并用不上。全局作用域:定义的变量可以在任何地方引用 局部作用域:函数中定义的变量只在函数中才可以使用,这时候就会有很多问题,比如闭包等let例:

var有三个特点:变量声明提升、可重复定义、全局变量挂在到window上。这三个特点有时候往往适得其反,开发时有时候并用不上。

作用域

全局作用域:定义的变量可以在任何地方引用 局部作用域:函数中定义的变量只在函数中才可以使用,这时候就会有很多问题,比如闭包等

let

  • let声明的变量不会进行变量声明提升;

let例:

console.log(a);
let a = 1;
复制代码

报错:

ES6学习(二) -- let&const

var例:

console.log(a);
var a = 1;
复制代码

不报错:

ES6学习(二) -- let&const
  • 重复声明变量,会报错;

let例:

let a = 1;
let a = 10;
复制代码

报错:

ES6学习(二) -- let&const

var例:

var a = 1;
var a = 10;
复制代码

不报错。

let-var例:

var a = 1;
let a = 10;
复制代码

报错:

ES6学习(二) -- let&const
  • let声明的变量不会挂在到window上;

let例:

let a = 10;
console.log(window.a)
复制代码

找不到:

ES6学习(二) -- let&const

var例:

var b = 100;
console.log(window.b)
复制代码

可以找到:

ES6学习(二) -- let&const
  • let与{}形成块级作用域,即{}中let声明的变量只能在{}中使用,但在{}外声明的变量{}内是可以使用的。

let例:

if(true) {
    let a = 10;
}
console.log(a)
复制代码

报错:

ES6学习(二) -- let&const

var例:

if(true) {
    var a = 10;
}
console.log(a)
复制代码

不报错:

ES6学习(二) -- let&const
  • 临时死区

let例:

let a = 10;
if(true) {
    console.log(a);
    let a = 20;
}
复制代码

报错:

ES6学习(二) -- let&const

按照上述的逻辑,{}形成块级作用域,log是在{}内a声明之前,所以应该可以取到{}外声明的a,打印的结果应该是10,但显而易见结果并不是这样...这就是临时死区的效果。

临时死区就是只要变量let声明的变量在{}内,那该变量就相当于在{}中称王称霸了,即使外界有同一个变量,那也不会寻找外界的变量了。

小测验1:(尝试做一下哦~看看分别能打印出什么结果)

let b = 20;
if(true) {
    console.log(b);
    let b = 30;
    if(true) {
        console.log(b)
    }
}
复制代码

小测验2:

let i = 0;
while(i < 5) {
    i++;
    let b = 10 + i;
    console.log(b);
}
console.log(b);
复制代码

形成块级作用域就会完美的解决我们之前遇到的闭包问题啦~

const(推荐使用)

上述let有的特征属性,const也都有,下面只讲一下const与let不同的地方。

  • const定义的是常量,必须被赋值。

const例:

const PI;
PI = 10;
复制代码

报错:

ES6学习(二) -- let&const
  • const定义的是常量后不可以被改变,即使是赋予相同的值。

const例:

const PI = 10;
PI = 10;
复制代码

报错:

ES6学习(二) -- let&const
  • 存储常量的空间里面的值不能发生改变

看起来这句话和上面的特性是一个意思,其实非也,本条特性说的是存储常量的当前空间,看下面例子:

例1:

const PI = {};
PI.name = 10;
复制代码

不报错。 是因为我们改变的不是存储PI的空间的值,而是另一个空间。'.'后面的变量就属于另一个空间了。

例2:

const PI = {};
PI = 10;
复制代码

报错:

ES6学习(二) -- let&const

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS基础教程

CSS基础教程

Simon Collison / 刘志忠 等 / 人民邮电出版社 / 2007 / 49.00元

《CSS 基础教程》是优秀的CSS 入门书,重点讲述了如何使用CSS 实现基于Web 标准的网站开发,实现网站内容和表现相分离。《CSS 基础教程》包括两部分。第一部分介绍了CSS 的基础知识和基本概念,再利用CSS 分别对网页创建中的一些基本元素加上样式,包括:文本、图像、列表、链接、表格、表单等。第二部分主要讨论了基于CSS 来实现网页基本布局的相关概念与技术,包括浮动、流体布局等。《CSS ......一起来看看 《CSS基础教程》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器