前端百题斩【002】——js中6种变量声明方式

代码隐修院
• 阅读 746

写该系列文章的初衷是“让每位前端工程师掌握高频知识点,为工作助力”。这是前端百题斩的第2斩,希望朋友们关注公众号“执鸢者”,用知识武装自己的头脑。

随着js的发展,目前共6种声明变量的方式,分别为var、let、const、function、class、import,下面分别阐述一下这六种方式。

1 var

在ES5阶段,用var定义变量,此阶段具有以下特点:
  1. 没有块的概念,可以跨块访问,不能跨函数访问;
  2. 存在变量提升。
// 代码没报错,而是打印出来了undefined,侧面说明了val变量存在变量提升
console.log(val); // undefined
var val = 1;
console.log(val); // 1

2 let

在ES6阶段,出现了块的概念,新增了块级作用域,同时新增了let命令,let声明的变量具有以下特点:
  1. let声明的变量只在它所在的代码块有效;
  2. 不存在变量提升。let不会像var那样会发生‘变量提升’现象,因此,变量需要先声明后再使用,否则会报错;
  3. 暂时性死区。在代码块内,使用let命令声明变量之前,该变量都是不可用的;
  4. 不允许重复声明。
// 实验一——只在所在的代码块有效
// 1
{
    let val = 2;
    console.log(val); // 2
}
// 2
{
    let val = 2;
}
console.log(val); // ReferenceError: val is not defined
// 实验2——不存在变量提升 + 暂时性死区
{
    console.log(val); // 报错
    let val = 2;
}
// 实验三——不允许重复声明
{
    let val = 1;
    let val = 2; // SyntaxError: Identifier 'val' has already been declared
}

3 const

在let命令出现的同时,出现了const命令,其用于声明一个只读的常量,具有以下特点:
  1. 一旦声明就必须立即初始化;
  2. 一旦声明,常量值就不能改变了(指的是内存地址不能改变);
  3. 块作用域内有效;
  4. 不存在变量提升;
  5. 存在暂时性死区。
