余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

JavaScript声明变量的方式、特点与区别(javascript变量类型)

xiyangw 2022-11-26 16:50 19 浏览 0 评论

JavaScript声明变量有三种方式:var、let与const。

var声明变量

JavaScript声明变量的方式、特点与区别(javascript变量类型)

var name = "bob";

var声明变量的特点:

  1. 存在变量提升机制,JS引擎遇到var声明,会将其声明提到作用域顶端。
console.log(name);
var name = "bob";
  1. 覆盖全局对象存在的变量
var RegExp = "myRegExp";
console.log(window.RegExp); // 覆盖了正则表达式对象,输出 “myRegExp”

let声明变量

let声明变量的特点:

  1. 不允许重复声明变;
  2. 不存在变量提升机制;
  3. 只在当前作用域内有效;
  4. 临时死区(TDZ)- 使用未执行过的变量会报错。
let name = "bob";

const声明常量

const声明变量的特点

  1. 声明常量,声明时必须赋值;
  2. 不允许重复声明变;
  3. 不存在变量提升机制;
  4. 只在当前作用域内有效;
  5. 临时死区(TDZ)- 使用未执行过的变量会报错;
  6. 常量声明后不允许修改其值(下面有详细的说明)。
const USER_NAME = "Bob";

声明变量或者常量都会在内存中开辟一个内存地址来装载这个变量的值,const声明的常量后,就不允许改变这个常量所在的内存地址了,但是可以修改这个绑定的内存地址的值,比如来说,String类型的值是不可改变的,所以使用const声明一个字符串的常量之后就不允许修改了,相比声明了一个对象类型的常量,就可以修改其对象的值,因为修改的是其对象(绑定的常量的地址的值)的值,而不是修改绑定常量的地址。

const USER = {
 name: 'bob',
 nationality: 'China'
}
USER.name = 'Lynn';
console.log(USER); // 输出: { name: 'Lynn', nationality: 'China' }
// 错误:TypeError: Assignment to constant variable.
// 原因:修改了绑定的内存地址
USER = {
 name: 'Lynn',
 nationality: 'China'
}
console.log(USER);

变量提升机制与TDZ(临时死区)

JavaScript引擎在扫描代码变量声明时:

如果扫描到 var 声明的变量 => 会将其提升到作用域的顶端,此时其值是undefined;这就是var声明的变量提升机制。

&&

如果扫描到 let 或 const 声明的变量 => 会将其放入到 TDZ 中,如果访问TDZ中的变量就会报错,只有执行过了变量声明,变量才会从TDZ中移除,才能正常访问,这就是为什么作用域中存在let和const声明的变量,如果没执行到变量声明,会抛出错误的原因。

// var 变量提升机制
console.log(name); // undefined
var name = "bob";
// let 与 const 的临时死区(TDZ)
console.log(name); // ReferenceError: name is not defined
let name = "bob";
console.log(USER_NAME); // ReferenceError: USER_NAME is not defined
const USER_NAME = "bob";

实例-循环中的块级作用域绑定

由于在for循环中使用var声明变量,既没有存在块级作用域,也存在了一直共用同一个变量。

var arr = []
for (var i = 0; i < 10; i++) {
 arr[i] = function test() {
 console.log(i);
 }
}
arr[1]() // 10
arr[3]() // 10
arr[5]() // 10
arr[7]() // 10
// 为什么都输出是10,原因是arr[i]的各项函数不是立即执行的,在外面调用使用,for循环已经结束,i的值是10

使用立即执行函数能到达效果:

var arr = []
for (var i = 0; i < 10; i++) {
 (arr[i] = function test(value) {
 console.log(value); // 0,1,2,3,4,5,6,7,8,9
 })(i)
}

使用let块级声明

var arr = []
for (let i = 0; i < 10; i++) {
 arr[i] = function test() {
 console.log();
 }
}
arr[0]() // 0
arr[3]() // 3
arr[5]() // 5
arr[7]() // 7
// 为什么修改let声明后到达了预期中的效果?
// 原因:let声明的变量是存在块级作用域,每次循环的i其实都是一个新的变量

最后

ES6添加了let与const声明变量后,推荐声明变量时默认使用const,如果需要修改改变该值时,使用let声明变量,使工程师写JS代码时变得更加健壮。

作者:梁凤波

链接:https://www.imooc.com/article/275459

相关推荐

这样设置,百度文库就可以复制了(百度文库怎么可以复制)
这样设置,百度文库就可以复制了(百度文库怎么可以复制)

百度文库中word复制不了文字,右键复制,提示是VIP特权。按下面方面破解。一、页面空白处右键,选择“审查元素”,或直接按F12;二、按F1出现设置;或点击下面...

2023-03-21 19:45 xiyangw

JavaScript容错的优雅地降级功能(js降序排序)
JavaScript容错的优雅地降级功能(js降序排序)

探测到错误时禁用组件是一回事。处理出错的组件并将其从UI中优雅地移除是另一回事。即使我们努力保持组件之间松耦合,但涉及到DOM时,这项工作会变得很有难度。例如,...

