在es6中,let的作用和var差不多,都是用来声明变量的,但是他们之间的区别在于作用域不同,大家都知道在js中没有块级作用域,例如:

for(var i=0;i<10;i++){
console.log(i)
}

在上面的代码中,i的作用域范围是由执行环境决定的,如果是在全局环境中执行,则i的作用域就是全局的,如果是在某一个函数中执行,则i的作用域就是在此函数中,例如:

function test(){
for(var i=0;i<10;i++){
console.log(i) //0,1,2,3,4,5,6,7,8,9
}
console.log("执行后的i="+i) // i=10
}
test();
console.log("全局作用域还会存在i吗,i="+i); //Uncaught ReferenceError: i is not defined(…)

那如果此时我么就只需要块级作用域怎么办?此时可以用let,例如:

function f1() {
var a = 8;
let n = 5;
if (true) {
let n = 10;
var a = 20
}
document.write(n); //
document.write(a); //
}
f1();

用var声明的循环:

for(var i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);

你会发现循环体外的i变量被污染了,如果在外部再使用i时就会出现问题,这是开发者不想看到的。我们再利用let声明,就可以解决这个问题。

用let声明的循环

for(let i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);

你执行时会发现控制台报错了,找不到循环体外的i变量。通过两种声明的比较,可以明白let在防止程序数据污染上还是很有用处的。我们要努力去习惯用let声明,减少var声明去污染全局空间,在vue的使用中也要注意这点。

例如下面代码,体会下let和var的区别

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

此时输出的是6,如果换成var ,得到的结果是怎样了?

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
document.write(i);
};
}
document.write(a[6]()); //10

为什么会得到这种结果了?

变量 `i` 作用的 block 是 `for` 循环,当 `a[i]` 被调用的时候会引用 `i` 的值(查找作用域),在循环的时候代表不同的值,输出的也是不同的值。

如果用let声明i,对于每个a[i]()都有一个独立的i,故a[i]()会打印出该轮循环时i的值;
a[6]()会输出6……

而var i的情况是i是全局的,无论a[i]()中的i取何值,对应函数中i的值都是同一个i……由于循环结束后i=10,所以输出10。

例如:

var messages = ["喵!", "我是一只会说话的猫!", "回调(callback)非常有趣!"];
for (var i = 0; i < messages.length; i++) {
setTimeout(function () {
alert(messages[i]);
}, i * 1500);
}

此时会输出三个“undefined”,原因是因为循环本身和三次setTimeout共享变量i,

当循环结束执行时,i的值为3(因为messages.length的值为3),此时回调尚未被触发。

所以当第一个timeout执行时,调用messages[i],此时i的值为3,所以猫咪最终打印出来的是messages[3]的值亦即undefined

const 声明的常量,有如下特点。

// 1)一旦声明不值不可改变
const PI = 3.1415;
PI // 3.1415 PI = 3;
PI // 3.1415 const PI = 3.1;
PI // 3.1415 //2)也具有块级作用域
if (true) {
const max = 5;
}
document.write(max); // ReferenceError 常量MAX在此处不可得 //3)变量不可提升,必须先声明后食用
if (true) {
document.write(MAX); // ReferenceError
const MAX = 5;
} //4)不可重复
var message = "Hello!";
let age = 25; // 以下两行都会报错
const message = "Goodbye!";
const age = 30;

es6 中的let,const的更多相关文章

  1. ES6 中 let 和 const 总结

    目录 let const 1. let要好好用 1. 基本用法 2. let声明的变量不存在变量提升 3. TDZ(temporal dead zone)暂时性死区 4. 不允许重复声明 2. 块级作 ...

  2. ES6中var/let/const的区别

    let的含义及let与var的区别: let 声明的变量只在它所在的代码块有效: 如下: for (let i = 0; i < 10; i++) { console.log(i); } con ...

  3. ES6 中 let and const

    let 和 const 命令 let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; v ...

  4. ES6中let与const命令详解

    阮一峰ES6入门 let 作用域 let命令用来声明变量,但声明的变量只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: ...

  5. ES6中let、const和var的区别

    一.let 1.基本用法 ES6 新增了let命令,用来声明变量. let 的用法类似于 var,但所声明的变量只在 let 命令所在的代码块内有效(一个“{}”相当于一个代码块) { let a = ...

  6. 浅谈ES6——ES6中let、const、var三者的区别

    在了解let.const.var的区别之前,先了解一些什么是es6 Es6 全称ECMAscript 是JavaScript语言的一个标准,其实Es6本质就是JavaScript的一个版本,为什么叫E ...

  7. ES6中let和const详解

    let和var一样也是用来定义变量,不同之处在于let是块级作用域,只在所定义的块级作用域中生效,一个花括号便是一个块级作用域 {var a="我是var定义的";let b=&q ...

  8. ES6中的关键字 - const

    const 关键字 1.声明后的值不可以修改: const name = "小康哥"; name = "小康"; // 报错,const为constant的缩写 ...

  9. Es6中let与const的区别:(神奇的块级作用域)

    所谓的块级作用域:形成一个暂时性的死区:{    } 一.共同点: a:都是用来声明变量: b:都能形成一个块级作用域: c:都只能在声明变量的块级作用域里面有效: 二.不同点: 1.let: a:在 ...

随机推荐

  1. 四、H5 录制视频 Web Real-Time Communication

    Web Real-Time Communication HTML5实现视频直播功能思路详解_html5教程技巧_脚本之家 https://m.jb51.net/html5/587215.html

  2. http://element.eleme.io/#/zh-CN/component/quickstart

    http://element.eleme.io/#/zh-CN/component/quickstart

  3. <2014 05 21> 互联网时代的C语言——Go

    Go希望成为互联网时代的C语言. 多数系统级语言(包括Java和C#)的根本编程哲学来源于C++,将C++的面向对象进一步发扬光大.但是Go语言的设计者却有不同的看法,他们认为C++ 真的没啥好学的, ...

  4. Java基础 - 可变字符串 StringBuffer

    StringBuffer 类是线程安全的可变字符序列,一个类似于String类的字符串缓冲区,两者本质上是一样的,但StringBuffer类的执行效率要比String类快很多.String类创建的字 ...

  5. 对比MySQL,你究竟在什么时候更需要MongoDB(转)

    译文:对比MySQL,你究竟在什么时候更需要MongoDB 原文链接: When Should I Use MongoDB rather than MySQL (or other RDBMS): Th ...

  6. Drawable.Callback

     一.介绍 public abstract void invalidateDrawable (Drawable who) Called when the drawable needs to be re ...

  7. 假设做一个精美的Login界面(攻克了一EditText自带clear的功能,相似iphone的UITextField)

    先上图:     XML为: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  8. Oracle Shared Pool 原理

    Oracle Shared Pool 原理 由于shared pool中最重要的是library cache,所以本文主要讲解Library cache的结构,library cache latch, ...

  9. CNN学习笔记:目标函数

    CNN学习笔记:目标函数 分类任务中的目标函数 目标函数,亦称损失函数或代价函数,是整个网络模型的指挥棒,通过样本的预测结果与真实标记产生的误差来反向传播指导网络参数学习和表示学习. 假设某分类任务共 ...

  10. [MongoDB] 学习笔记(2)

    1. Mac 安装mongodb: 官网下载mac版mongodb,解压到本地目录,如/Applications/mongodb,注意这里的地址是根更目录下的Applications,然后在根目录下创 ...