对于上述的验证代码可以用参考let的。
对于const,还有一点比较有意思的指的详细阐述一下:const实际上保证的并不是变量的值不能改动,而是变量指向的那个内存地址不能改动。对于简单类型的数据而言,值就保存在变量指向的内存地址中,因此等同于常量。但对于复合类型的数据而言,变量指向的内存地址保存的只是一个指针,const只能保证这个指针是固定的,至于指向的数据结构不受控制。那么如何保证复合类型的值如何保证呢?可以使用Object.freeze()方法,该方法使对象的原始属性不可变,但仍然可以更改嵌套对象。为了使对象完全不可变,通过将嵌套对象上的所有属性冻结达到效果。
const constantize = obj => {
  Object.freeze(obj);
  Object.keys(obj).forEach( key => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

1.4 function

function命令用于定义一个函数,具有以下特点:
  1. 函数声明后不会立即执行,需要调用的时候才执行;
  2. 对支持ES5和ES6浏览器环境在块作用域内有一定区别,所以应避免在块级作用域内声明函数。
function test() {
    // ……
}

5 class

ES6语法引入了class关键字,用来定义类,该写法相比于对象原型的方式具有以下特点:
  1. 相比于对象原型的方式写法更清晰;
  2. 更像面向对象编程的语法(对有面向对象编程经验的同学更友好)。
class Calculate {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    add() {
        return this.x + this.y;
    }
}

6 import

ES6在语言标准的层面上实现了模块功能,其中import命令就是用于加载模块,然后输出变量,其具有以下特点:
  1. import命令接受一对大括号,其里面的变量名必须与被导入的模块对外接口的名称相同;
  2. 用as关键字可将输入的变量名重命名;
  3. import命令输入的变零都是只读的;
  4. import命令具有提升效果,会提升到整个模块的头部,首先执行(因为import命令是在编译阶段执行的,在代码运行之前);
  5. import是静态执行,不能使用表达式和变量;
  6. import会执行所加载的模块。
// 随便举个例子
import {add} from './calcluate';

7 有意思的小问题

下面四种情况分别输出什么?为什么呢?欢迎各位老铁留言
  1. 情况一
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
  1. 情况二
for (var i = 0; i < 3; i++) {
  var i = 'abc';
  console.log(i);
}
  1. 情况三
for (let i = 0; i < 3; i++) {
  var i = 'abc';
  console.log(i);
}
  1. 情况四
for (var i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

1.如果觉得这篇文章还不错,来个分享、点赞吧,让更多的人也看到

2.关注公众号执鸢者,与号主一起斩杀前端百题。

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
java native方法与JNI实现
<divid"cnblogs\_post\_body"class"blogpostbody"<p<spanstyle"color:ff0000"<strongnative方法定义:</strong</span&nbsp;&nbsp;&nbsp;&nbsp;</p<p&nbsp;&nbsp;&nbsp;简单地讲
Wesley13 Wesley13
3年前
java连接neo4j
<divid"cnblogs\_post\_body"class"blogpostbody"<p呼、博客要落灰了</p<p记录一下Java连接neo4j的问题。</p<p<spanstyle"fontsize:16px;"<strong首先是neo4j的下载和配置,基本参考https://blog.csdn.net/ap
DevOpSec DevOpSec
4年前
Linux主机安全配置
1.安全配置规范1.身份鉴别1.账号检查<tableborder"1"cellspacing"0"style"width:426.1pt;"<tbody<tr<tdstyle"width:113.4pt;"<pstyle"marginleft:0pt;"<strong<strong安全配置编号
Stella981 Stella981
3年前
React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
<blockquote本文是学习了2018年新鲜出炉的ReactHooks提案之后,针对<strong异步请求数据</strong写的一个案例。注意,本文假设了:<br1.你已经初步了解<codehooks</code的含义了,如果不了解还请移步<ahref"https://reactjs.org/docs/hooksintro.html
Wesley13 Wesley13
3年前
Java面试
<divclass"htmledit\_views"id"content\_views"<pid"maintoc"<strong目录</strong</p<pid"Java%E5%9F%BA%E7%A1%80%EF%BC%9Atoc"style"marginleft:40px;"<ahref"Java%E5%
Stella981 Stella981
3年前
Node.js 12中的ES模块[每日前端夜话0x9E]
每日前端夜话0x9E每日前端夜话,陪你聊前端。每天晚上18:00准时推送。正文共:2552字预计阅读时间:10 分钟作者:BrianDeSousa翻译:疯狂的技术宅来源:logrocket!(https://oscimg.oschina.net/oscnet/2ccaf94cecd3
Wesley13 Wesley13
3年前
Java 9版本之后Base64Encoder和Base64Decoder无法继续使用解决办法
<divclass"htmledit\_views"id"content\_views"<p在项目开发过程中,因为重装系统,安装了Java10版本,发现sun.misc.Base64Encoder和sun.misc.Base64Decoder无法使用。</p<p<br</p<p<strong原因:</strong</p<p查看
Stella981 Stella981
3年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Easter79 Easter79
3年前
Tomcat安装、配置、优化及负载均衡详解
<divid"cnblogs\_post\_body"class"blogpostbody"<p<strong原文地址:https://www.cnblogs.com/rocomp/p/4802396.html</strong</p<p<strong一、常见JavaWeb服务器</strong</p<div<strong&
Wesley13 Wesley13
3年前
Java集合及concurrent并发包总结(转)
<divid"cnblogs\_post\_body"class"blogpostbody"<p<strong1.集合包</strong</p<p&nbsp;&nbsp;集合包最常用的有Collection和Map两个接口的实现类,Colleciton用于存放多个单对象,Map用于存放KeyValue形式的键值对。</p<p
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(