1. var、let、const概述

ES6发布前,Javascript只能通过var声明变量的方式,常量、块级变量、函数变量这些概念的差别都不能很好的体现出来,于此同时,加入你要使用或者提供一个api,var声明的变量可随时被修改和重新分配的问题,会让你时刻担心代码是否能正常运行。

ES6为我们带来了let、const,我们先来了解一下三个标识符的特征:

var: var定义一个变量,这个变量可以被重新分配、可能会被用于整个函数(Function Scope)
let: let定义一个变量,这个变量可以被重新分配,但let可以被用于块级作用域(Block Scope),不存在变量提升
const: const定义一个常量,不可以被重新分配

下面,我们将从作用域、变量提升、变量重新分配几个方面讲解var、let、const的差别以及用法实践。

2. 作用域

var的作用域

当var定义的变量在函数内部时,通过函数外部调用变量,会导致 Uncaught ReferenceError: i is not defined 错误:

function doSomeThing () {var i = 1;
}console.log(i); // Uncaught ReferenceError: i is not defined

但是,在if、for、while这样的块级语句内通过var声明变量,仍然可以在块语句外部访问:

if (true) {var i = 1;
}
console.log(i); // 1

let的作用域

let定义了一个拥有块级作用域属性的变量,同样的代码我们用let声明变量可以看看结果:

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

const的作用域

const的作用域规则和let类似,同样的代码我们用const声明变量可以看看结果:

if (true) {const k = 1;
}
console.log(k); // Uncaught ReferenceError: k is not defined

3. 变量提升

先说结论:var声明的变量存在变量提升,let和const则不会

来一个例子体会一下:

console.log(m); // undefined
var m = 1;console.log(n); // Uncaught ReferenceError: n is not defined
let n = 1;console.log(v);
const v = 1; // Uncaught ReferenceError: v is not defined

推荐使用let和const理由之一,就是可以避免在使用后面声明的变量时出现未知错误。

4. let、const用法示例

明白var、let、const的区别,有助于我们用更简洁易懂的方式表达我们的代码。

先看看什么情况下你才用var?

通过上面的介绍,我们大概了解到var区别于let、const的地方在是:函数作用域、可被修改、变量提升,所以在函数声明优先于变量声明,但是函数调用在变量声明之后的逻辑里可以用到var。

var f = {doThings: function () {console.log(i);}
}
var i = 1; // 声明变量// 函数调用
f.doThings(); // 1

使用let的场景?

let一般用于for(while)循环和数学表达式计算中

for (let i = 0, len = 100; i < len; i++) {console.log(i);
}

那么有个问题,上面的for循环用var声明i变量也是可以的啊?

再来看一段代码:

for (var i = 0; i < 100; i++) {setTimeout(function() {console.log(i);}, i * 1000);
}// 控制台会一直输出100
// 改成 letfor (let i = 0; i < 100; i++) {setTimeout(function() {console.log(i);}, i * 1000);
}

解释一下为什么会这样:let的作用局的块级作用局,即每次循环的i的作用域就是本次循环,下一次循环重新定义变量i。

const的使用场景?

const声明了一个常量,推荐将const常量用于别名,降低常量的记忆难度。

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

结束

建议在"use strict"模式下,使用let和const替代var,以保证代码的整洁和可读。

javascript 声明变量var、let、const详解及示例相关推荐

  1. 【零基础学JS -4 】Javascript的变量-var let const

    大家好,我是半夏

  2. JavaScript声明变量详解

    前言 如果文章中有出现纰漏.错误之处,还请看到的小伙伴多多指教,先行谢过 在ES5阶段,JavaScript 使用 var 和 function 来声明变量, ES6 中又添加了let.const.i ...

  3. 【ES6】 let与const详解

    [ES6] let与const详解 ES6,全称为ECMAScript6.ES6与js的关系是:前者是后者的规格,后者是前者的实现.换句话说,ES是js的国际化版本,js是ES的子集. 1. let ...

  4. JavaScript 面试中常见算法问题详解

    JavaScript 面试中常见算法问题详解,翻译自 https://github.com/kennymkchan/interview-questions-in-javascript.下文提到的很多问 ...

  5. C++ const详解

    const详解 const对象 const的引用(常量引用) 指针与const 顶层const与底层const const对象 1)const对象必须初始化,因为创建后const对象的值就不能再改变, ...

  6. 为什么let在php中报错,ES6系列之声明变量let与const

    本篇文章主要是向大家分享了关于ES6系列的声明变量let与const,有兴趣的朋友们可以参考一下本文中的内容 简介 概念 ES6 的第一个版本,在 2015 年 6 月发布了,正式名称就是<EC ...

  7. php中this的使用技巧,JavaScript中this关键字使用方法详解

    JavaScript中this关键字使用方法详解 在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...

  8. html+css+javascript实现小游戏2048(详解,附源代码)

    html+css+javascript实现小游戏2048(详解,附源代码) 1.上下左右的移动原理相同,这里只详细说明向上移动的方法 2.这里的上下左右由wasd四个键控制 3-小方块空的意思就是没数 ...

  9. JavaScript 的addEventListener() 事件监听详解!

    JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件.  可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...

最新文章

  1. Premiere制作VCD视频几个关键设置
  2. NeurIPS 2020中国入选论文:新一代算法“鉴黄师”诞生,中科院计算所研究生一作...
  3. 看完你就知道什么是 HTTPS 了
  4. 面试python开发_python开发面试问题
  5. java中分支_[Java教程]JavaScript中的分支结构
  6. egret:什么是脏矩形
  7. 附录 - NASMMASM 安装、部署、使用
  8. 阿里巴巴Java开发手册v1.2.0版
  9. App Domains and dynamic loading
  10. c语言程序如何编写选择题,c语言程序 如何编写挑选题
  11. 姚前:新型货币战争才刚刚开始
  12. CH6803 导弹防御塔
  13. python去除Excel重复项
  14. Expected binary or unicode string, got 3
  15. MySQL 数据库重启
  16. 输入法:QQ五笔输入法在Excel2010首次输入时,会在单元格内容产生一个空格
  17. 每天进步一点点【图的深度优先搜索与广度优先搜索】
  18. arm linux ip配置文件,手动修改ARM Linux的静态IP和用QT获取和修改IP
  19. HaProxy 1.5 说明文档翻译
  20. NDI是什么?NDI协议传输让网络直播更有趣

热门文章

  1. Oracle-USERS表空间解读
  2. 信息提醒之Toast-更新中
  3. android:descendantFocusability
  4. beautifulsoup解析动态页面div未展开_两个资讯爬虫解析库的用法与对比
  5. 【Linux】【服务器】 CentOS7下远程访问mysql数据库_创建用户及授予权限_查看用户、修改密码详细步骤
  6. android列表时间轴,Android实现列表时间轴
  7. Halcon知识: XLD的概念
  8. ROS知识:关于如何命名的约定
  9. docker-engine安装好了,下一步该做什么?
  10. 怎样用springboot开发cs_SpringBoot分布式任务中间件开发 附视频讲解 (手把手教你开发和使用中间件)...