for of 的用法区别_ES6语法:var、let、const的区别详解
今天来说说es6的语法,最基础的也就是var,let,const 的用法与区别了,我们来看看他们之间的恩怨情仇
首先来说说var,这个只要是学过js的都知道,它是用来声明一个变量的,但是它在开发中也会遇到一些问题,比较难解决。先来看看下面的代码:
var str="hello world";function testVar(){ var str="hello";}testVar();console.log(str);
这段代码的结果是 "hello world",这说明在var 申明的变量,即使是同样的名字,在不同的块中,在外层块中的变量优先级更高,也就是说,在外层优先使用并且只能使用当前块中的变量;而在他的内部块中的变量,比如说这个函数里面的str,他其实也是优先使用块内的str变量,会屏蔽掉外面的str变量,这是一点。再来看看下面一段代码
function variableHoisting(){ if(condition){ var test="hello javaScript"; }else{ console.log(test) //这里可以访问到test,但是它是undefined,因为初始化为它赋值成了undefined } //这里也可以访问到test}
可能你会感到奇怪,我的var 申明的变量在if 代码块里面,为什么我的else里面也能访问呢,其实上面这段代码相当于下面这段代码
function variableHoisting(){ var test; if(condition){ test="hello javaScript"; }else{ console.log(test) //这里可以访问到test,但是它是undefined,因为初始化为它赋值成了undefined } //这里也可以访问到test}
现在知道了吧?这就是所谓的变量提升,我在if里面申明的变量,其实浏览器在预解析的时候就对var ,以及function关键字的变量或者方法进行了处理,处理后的代码就是上面这段代码(当然,我之前讲过一篇函数声明与函数表达式的区别,你可以看看,你会知道更多。)看到这里,也许你不会感觉var 有什么不好的地方,再往下看看:
var funcs = [];for (var i = 0; i < 10; i++) { funcs.push(function() { console.log(i); });}funcs.forEach(function(func) { func(); // 输出数值 "10" 十次});
可能你想的是输出0,1,2,3,4,5,6,7,8,9但是这不是正确答案,这只能输出10个10,为什么呢?因为循环完成过后,i已经是10了,再次调用的时候,这个i值在每次迭代过程中共享了。
下面我们就来引入一下let,以及const。let 也是用来申明变量的,但是他申明的变量是块级作用域,什么意思呢,看下面
function testLet(){ if(condition){ let str="hello let" }else{ //这里访问不到str } //这里也访问不到str}
看了上面,你也许就知道了什么是块级作用域,也就是一个大括号嘛,括号里面就是一块。用let申明的变量是没有之前所说的变量提升这一说的,所以在外部块里面是访问不到let申明的变量的。这样,之前说var缺陷的哪一块代码经过小小的改变就能正常输出0..9了,你看看
var funcs = [];for (let i = 0; i < 10; i++) { funcs.push(function () { console.log(i); });}funcs.forEach(function (func) { func(); // 输出数值 0-9});
这就是let,与var的一个小区别,当然如果说你申明变量的时候不指名是用的var,还是let,编译的时候会将这个变量解析为var申明的变量。
不管是var,还是let,他们是不能重复申明的,比如像下面这样
var str="var";let str="let";
这样是会报错的,编译的时候,不能重复定义。
然后就是const了,这个其实就是常量的单词的英文缩写(constant),没错,这是用来申明一个常量的。什么事常量呢,顾名思义,就是一旦赋值就不能再改变了。比如说:
const MAX=3.1415926;MAX=3.14;
这样是不行的,会报错,常量不能改变的。来看看const的循环,在最基础的for -i的循环里面,他是会报错的,运行一次过后就会报错,但是在for-in 循环里面他是不会报错的,当然在for-of循环里面也不会
var funcs = [], object = { a: true, b: true, c: true };// 不会导致错误for (const key in object) { funcs.push(function () { console.log(key); });}funcs.forEach(function (func) { func(); // 依次输出 "a"、 "b"、 "c"});
这样是不会报错的,来看看究竟是为什么呢?
上面说了,const申明的变量是不能改变的,但是,我们试试申明一个对象呢,然后改变对象里面的属性的值。
const object={ name:"学习笔记", age:18}console.log(object.name)object.name="hello world"console.log(object.name)
这段代码,第一个会打印出来“学习笔记”,第二个会打印出来“hello world”,为什么呢?原因在这,其实,这段代码改变的不是object这个对象变量,而是这个变量的属性,知道了这个就不难理解为什么在for-in ,for-of循环里面,const不会报错了吧?如果对你有帮助的话,记得点个关注哦,如果你发现文中有错误,记得帮我指出来
ps:如果你觉得观看不佳,可以去微信公众号里面看哦!全栈学习笔记等你关注,精彩美文每天为你推送!
for of 的用法区别_ES6语法:var、let、const的区别详解相关推荐
- 前端开发:JS中let、var和const的区别详解
前言 前端开发过程中,JS声明变量的关键字想必开发者都不陌生,而且使用的频率在前端开发过程中也是数一数二的.JS中声明变量的关键字有三个let.var和const,但是三者的使用对比和区别也是非常重要 ...
- Var let const 的区别
Var let const 的区别 变量提升 var 存在变量提升 变量可以在声明之前调用 但是值为undefined. let ,const 不存在变量提升.他们声明的变量必须在声明后调用 如果在之 ...
- python打开文件的语法_python27语法Python文件打开方式实例详解【a、a+、r+、w+区别】...
本文实例讲述了Python文件打开方式.分享给大家供大家参考,具体如下: 第一步 排除文件打开方式错误: r只读,r+读写,不创建 w新建只写,w+新建读写,二者都会将文件内容清零 (以w方式打开,不 ...
- gets和fgets函数及其区别,C语言gets和fgets函数详解
gets和fgets函数及其区别,C语言gets和fgets函数详解 每当讨论 gets 函数时,大家不由自主地就会想起 1988 年的"互联网蠕虫",它在 UNIX 操作系统的 ...
- puts和fputs函数及其区别,C语言puts和fputs函数详解
puts和fputs函数及其区别,C语言puts和fputs函数详解 与 gets 函数一样,对于 puts 函数,同样建议使用 fputs 函数来代替 puts 函数.如下面的示例代码所示: int ...
- js中定义变量之②var let const的区别
var 上一篇文章有讲过,是js定义变量的关键词. 但是在es6中,新添加了两个关键词,用于变量声明的关键词:let 和const 接下来就说一下var let 和const的区别: 首先说var 用 ...
- Js中var,let,const的区别
一:区别: 1.var声明的变量属于函数作用域,而let和const声明的变量属于块级作用域:(js作用域在上篇文章) 2.var声明的变量存在变量提升,而let和const没有 3.var声明的变量 ...
- 红宝书系列之 var let const 的区别
目录 声明风格及最佳实践 var 关键字 1. var 使用 2. var 声明作用域 3. var 声明提升 let 声明 1. let 作用域 2. 暂时性死区 3. 全局声明(网易前端笔试题) ...
- c++ map用法_Pandas数据处理三板斧——map、apply、applymap详解
在日常的数据处理中,经常会对一个DataFrame进行逐行.逐列和逐元素的操作,对应这些操作,Pandas中的map.apply和applymap可以解决绝大部分这样的数据处理需求.这篇文章就以案例附 ...
最新文章
- MediaCodeC解码视频指定帧,迅捷、精确
- MMD_1a_MapReduce
- java 追加写入hdfs_java操作之HDFS-创建-删除目录-读写文件-追加写文件
- 使用 SQL 语句从数据库一个表中随机获取一些数据
- JavaScript开发优化技巧
- 使用情态动词提出请求和问题_53
- mysql免安装版配置百度_mysql -5.7.10 免安装版配置
- elipse与数据库Mysql连接,并实现创建数据表的功能
- mtk充电电流文件_MT2503 系列充电电流问题
- 嵌入式开发学习(8)一步一步点亮LED灯
- 裁员取暖?互联网行业深陷寒冬,网易被爆裁员30%!
- PHP-用ThinkPHP和Bootstrap实现用户登录设计
- watermark.js文字水印以及图片水印
- 2021年东方市铁路中学高考成绩查询,东方2021多少分可以上高中 分数线预测
- 不要跟别人争对错,争了,对也变成错了。
- VS2019使用教程(使用VS2019编写C语言程序)
- 今天正式告别单身生活
- rem是什么? 如何使用呢?
- 钢绞线弹性模量怎么计算_15.24钢绞线弹性模量
- pytorch 反卷积 可视化_Toybrick
热门文章
- 浏览器快捷键_干货 | 掌握这些快捷键,工作效率翻倍
- oracle 取系统当前年份_Oracle中如何获取系统当前时间
- 《IBM-PC汇编语言程序设计》(第2版)【沈美明 温冬婵】——第八章——自编解析与答案
- 汇编语言——《子程序应用(数制转换)程序设计》实验报告
- C#——委托(delegate)DEMO
- 自定义线程池内置线程池的使用 ThreadPoolExecutor和Executorservice 示例与注意事项
- 【python笔记】python模块 datatime模块
- 操作系统 课堂练习题03【20道 经典题目】
- 应用跳转到AppStore指定关键字搜索界面
- 如何使用iOS AddressBook