2023-03-21 19:44 xiyangw

国家电网照片修改系统常见问题(国家电网的照片怎样上传)
国家电网照片修改系统常见问题(国家电网的照片怎样上传)

照片处理http://jl.zggqzp.com/zt/2020dw_zpxg/?a=d&b=zhgq1.上传按钮点击不了请尝试刷新一个网页过几秒等网页...

2023-03-21 19:44 xiyangw

浏览器如何禁用JavaScript(浏览器如何禁用缓存)
浏览器如何禁用JavaScript(浏览器如何禁用缓存)

为了方便对一些网站功能进行测试,需要浏览器禁用JavaScript,那这个怎么才能做到呢?1.通过F12进入开发者工具,使用快捷键CTRL+SHIFT+P(Wi...

2023-03-21 19:44 xiyangw

Twitter 推文删除后,将从外部网站消失:显示一个空白框
Twitter 推文删除后,将从外部网站消失:显示一个空白框

据TheVerge报道,Twitter现在对被删除的推文嵌入第三方网站时的显示方式做了一个较小但重要的改变。至少从三月底开始,当嵌入的推文被删除时,社交...

2023-03-21 19:43 xiyangw

客户端相关文件读取漏洞(文件读取漏洞利用)

客户端也存在文件读取漏洞,大多是基于XSS漏洞读取本地文件。1.浏览器/FlashXSS一般来说,很多浏览器会禁止JavaScript代码读取本地文件的相关操作,如请求一个远程网站,如果它的Java...

iOS 16锁定lockdown模式对浏览器的影响 - sevarg

Apple正在预览一项突破性的安全功能,为可能面临来自开发国家资助的雇佣间谍软件的私营公司的高度针对性网络攻击风险的用户提供专门的额外保护。启用iOS16的锁定Lockdown模式后对浏览器的功能...

如何安全的存储用户的密码(存储用户密码信息的文件是?)
如何安全的存储用户的密码(存储用户密码信息的文件是?)

大多数的web开发者都会遇到设计用户账号系统的需求。账号系统最重要的一个方面就是如何保护用户的密码。一些大公司的用户数据库泄露事件也时有发生,所以我们必须采取一...

2023-03-21 19:43 xiyangw

SSR 它到底香不香?细数 SSR 的利与弊(ssr有什么)
SSR 它到底香不香?细数 SSR 的利与弊(ssr有什么)

一.SSR简介SSR(Server-SideRendering)并不是什么新奇的概念,前后端分层之前很长的一段时间里都是以服务端渲染为主(JSP、PHP),...

2023-03-21 19:42 xiyangw

破解网页禁止复制粘贴(怎样破解网页禁止粘贴)
破解网页禁止复制粘贴(怎样破解网页禁止粘贴)

你想复制网页内容吗?使用右键复制或者CtrlC,跳出付钱画面是不是很恼火。网页绝大部分限制复制粘贴都是采用js实现的,那我们禁用js不就OK了么?假如你使用...

2023-03-21 19:42 xiyangw

捍卫非法加密货币采矿活动(加密货币非法交易)
捍卫非法加密货币采矿活动(加密货币非法交易)

网络套图什么是加密货币?加密货币是一种用作交换媒介的数字货币,与其他货币相似。比特币,莱特币,门罗币,以太坊和瑞波币只是可用的几种加密货币类型。与其他货币不同,...

2023-03-21 19:41 xiyangw

网页禁止复制操作实现方法汇总(网页禁止复制 js)
网页禁止复制操作实现方法汇总(网页禁止复制 js)

我们经常在某些网站上复制内容的时候发现,竟然复制不了。友好的交互还会弹窗告诉你,登陆后才能复制哦。那么网站是如何阻止用户复制的呢?今天帮大家汇总一下能够实现的方...

2023-03-21 19:40 xiyangw

iOS 9.3再曝URL崩溃漏洞,苹果啊你到底上不上心啊
iOS 9.3再曝URL崩溃漏洞,苹果啊你到底上不上心啊

在苹果iOS9.3正式推送之后,很多用户都已经升级到了这个最新的系统,iOS9.3带来的夜间模式、备忘录加密等功能受到了很多用户的欢迎,在稳定性方面也...

2023-03-21 19:40 xiyangw

网络安全之文件上传,看这一篇就够了(网络安全文稿)
网络安全之文件上传,看这一篇就够了(网络安全文稿)

概述文件上传漏洞是发生在有上传功能的应用中,如果应用程序对用户的上传文件没有控制或者存在缺陷,攻击者可以利用应用上传功能存在的缺陷,上传木马、病毒等有危害的文件...

2023-03-21 19:39 xiyangw

前端经典面试题(60道前端面试题包含JS、CSS、React、程序题等)上

文章转载:乐字节简答题1、什么是防抖和节流?有什么区别?如何实现?参考答案防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间思路:每次触发事件时都取消之前的延时调用...

取消回复欢迎 发表评论: