今天来说说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的区别详解相关推荐

  1. 前端开发:JS中let、var和const的区别详解

    前言 前端开发过程中,JS声明变量的关键字想必开发者都不陌生,而且使用的频率在前端开发过程中也是数一数二的.JS中声明变量的关键字有三个let.var和const,但是三者的使用对比和区别也是非常重要 ...

  2. Var let const 的区别

    Var let const 的区别 变量提升 var 存在变量提升 变量可以在声明之前调用 但是值为undefined. let ,const 不存在变量提升.他们声明的变量必须在声明后调用 如果在之 ...

  3. python打开文件的语法_python27语法Python文件打开方式实例详解【a、a+、r+、w+区别】...

    本文实例讲述了Python文件打开方式.分享给大家供大家参考,具体如下: 第一步 排除文件打开方式错误: r只读,r+读写,不创建 w新建只写,w+新建读写,二者都会将文件内容清零 (以w方式打开,不 ...

  4. gets和fgets函数及其区别,C语言gets和fgets函数详解

    gets和fgets函数及其区别,C语言gets和fgets函数详解 每当讨论 gets 函数时,大家不由自主地就会想起 1988 年的"互联网蠕虫",它在 UNIX 操作系统的 ...

  5. puts和fputs函数及其区别,C语言puts和fputs函数详解

    puts和fputs函数及其区别,C语言puts和fputs函数详解 与 gets 函数一样,对于 puts 函数,同样建议使用 fputs 函数来代替 puts 函数.如下面的示例代码所示: int ...

  6. js中定义变量之②var let const的区别

    var 上一篇文章有讲过,是js定义变量的关键词. 但是在es6中,新添加了两个关键词,用于变量声明的关键词:let 和const 接下来就说一下var let 和const的区别: 首先说var 用 ...

  7. Js中var,let,const的区别

    一:区别: 1.var声明的变量属于函数作用域,而let和const声明的变量属于块级作用域:(js作用域在上篇文章) 2.var声明的变量存在变量提升,而let和const没有 3.var声明的变量 ...

  8. 红宝书系列之 var let const 的区别

    目录 声明风格及最佳实践 var 关键字 1. var 使用 2. var 声明作用域 3. var 声明提升 let 声明 1. let 作用域 2. 暂时性死区 3. 全局声明(网易前端笔试题) ...

  9. c++ map用法_Pandas数据处理三板斧——map、apply、applymap详解

    在日常的数据处理中,经常会对一个DataFrame进行逐行.逐列和逐元素的操作,对应这些操作,Pandas中的map.apply和applymap可以解决绝大部分这样的数据处理需求.这篇文章就以案例附 ...

最新文章

  1. MediaCodeC解码视频指定帧,迅捷、精确
  2. MMD_1a_MapReduce
  3. java 追加写入hdfs_java操作之HDFS-创建-删除目录-读写文件-追加写文件
  4. 使用 SQL 语句从数据库一个表中随机获取一些数据
  5. JavaScript开发优化技巧
  6. 使用情态动词提出请求和问题_53
  7. mysql免安装版配置百度_mysql -5.7.10 免安装版配置
  8. elipse与数据库Mysql连接,并实现创建数据表的功能
  9. mtk充电电流文件_MT2503 系列充电电流问题
  10. 嵌入式开发学习(8)一步一步点亮LED灯
  11. 裁员取暖?互联网行业深陷寒冬,网易被爆裁员30%!
  12. PHP-用ThinkPHP和Bootstrap实现用户登录设计
  13. watermark.js文字水印以及图片水印
  14. 2021年东方市铁路中学高考成绩查询,东方2021多少分可以上高中 分数线预测
  15. 不要跟别人争对错,争了,对也变成错了。
  16. VS2019使用教程(使用VS2019编写C语言程序)
  17. 今天正式告别单身生活
  18. rem是什么? 如何使用呢?
  19. 钢绞线弹性模量怎么计算_15.24钢绞线弹性模量
  20. pytorch 反卷积 可视化_Toybrick

热门文章

  1. 浏览器快捷键_干货 | 掌握这些快捷键,工作效率翻倍
  2. oracle 取系统当前年份_Oracle中如何获取系统当前时间
  3. 《IBM-PC汇编语言程序设计》(第2版)【沈美明 温冬婵】——第八章——自编解析与答案
  4. 汇编语言——《子程序应用(数制转换)程序设计》实验报告
  5. C#——委托(delegate)DEMO
  6. 自定义线程池内置线程池的使用 ThreadPoolExecutor和Executorservice 示例与注意事项
  7. 【python笔记】python模块 datatime模块
  8. 操作系统 课堂练习题03【20道 经典题目】
  9. 应用跳转到AppStore指定关键字搜索界面
  10. 如何使用iOS AddressBook