1. 概述

1.1 说明

在ES5 声明变量的方法:var命令和function命令。

在ES6 声明变量的方法:var命令、function命令、let命令、const命令、import命令、class命令。

以下内容主要是对 let 、var 、const 命令的理解与记录。

1.2 let 命令

1.2.1 let 说明

  let命令的声明变量用法类似于var,如 let a =10;(声明了一个变量:变量名为a,值为10)。但let所声明的变量,只在let命令所在的代码块内有效,即let用于声明一个块级作用域的变量。

  以下代码解析:在函数test中的if代码块中使用let进行声明变量;在if代码快中调用所声明变量可以获取正确的值,而在if代码块外调用所声明变量则会报错。

    function test() {
if (true) {
let x = 1;
console.log(x); //
}
console.log(x); // Uncaught ReferenceError: x is not defined
}
test();

  for循环的计数器

    for (let x = 0; x < 5; x++) {
setTimeout(function() {
console.log(x); // 0 1 2 3 4
}, 100);
}
console.log(x);// Uncaught ReferenceError: x is not defined

1.2.1 let 特性

  详见 var 与 let 的对比。

  • 块级作用域
  • 不允许在相同作用域内,重复声明同一个变量
  • 暂时性死区

1.3 var 命令

1.3.1 var 说明

  使用var进行声明变量。var a =10;(声明了一个变量:变量名为a,值为10)。在ES6之前,JavaScript没有块级作用域,只有全局作用域和函数作用域。变量提升即是将变量声明提升到它所在作用域的最开始的部分。

   //全局作用域
console.log(global); // undefined
var global = 'global';
console.log(global); // global
//函数作用域
function test () {
console.log(x); // undefined
var x = 1;
console.log(x); //
}
test();// 调用函数

  以上代码中var声明的变量在不同作用域中进行了变量提升(在当前作用域下,在声明变量之前进行了调用,返回了变量值为undefined)。以上代码等同于以下代码:

    var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // global function test () {
var x; // 变量提升,函数作用域范围内
console.log(x);// undefined
x = 1;// 此时才赋值
console.log(x);//
}
test();

  for循环的计数器

    for (var x = 0; x < 5; x++) {
console.log(x); // 0 1 2 3 4
setTimeout(function() {
console.log(x); // 5 5 5 5 5
}, 100);
}
console.log("***************");
console.log(x);//

1.3.2 省略 var

 在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的。

    function a() {
x = 2;
}
function b() {
console.log(x);//
}
a();
b();

1.4 let 与 var

  • 作用域的区别

    var : 没有块级作用域,因为变量提升的特性,其声明变量的作用域为整个函数或全局范围。

    let  :   拥有块级作用域的特性,其声明的变量作用域范围从声明处一直到当前块级语句({}包含)的结尾【或一直延伸到函数结尾(在函数内)或全局结尾】。

    function testVar() {
if (true) {
// 变量提升
console.log(x); // undefined
var x = 1;
console.log(x); //
}
// 作用域在整个函数作用域中
console.log(x); //
}
function testLet() {
if (true) {
// 不存在变量提升
console.log(y); // Uncaught ReferenceError: y is not defined
let y = 1;
console.log(y); //
}
// 作用域仅在if语句块中
console.log(y); // Uncaught ReferenceError: y is not defined
}
testVar();
testLet();
  • 重复声明

    var : 允许在相同作用域内,重复声明同一个变量。

    let  :   不允许在相同作用域内,重复声明同一个变量。

    function test() {
var x=1;
var x=2;
var x=3;
console.log(x);//
let y=1;
let y=2;
console.log(y);//Uncaught SyntaxError: Identifier 'y' has already been declared
}
test();
  • 顶层对象的属性(window)

    var : 在全局作用域声明的变量,会作为widnow对象的成员。

    let  :   在全局作用域声明的变量,不会作为window对象的成员。

    var x = 1;
let y = 1;
//var声明的变量附加到window对象上
console.log(window.x); //
//let声明的变量没有附加到window对象上
console.log(window.y); // undefined
  • 暂时性死区

    var : 不存在暂时性死区。

    let  :   存在暂时性死区【在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)】。

    var a = 123;
if (true) {
a = 'abc';
console.log(a);// abc
var a;
console.log(a);// abc
}
var x = 123;
if (true) {
x = 'abc'; // Uncaught ReferenceError: x is not defined
let x;
}

  备注:ES6 明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错

1.5 const 命令

1.5.1 const 说明

  使用const进行声明变量所定义的是一个只读的常量,一旦声明,常量的值就不能改变。const a =10;(声明了一个常量变量:变量名为a,值为10)。

    const x = 1;
x = 2; // Uncaught TypeError: Assignment to constant variable

1.5.2 const 特性

  • 块级作用域(与let命令相同)
  • 不允许在相同作用域内,重复声明同一个变量(与let命令相同)
  • 暂时性死区(与let命令相同)
  • 在全局作用域声明的变量,不会作为window对象的成员
  • 当用const声明的常量为值类型(e.g. String、Number)时,修改此常量的值会报错;但当声明的常量为引用类型(e.g. Array、Object)时,只可以修改此常量的成员
    // 1.const声明一个数组
