JS的var和let的区别（详细讲解）
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的区别（详细讲解）的更多相关文章
- JS中var与let的区别
区别: var声明的变量,其作用域在该语句所在的函数之内,存在着变量提升的现象. let声明的变量,其作用域为该句所在的代码块内,不存在变量提升的问题. let相比于var,其不允许在相同作用域内,重 ...
- js变量var与let的区别
1.作用域 通过var定义的变量,作用域是整个封闭函数,是全域的 .通过let定义的变量,作用域是在块级或是子块中. for (let i = 0; i < 10; i++) { // ... ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载
1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
- jQuery中$(function()与(function($)等的区别详细讲解
(function($) {-})(jQuery); 这里实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的, ...
- JS中const、var 和let的区别
今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 ...
- js中三种定义变量 const， var， let 的区别
js中三种定义变量的方式const, var, let的区别 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始化 ...
- js判断undefined类型,undefined,null, 的区别详细解析
js判断undefined类型 今天使用showModalDialog打开页面,返回值时.当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined所以自作聪明判断 var reVal ...
- 【前端开发】】js中var写和不写的区别
js中var用与不用的区别 Javascript声明变量的时候,虽然用var关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的.可以正常运行的代码并不代表是合适的代码. v ...
随机推荐
- 析构函数 p157
析构函数 确保对象的各部分被正确的清除,及做一些用户指定的其他清理工作. 当对象超出它的作用域时,编译器将自动调用析构函数:手动用new在堆上分配的对象空间,需要调用'delete 对象地址'进行手动 ...
- Javassist指引(一)
目录 原文链接 1. 读写字节码 1.1概述 Javassist是一个Java字节码类库.Java的字节码是包含Java类与接口,并按照一定的顺序存在class文件中. Javassist.CtCla ...
- THINKPHP框架的优秀开源系统推荐
THINKPHP框架的优秀开源系统推荐 众所周知,国内众多优秀的开源框架,ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性.并且拥有众多的原创功能 ...
- 2018-6-15-win10-uwp-xaml-绑定接口
title author date CreateTime categories win10 uwp xaml 绑定接口 lindexi 2018-6-15 21:7:19 +0800 2018-2-1 ...
- margin为负值的几种情况
1.margin-top为负值像素 margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html> 2 <html lang=&q ...
- dotnet 启动 JIT 多核心编译提升启动性能
用2分钟提升十分之一的启动性能,通过在桌面程序启动 JIT 多核心编译提升启动性能 在 dotnet 可以通过让 JIT 进行多核心编译提升软件的启动性能,在默认托管的 ASP.NET 程序是开启的, ...
- Linux 内核驱动支持什么设备
struct usb_device_id 结构提供了这个驱动支持的一个不同类型 USB 设备的列表. 这个 列表被 USB 核心用来决定给设备哪个驱动, 并且通过热插拔脚本来决定哪个驱动自动加载, 当 ...
- iDrac6 虚拟控制台 连接失败
最近给公司的服务器升级硬件(其实是服务器要淘汰了,公司就不管了,爱怎么折腾就怎么折腾,只要不坏就行) 服务器配置:Dell PowerEdge R610,E5606 x2(双路2.13G 4核4线程) ...
- Mac 安装Maven，并设置环境变量
1 / 打开电脑,找到终端命令行工具,输入maven环境变量查询工具: mvn -v 2 / 执行上述命令后,此时没有安装的两个提示信息,一个时没有mvn命令,一个时没有安装maven.执行下面命令开 ...
- jeecg中自定义按钮时遇到的问题