javascript 声明变量var、let、const详解及示例
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详解及示例相关推荐
- 【零基础学JS -4 】Javascript的变量-var let const
大家好,我是半夏
- JavaScript声明变量详解
前言 如果文章中有出现纰漏.错误之处,还请看到的小伙伴多多指教,先行谢过 在ES5阶段,JavaScript 使用 var 和 function 来声明变量, ES6 中又添加了let.const.i ...
- 【ES6】 let与const详解
[ES6] let与const详解 ES6,全称为ECMAScript6.ES6与js的关系是:前者是后者的规格,后者是前者的实现.换句话说,ES是js的国际化版本,js是ES的子集. 1. let ...
- JavaScript 面试中常见算法问题详解
JavaScript 面试中常见算法问题详解,翻译自 https://github.com/kennymkchan/interview-questions-in-javascript.下文提到的很多问 ...
- C++ const详解
const详解 const对象 const的引用(常量引用) 指针与const 顶层const与底层const const对象 1)const对象必须初始化,因为创建后const对象的值就不能再改变, ...
- 为什么let在php中报错,ES6系列之声明变量let与const
本篇文章主要是向大家分享了关于ES6系列的声明变量let与const,有兴趣的朋友们可以参考一下本文中的内容 简介 概念 ES6 的第一个版本,在 2015 年 6 月发布了,正式名称就是<EC ...
- php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解 在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...
- html+css+javascript实现小游戏2048(详解,附源代码)
html+css+javascript实现小游戏2048(详解,附源代码) 1.上下左右的移动原理相同,这里只详细说明向上移动的方法 2.这里的上下左右由wasd四个键控制 3-小方块空的意思就是没数 ...
- JavaScript 的addEventListener() 事件监听详解!
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
最新文章
- Premiere制作VCD视频几个关键设置
- NeurIPS 2020中国入选论文:新一代算法“鉴黄师”诞生,中科院计算所研究生一作...
- 看完你就知道什么是 HTTPS 了
- 面试python开发_python开发面试问题
- java中分支_[Java教程]JavaScript中的分支结构
- egret:什么是脏矩形
- 附录 - NASMMASM 安装、部署、使用
- 阿里巴巴Java开发手册v1.2.0版
- App Domains and dynamic loading
- c语言程序如何编写选择题,c语言程序 如何编写挑选题
- 姚前:新型货币战争才刚刚开始
- CH6803 导弹防御塔
- python去除Excel重复项
- Expected binary or unicode string, got 3
- MySQL 数据库重启
- 输入法:QQ五笔输入法在Excel2010首次输入时,会在单元格内容产生一个空格
- 每天进步一点点【图的深度优先搜索与广度优先搜索】
- arm linux ip配置文件,手动修改ARM Linux的静态IP和用QT获取和修改IP
- HaProxy 1.5 说明文档翻译
- NDI是什么?NDI协议传输让网络直播更有趣
热门文章
- Oracle-USERS表空间解读
- 信息提醒之Toast-更新中
- android:descendantFocusability
- beautifulsoup解析动态页面div未展开_两个资讯爬虫解析库的用法与对比
- 【Linux】【服务器】 CentOS7下远程访问mysql数据库_创建用户及授予权限_查看用户、修改密码详细步骤
- android列表时间轴,Android实现列表时间轴
- Halcon知识: XLD的概念
- ROS知识:关于如何命名的约定
- docker-engine安装好了,下一步该做什么?
- 怎样用springboot开发cs_SpringBoot分布式任务中间件开发 附视频讲解 (手把手教你开发和使用中间件)...