来源自:http://www.jstips.co/zh_cn/javascript/keyword-var-vs-let/

特此做个笔记

概述

  • 通过 var 定义的变量,它的作用域是在 function 或任何外部已经被声明的 function,是全域的 。
  • 透過 let 定义的变量,它的作用域是在一個块(block)。
function varvslet() {
console.log(i); // i 是 undefined 的,因为变量提升
// console.log(j); // ReferenceError: j 没有被定义 for( var i = 0; i < 3; i++ ) {
console.log(i); // 0, 1, 2
}; console.log(i); // 3
// console.log(j); // ReferenceError: j 没有被定义 for( let j = 0; j < 3; j++ ) {
console.log(j);
}; console.log(i); // 3
// console.log(j); // ReferenceError: j 没有被定义
}

详细的区别

  • 变量提升

    let 不會被提升到整个块的作用域。相比之下,var 可以被提升。

  console.log(c); // undefined。因为变量提升
var c = 2;
  console.log(b); // ReferenceError: b 没有被定义
let b = 3;

循环中的闭包

let 在每次循环可以重新被 bind,确保在它之前结束的循环被重新赋值,所以在闭包中它被用來避免一些问题。

for (var i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i); // 输出 '5' 五次
}, 100);
}
使用 let 替换 var
// print 1, 2, 3, 4, 5
for (let i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i); // 输出 0, 1, 2, 3, 4
}, 100);
}

我们应该用 let 替代 var 嗎?

不是的,let 是新的块作用域。语法强调在 var 已经是区块作用域时時,let 应该替换 var ,否则请不要替换 varlet 改善了在 JS 作用域的选项,而不是取代。var 对于变量依旧是有用的,可被用在整個 function 之中。

let 兼容性

  • 在 server 端,比如 Node.js,你现在可以安心的使用 let

  • 在 client 端,通过 transpiler(比如 Traceur),可以安心的使用 let 语法。否则请在这里确认你的浏览器是否支持。



var和ES6的let的更多相关文章

  1. 关于var和ES6中的let,const的理解

    var的作用就不多说了,下面说说var的缺点: 1.var可以重复声明 var a = 1; var a = 5; console.log(a); //5 不会报错 在像这些这些严谨的语言来说,一般是 ...

  2. 关于ES6的let,const与var之间的三生三世

    首先需要明确的是let.const.var都是用来定义变量的 在ES6之前,我们一般都用var来定义变量,例如 : function test(){ var i=1; console.log(i); ...

  3. ES6 基础知识

    let:用来定义变量特点:只能在代码块里面使用,let拥有块级作用域;并且let不允许重复声明; 比如: var a = 12; var a = 5; alert(a); //5; let a = 1 ...

  4. 关于ES6的数组字符串方法

    注:ES6的一些新属性会显示语法错误,不过不会影响效果,在Languages里面也可以调: let:用来定义变量 特点:只能在代码块里面使用,let拥有块级作用域;并且let不允许重复声明;比如: v ...

  5. 关于var、let、const的故事

    对于一门编程语言来说,变量与常量是再正常不过的两种,JavaScript是一直解释型的弱类型语言. JavaScript中变量或者常量可以用var.let.const(后两者是ES6的新特性). 1. ...

  6. 重开ES6

    一.ES6的开发环境搭建 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法. 1.建立工程目录: 先建立一个项 ...

  7. var和const和let的区别

    简述: 1.前端的变量申明,可以用到var,ES6的const(衡量)/let(变量) 2.在ES5用的都是var,到ES6之后,也就是2015年开始出现const/let. var 不会报错,有声明 ...

  8. ES6系列_2之新的声明方式

    在ES5中我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种声明方式. (1)var:它是variable的简写,可以理解成变量的意思. (2)let:它在英 ...

  9. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

随机推荐

  1. Perl Learning 5 Hash

    [本文原创,未经同意请勿转载] 哈希是一种数据结构,它和数组的相似之处在于能够容纳随意多的值并能按需取用,而它和数组的不同在于索引方式,数组是以数字来索引.哈希则以名字来索引.也就是说.哈希的索引值, ...

  2. Lesson 1 Basic Concepts: Part 2

    Getting your web site ‘live’ on the Web With the nerd background details under our belts, we can now ...

  3. export和source的区别

    1.执行脚本是在一个子shell环境运行的,脚本执行完后该子shell自动退出. 2.执行脚本中的系统环境变量(用export定义的变量)才会被复制到子shell中. 3.一个shell中的系统环境变 ...

  4. Android ViewPager实现多个图片水平滚动

    1.示意图                       2.实现分析 (1).xml配置 <!-- 配置container和pager的clipChildren=false, 并且指定margi ...

  5. 消息推送学习一、原生Socket的使用

    消息推送也是客户端和服务器连接然后进行交互的一种形式,但是不同于HTTP的连接,这种连接需要长时间的进行,当有消息时可以及时推送到客户端.除此之外还有多个用户,可能需要针对其身份进行不同的推送等等要求 ...

  6. android学习笔记五。2、其他组件

    一.ContentProvider内容提供者.是是android中一个应用向第三方共享数据的方式,android中的联系人,sms(短信记录)等都是通过这一方式来向外提供的 1.使用: 在应用中使用C ...

  7. java读取jpg图片旋转按比例缩放

    //入口 public static BufferedImage constructHeatWheelView(int pageWidth, int pageHeight, DoubleHolder ...

  8. Chromium Graphics: HW Video Acceleration in Chrom{e,ium}{,OS}

    HW Video Acceleration in Chrom{e,ium}{,OS} Ami Fischman <fischman@chromium.org> Status as of 2 ...

  9. 《五》uploadify插件上传文件

    下载地址:http://www.uploadify.com/wp-content/uploads/files/uploadify.zip 相关配置:http://www.uploadify.com/d ...

  10. HTML中常用的部分标签(一)

    [常见的块级标签] 标题标签<h1></h1>...<h6></h6> 水平线<hr/> 段落<p></p> 换行& ...