let 与 var

var

var声明的变量拥有全局作用域或者局部作用域

在全局中声明变量即为全局变量

在函数中声明变量即为局部变量

而var在使用过程中也逐渐暴露出许多问题

var的几大问题

变量提升

使用var来声明变量会出现变量提升的问题,即在声明变量之前就调用变量

console.log(info);//undefined

var info = 10;

出现上面情况其实是非常不好的,因为在声明之前使用的话应该去报出一个错误而不是用一个undefined给这个变量赋值。

这个问题在函数中尤为明显

var info = 10;

function fn1(){
console.log(info);//undefined
var info = 20;
} fn1();

在循环中的问题

var在循环中的问题也是相当严重

下面我遇到的一个情况

//html中有四个span
var oSpan = document.getElementsByTagName('span');
for(var i = 0 ; i < oSpan.length ; i++ ){
oSpan[i].onclick = function(){
console.log(this);//点击出现 你点的那个span
}
}

我们发现在这时是可以获得点击的元素的

但是我们把this换成oSpan[i]时就会出问题

for(var i = 0 ; i < oSpan.length ; i++ ){
oSpan[i].onclick = function(){
console.log(oSpan[i]);//点击出现 undefined
console.log(i);//点什么都是4
}
}

我们这个时候会发现我们已经选取不到事件处理函数中i的瞬时值了。而这又是因为什么呢

我们可以把代码拆开

//拆开for
var i = 0;
oSpan[i].onclick = function(){
console.log(i);
}
var i = 1;
oSpan[i].onclick = function(){
console.log(i);
}
...
var i = 3;
oSpan[i].onclick = function(){
console.log(i);
}
var i = 4; //在你点击的时候是在页面加载完才调用的函数

上面的会看出来由于var声明的变量是全局变量,所以函数中的变量接收是4

解决办法是在循环中写一个闭包函数,模拟一个块级作用域

for(var i = 0 ; i < 4 ; i++){
oSpan[i].onclick = function(arg){
return function(){
console.log(arg);//出现 0,1,2,3
}
}(i);
}

然而es6给我们提供了更好的声明变量的方式

let

在es6中,let声明的变量是块级作用域

块级作用域是指在{}中间可以有效使用

for(let i = 0; i < 4 ; i++){
oSpan[i].onclick = function(){
console.log(i);
}
}

上面的就可以找到i的瞬时值原因是每个i与下面的都是同一块作用域,而与另几个循环中的函数互不影响。所以每个函数调用的都是与其同一块作用域的i值。

let其他作用

在let声明的变量不可重复声明否者会报错

let b = 10;

let b = 20;//报错

let不会有变量提升这个问题,let会产生暂时性死区

console.log(a);//报错

let a = 20;

顶层对象的属性

在浏览器的顶层对象是window,在Node环境中是global

在es5中顶层的属性与全局变量是等价

window.a = 1;
a = 2;
console.log(window.a)//2

由于顶层对象的属性与全局变量相关,就会产生许多问题

  1. 无法再编译时就提示变量未声明的错误,只有运行在会知道

  2. 容易不知不觉的就创建出全局变量,导致顶层对象的属性到处都可以读写,这非常不利于模块化编程

  3. window对象有实体含义,指的是浏览器窗口对象,这样也是不合适的

但是let声明的变量不属于顶层对象的属性

var a = 1;

console.log(this.a);//1

let b = 1;

console.log(this.b);//undefined

const

const也是es6的声明方式之一

const声明的变量大多数是做为一个常量,而作为常量时不可对值进行修改,变成只读模式


const INFO = 10; INFO = 20; //报错 const INFO = 20;//报错

而当const声明的是一个引用数据类型的时候,引用类型内的值是可以修改的,因为引用类型的值存放在堆中的。修改操作是在堆中进行,而变量储存的是地址,不会被修改,而地址指向的数据已经发生改变,故而const声明的变量的值被修改了

const arr = [1,2,3,4];

arr.push(5);

console.log(arr);//[1,2,3,4,5]