const x = [1, 2, 3];
console.log(x); // => [1, 2, 3]
x[0] = "a"; // 修改数组的第一个元素的值
console.log(x); // ['a', 2, 3] // 2.const声明一个对象
const obj = {};
obj.name = 'objName';
console.log(obj.name); // objName

JavaScript 变量声明:var、let、const的更多相关文章

  1. JavaScript变量声明var,let.const

    var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局变量,并且赋值为0. console.log(typeof z); // undefined,因为z还不存在. f ...

  2. javaScript 变量提升 var let const,以及JS 的解析阶段和执行阶段

    我们先来看一道面试题,大家猜想一下,下面这段代码,打印出来的结果是什么 var name = 'World!'; (function () { if (typeof name === 'undefin ...

  3. JavaScript变量声明与变量声明提前

    JavaScript变量声明 JavaScript中存储数据的容器称为变量.用关键字和标识符创建新变量的语句,称为变量声明.可以通过关键字var进行变量声明,在ES6中增加了let.const关键字声 ...

  4. javascript变量声明 及作用域

    javascript变量声明提升(hoisting) http://openwares.net/js/javascript_declaration_hoisting.html 可能要FQ一下 java ...

  5. 【转】javascript变量声明 及作用域

    javascript变量声明提升(hoisting) javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 先看 ...

  6. javascript变量声明及作用域总结

    javascript变量声明及作用域总结 一.总结 一句话总结:还是得好好看书,光看视频是不得行的,浅学无用,要相互印证,要真正理解才有用,比如<Javascript权威指南> 书 1.j ...

  7. JavaScript 变量声明提升

    JavaScript 变量声明提升 一.变量提升的部分只是变量的声明,赋值语句和可执行的代码逻辑还保持在原地不动 二.在基本的语句(或者说代码块)中(比如:if语句.for语句.while语句.swi ...

  8. JavaScript变量声明及赋值

    1.变量声明 var a; //声明一个变量 a var b,c,d; //同时申明多个变量时,变量名之间用逗号隔开 console.log(a); //在控制台显示变量a的值,输出为undefine ...

  9. 浅谈JavaScript变量声明提升

    前段时间阿里实习生内推,一面就被刷了,也是郁闷.今天系统给发通知,大致意思就是内推环节不足以了解彼此,还可以参加笔试,于是赶紧再投一次.官网流程显示笔试时间3月31日,时间快到了,开始刷题.网上搜了一 ...

随机推荐

  1. 【MongoDB异常】Exception authenticating MongoCredential解决方法

    我们通过ideal编辑器编辑 springboot时候,出现这个错误: com.mongodb.MongoSecurityException: Exception authenticating Mon ...

  2. Python基础:编码规范(4)

    1.命名规范 Python中不同代码元素采用不同命名方式: ◊ 包名:全部小写字母,中间可以由点分隔开.作为命名空间,包名需具有唯一性. ◊ 模块名:全部小写字母,如果是多个单词构成,使用下划线分隔. ...

  3. this.setData , that.setData , this.data.val三者之间的区别和作用

    1.this.setData({ }) <view bindtouchmove="tap_drag" bindtouchend="tap_end" bin ...

  4. [ffmpeg] 滤波格式协商

    ffmpeg的中滤波器是以帧为原料来进行滤波的,那么自然地就会对帧的格式有所要求,可以说如果滤波器不知道帧的格式,就无法对帧进行处理.在进行视频滤波时,滤波格式指的是视频的像素格式:在进行音频滤波时, ...

  5. vim主题颜色

    1.VIM主题 查看Vim示例当前的颜色主题 打开一个Vim窗口,输入命令:color或:colorscheme后回车查看当前的颜色主题. Vim实例中设置颜色主题 输入命令"colorsc ...

  6. JavaScript速记

    JavaScript常见知识点积累,包括数据类型.数值转换.对象.原型与原型链.作用域与闭包等等,持续整理更新,如有错误请指正,甚是感激 本文链接:JavaScript那些磨人的小妖精 作者:狐狸家的 ...

  7. pycharm的Database连接新的Mysql5.7报错[08001]

    在URL的后面增加参数: ?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC 解决. 原因是虽然mysql5.7的s ...

  8. vue+axios实现文件下载

    功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了 axios({ method: 'post', url: 'api/user ...

  9. java容器-Map

    Map:基本思想是映射表(维护键-值对),HashMap,TreeMap,LinkedHashMap,ConcurrentHashMap等都是基于Map接口实现的map容器,他们特性不同,表现在效率, ...

  10. STL迭代器iterator

    一:迭代器原理 迭代器是一个“可遍历STL容器内全部或部分元素”的对象. 迭代器指出容器中的一个特定位置. 迭代器就如同一个指针. 迭代器提供对一个容器中的对象的访问方法,并且可以定义了容器中对象的范 ...