let是ES6新增的，它主要是弥补var的缺陷，你也可以把let看做var的升级版。下面我就来详细讲讲var和let的区别

var和let的区别

不同点：

（1）var是全局作用域，let不是

var 和 let 声明的变量在全局作用域中被定义时，两者非常相似。但是，被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以

let  a = 'aaa;

var b = 'bbb'; 

console.log(window.a); // undefined

console.log(window.b);  //'bbb'

（2）var没有块级作用域，let有块级作用域

let有块级作用域，而var没有块级作用域，这是二者最明显的区别。例如：

var func;

if(1 == 1){

    var name = "LHS"

    func = function(){

        console.log(name)

    }

}

name = "ljq";

func();//输出的：ljq

一般情况我们都希望把块级内的与块级内数据区分，但var没有块级作用域，只有函数作用域

如果大家还不理解，我再举例子：

<!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>

    </body>

    <script type="text/javascript">

        var divs=document.getElementsByTagName("div");

        for (var i=0;i<divs.length;i++) {

            divs[i].onclick=function(){

               alert(i);//都是输出：10

            }

        }

    </script>

</html>

运行结果，点击输出都是10

以上问题就是var没有块级作用域，我们可以把函数作用域代替了块级作用域，用闭包解决问题：

var divs=document.getElementsByTagName("div");

for (var i=0;i<divs.length;i++) {

    (function(i){

        divs[i].onclick=function(){

            alert(i);

        }

    })(i)

}

闭包写起来有点麻烦，但使用let的话就可以一步到位：

var divs=document.getElementsByTagName("div");

for (let i=0;i<divs.length;i++) {

    divs[i].onclick=function(){

        alert(i);

    }

}

结果跟使用闭包一样，但比闭包简单

（3）var属于ES5规范，let属于ES6规范

相同点：

（1）var和let都有函数级作用域

const

（1）const定义的值不可以修改，而且必须初始化

（2）const是常量，var和let是变量

（3）常量的含义是指对象不能修改，但是可以改变对象内部的属性，如：

const app = {

    id:1,

    name:"lhs"

}

app.name="ljq";

console.log(app.name);//输出：ljq

es6对象字面量增强

相对于ES5,ES6的对象字面量得到了很大程度的增强。这些改进我们可以输入更少的代码同时语法更易于理解。那就一起来看看对象增强的功能。

属性增强写法

//属性增强写法

const id = 1;

const name = "LHS";

const age = 20

const app = {

    id,

    name,

    age,

}

console.log(app);

函数增强写法

//函数增强写法

const ipp = {

    msg(){

        console.log("函数增强写法");

    }

}

ipp.msg();

JS的var和let的区别（详细讲解）的更多相关文章

  1. JS中var与let的区别

    区别: var声明的变量,其作用域在该语句所在的函数之内,存在着变量提升的现象. let声明的变量,其作用域为该句所在的代码块内,不存在变量提升的问题. let相比于var,其不允许在相同作用域内,重 ...

  2. js变量var与let的区别

    1.作用域 通过var定义的变量,作用域是整个封闭函数,是全域的 .通过let定义的变量,作用域是在块级或是子块中. for (let i = 0; i < 10; i++) { // ... ...

  3. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  4. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载

    1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  5. jQuery中$(function()与(function($)等的区别详细讲解

    (function($) {-})(jQuery); 这里实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的, ...

  6. JS中const、var 和let的区别

    今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 ...

  7. js中三种定义变量 const， var， let 的区别

    js中三种定义变量的方式const, var, let的区别 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始化 ...

  8. js判断undefined类型,undefined,null, 的区别详细解析

    js判断undefined类型 今天使用showModalDialog打开页面,返回值时.当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined所以自作聪明判断 var reVal ...

  9. 【前端开发】】js中var写和不写的区别

    js中var用与不用的区别 Javascript声明变量的时候,虽然用var关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的.可以正常运行的代码并不代表是合适的代码. v ...

随机推荐

  1. JS 复制文本兼容移动端 iOS & android

    有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设置为 `type="hidden&quo ...

  2. JPA进行insert操作时会首先select吗

    在某个项目中,使用JPA的saveAll方法去批量写入数据时,通过打印sql,发现每次insert前都会先select一次,极大的浪费了写入性能. 分析一下代码,saveAll() @Transact ...

  3. C# 判断两条直线距离

    本文告诉大家获得两条一般式直线距离 一般式的意思就是 Ax+By+C=0" role="presentation">Ax+By+C=0Ax+By+C=0 如果有两个 ...

  4. P1108 分解质因数

    题目描述 给你一个正整数 \(n\) ,请给 \(n\) 分解质因数,并按照样例输出的格式输出对应的结果. 输入格式 输入包含一个正整数 \(n (2 \le n \le 10^9)\) . 输出格式 ...

  5. 2018-12-25-dot-net-double-数组转-float-数组

    title author date CreateTime categories dot net double 数组转 float 数组 lindexi 2018-12-25 09:27:46 +080 ...

  6. 【u105】路径计数2

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 一个N×N的网格,你一开始在(1, 1),即左上角.每次只能移动到下方相邻的格子或者右方相邻的格子,问 ...

  7. tensorflow在文本处理中的使用——词袋

    代码来源于:tensorflow机器学习实战指南(曾益强 译,2017年9月)——第七章:自然语言处理 代码地址:https://github.com/nfmcclure/tensorflow-coo ...

  8. linux测试 scullpipe 驱动

    我们已经见到了 scullpipe 驱动如何实现阻塞 I/O. 如果你想试一试, 这个驱动的源码 可在剩下的本书例子中找到. 阻塞 I/O 的动作可通过打开 2 个窗口见到. 第一个可运行 一个命令诸 ...

  9. OPENWRT X86 安装使用教程 （未完成）

    目 录  一 下载 Openwrt 镜像文件 二 将镜像文件写入目标磁盘 2.1  写盘工具 2.2 Physdiskwrite 写盘 2.3 win32diskimager 写盘 三 管理界面 3. ...

  10. android权限申请执行过程

    弹出的授权对口窗口实际上是一个activity(隐式intent启动上图第二个方块里)(com.android.packageinstaller.permission.ui.Grantpermissi ...