es6 新增变量声明方式的更多相关文章

  1. ES6 - 基础学习(2): 新的变量声明方式 let 与 const

    ES6)新增加了两个重要的 JavaScript 关键字:let 和 const.以前声明变量时只有一种方式:var,ES6对声明方式进行了扩展,现在可以有三种声明方式了. 1.var:variabl ...

  2. 哟,来看看JS里面变量声明方式

    点点点点点点进来.点击此处领取双十一梦想大礼包. 终于被我忽悠进来了?老弟,不骚一下你不往里面点是吧,还想大礼包?想着吧. 今天要说的如题,JS里面变量声明方式.可能一提到这个话题大家能很快的打出来, ...

  3. javascript中var let const三种变量声明方式

    javascript中var let const三种变量声明方式 1.var  ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...

  4. es6系列-变量声明

    es6系列所有文章都是阅读阮一峰老师的<ES6标准入门>(第2版)所做的读书笔记.方便日后查阅相关基础知识. git地址: https://github.com/rainnaZR/es6- ...

  5. 二.ES6新的声明方式

    前言: 以前我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种声明方式了. 字面理解ES6的三种声明方式: var:它是variable的简写,可以理解成变量 ...

  6. JS变量声明方式

    在JavaScript中有三种声明变量的方式:const  var let const:用于声明常量.注意:定义的变量的时候,必须同时初始化,且其值之后不可以修改. var:最常用的声明变量关键字.  ...

  7. ES6新增变量

    声明let let 声明的变量不存在预解析 console.log(flag) var flag = 123 //123 let flag = 456 //undefined let声明的变量不允许重 ...

  8. 怎样理解"不推荐不使用var的变量声明方式"这句话

    答: 因为不使用var声明的变量不会被预解析, 如下: console.log(a); console.log(b); var a = 1; b = 2;

  9. es6变量声明和解构赋值

    /*声明: * 本文内容多为学习借鉴性内容,大部分非原创 * 特别感谢阮一峰的 ECMAScript6 入门,推荐大家学习 */ 一.es5变量声明的不足 1.变量提升和函数声明提升 es5的代码加载 ...

随机推荐

  1. idea websorm 激活码(2020-1-6 实测可用)最新

      2019年1月6日用 ZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiIiLCJjaGVja0NvbmN1cnJlbnR ...

  2. external IP 和 local IP 的区别

    外部(external)和本地(local) IP地址都具有相同的用途,不同之处在于范围.整个Internet使用外部或公共IP地址来定位计算机系统和设备.专用网络内部使用本地或内部IP地址来定位与其 ...

  3. MongoDB3.4版本新增特性

    先说明一下mongod和mongos的含义:mongod是MongoDB系统的主要后台进程,它处理数据请求.管理数据访问和执行后台管理操作:该命令的命令行选项主要用于测试,在场景操作中,使用配置文件选 ...

  4. 8maven配置多个项目之间的依赖

    首先创建两个项目进行测试依赖 创建一个HelloWorld2项目,一个HelloWorld类里面有一个sayHello的方法 然后再创建一个HelloWorldTime项目,一个SayHelloWor ...

  5. Enityt模型特性

    数据验证相关的数据注解: 特性 解释 Remote 使用 jQuery 验证插件远程验证程序的特性 FileExtension 验证文件扩展名 Compare 比较两个属性的值 RegularExpr ...

  6. Python学习笔记———递归遍历多层目录

    import os #得到当前目录下所有的文件 def getALLDir(path,sp = ""): filesList = os.listdir(path) #处理每一个文件 ...

  7. css3元素如何扭曲、移位或旋转

    css3 transform 兼容性:IE10+ transform:rotate(deg) 正数为顺时针,负数为逆时针 <!DOCTYPE html> <html lang=&qu ...

  8. 剑指offer-面试题5-替换空格-字符串

    /* 题目: 请实现一个函数,把字符串中的每个空格替换成'%20'. 例如输入“We are happy",则输出 ”We%20are%happy". */ /* 结题思路: 考虑 ...

  9. Case Study - 用户复购行为预测

    Problem 对于商家来说提前识别回头客是一件集中资源提高新品销售量的头等大事,各大商家为了吸引顾客的二次购买都会实行各种像是促销.优惠券.折扣之类的策略.按理说越了解客户,越知道客户的喜好,越能精 ...

  10. JN_0018:运行窗口不显示

    1,新建vbs文件 CreateObject("WScript.Shell").Run "cmd /c E:/OneDrive/NodeJS/WebServer/star ...