在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. delphi弹出信息框大全(转载)

    1. 警告信息框 MessageBox(Handle,'警告信息框','警告信息框',MB_ICONWARNING); 2.疑问信息框 MessageBox(Handle,'疑问信息框','疑问信息框 ...

  2. Logon Session Times

    How to Get User Logon Session Times from the Event Log To figure out user session time, you’ll first ...

  3. screenX clientX pageX区别

    screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...

  4. JavaScript整理1

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...

  5. Android自定义属性:attr.xml 与 TypedArray

    1.attr.xml <?xml version="1.0" encoding="utf-8"?> <resources> <de ...

  6. js 实现无限加载分页(适合移动端)

    一.原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念:    1.scrollHeight 真实内容的高度    2.clientHeight 视窗的高度,即在浏览器中所能看到的内 ...

  7. image_Magic图片处理功能

    :] 来自为知笔记(Wiz)

  8. Python(正则 re模块)

    1. 匹配一个字符 表达式 说明 等价表达式 \d 数字 [0-9] \w 字母.数字.下划线 [a-zA-Z0-9_] . 除换行外任意字符   \s 空格 [\t\n\r\f\v] \D 除数字 ...

  9. 第三课 Makefile文件的制作(上)

    1.序言: 前面的课程讲解了从gcc编译过程到其实践,大家可以看到其实在这些步骤中有些是可以简化编译的,但由于参数多以及项目中文件数量多的原因难免会造成错误甚至是浪费大量的时间在这编译上,为此linu ...

  10. ReportView显示本地报表

    from:http://www.cnblogs.com/duanshuiliu/archive/2012/07/13/2589862.html 使用ReportView控件可以显示远端Report s ...