es5 中提供了 两个声明变量的方式

  var  function

  es6 中提供了 四种声明变量的方式

  let  const  class  import

  现在,定义变量的关键字有 6 个了

  备注:不能忽略函数的形参函数的私有变量;

  var 定义变量

  var 的功能: 变量提升,但是未定义,给 window 添加一个定义的属性

  function 定义变量

  function 的功能:既可以变量提升,同时还进行了定义

  let 定义变量

  是 es6 提供的一种声明变量的方式

  1. 没有变量提升的功能,在声明之前不能使用;

  2. 不能重复声明

  3. 不会给 window 添加属性

  var 的作用域:

    var 声明变量,作用域分两种

    一种是全局作用域

      在 window 下声明变量或在函数外声明变量

    一种是局部作用域

      在函数内声明的变量

  了解浏览器执行机制;

    浏览器执行的时候,首先会开辟一个大空间,叫 window ,window 下面分两个模块,一个叫栈,一个叫堆,栈存放的变量的内存地址,堆主要存放代码块,然后浏览器从上到下执行代码

    如图

    

  function 申请变量

    function 声明的变量 也会给 window 添加一个属性,属性值是方法

  函数的归属

    函数归谁,跟他在哪调用无关,跟他在哪定义有关

  任何一个函数,执行后,都有一个返回值,如果没了 return 是什么就得到什么,如果没有 return 就是 undefined

  函数在 if 中的特殊情况

    var function  都有变量提升,window 下 所有的 var function

    但是在 if 语句里面的定义函数,只会提前声明,不定义,当条件成立的时候,if 模块中不管函数在哪声明的,函数都会第一步对这个函数先定义,在去执行 if 里面的代码

  let 声明的变量,块级作用域

  带 {} 都是块级作用域;

  在块级作用域,代码的执行的顺序,从上到下依次执行,哪怕块级作用域里面套块级作用域  而 局部作用域 则是,跟函数在哪调用有关

  if(){}  for(){}  对象{}

  注意:var function 没有块级作用域这个概念,let 和 const 有块级作用域这个概念;

  1. 在块级作用域下 var 和 function 跟在 window 下一样,但是 function 在块级作用域前面,只会声明,不会提前定义;

  2. 在块级作用域下 let 和 const 声明的变量都是私有的,外面访问不到;

  3. for 循环下,let 声明的变量不会泄露

  事件是异步的,for 循环结束后,i 是 3 并且 全局,点击了 li ,最后 alert 出 i , i 此时是3 ,所以会弹 3

  let 循环的好处很多; 块级作用域不会有全局一说,可以让我们更好的处理 for循环的事件

  

  块级作用域和对象的区分;

    {} 如果想表示对象,那就不能放在行首,就是大括号前面不能没东西,如果 {} 前面什么都没有,代表块级作用域

    eval('({name;"zhang",age:20})')  要这种写法才可以;

    eval 就是要干掉字符串,干掉字符串无法解析 {} ,所以需要在 ({}) 才可以  {} 代表块级作用域

  暂时性死区

    如果块级作用域内,使用 let 和 const 命令,声明变量,这个区域就会被这个变量强制绑定,凡是在声明之前,这些变量都是不可用的,使用会报错,这就是暂时性死区

  暂时性死区的场景

    使用变量 b ,在定义变量 b 之前了,出现暂时性死区

  函数参数默认值

    1. 写法,有默认写后面,没默认写前面;

    2. 如果传对应的参数,就不需要默认值了,不是先赋默认值,然后用实参覆盖

  var a=a  不报错,因为 var 可以变量提升,在 = 赋值 从右往左,使用变量 a ,是undefined,赋值时,就是把 undefined 赋值给 a ,所以 a 还是 undefined;

  let a=a  报错,赋值运算从右往左,右边使用变量 a 结果发现 a 没有声明,而 let 语法规定,不能在没定义前使用变量,所以报错

  

  const 讲解

  1.  定义变量,但值是常量的,一旦赋值不能在改变

  2. 不能重复定义变量,没有变量提升

  3. 不能给 window 添加属性

  

  

es6 语法的的更多相关文章

  1. es6语法重构react代码

    1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component.另外react 0.13之后props必须是不可变 ...

  2. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  3. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  4. 让intellij idea 14 支持ES6语法

    用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...

  5. .vue文件在webstorm中es6语法报错解决方法

    1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...

  6. webpack打包不识别es6语法的坑

    今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是web ...

  7. ES6语法的学习与实践

    ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...

  8. 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  9. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

  10. vue-i18n使用ES6语法以及空格换行问题

    1.运行报错 报错使用了不恰当的exports Uncaught TypeError : Cannot assign to read only property 'exports ' of objec ...

随机推荐

  1. MySQL基础入门之常用命令介绍

    mysql命令介绍 mysql 是数据库管理命令 通过mysql --help来查看相关参数及使用说明 mysql --help                #mysql数据库管理命令 Usage: ...

  2. mysql远程连接错误10038--navicat for mysql (10038)

    1.确定3306端口是否对外开放 如果是阿里云服务器,需要添加安全组规则 2.授权 执行sql,账号密码按照自己服务器而定 grant all privileges on *.* to 'root'@ ...

  3. HTML5的几大新特性

    为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者 ...

  4. 如何将本地的一个新项目上传到GitHub上新建的仓库中去

    1:我们需要先创建一个本地的版本库(其实也就是一个文件夹).直接右击新建文件夹,或者右击打开Git bash命令行窗口通过命令mkdir来创建(mkdir 文件名). 进入这个文件夹的根目录,选中目录 ...

  5. window常见事件onload

    1, window.onload 是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,css文件等),就调用的处理函数 下面的代码,当点击按钮,并不会弹出对话框,因为页面还 ...

  6. Restful 架构方式的 web service

    现在公司项目用的apache wink 搭建的web service ,感觉挺好用的.顺便学习一个这种架构方式 . 个人理解apache 实现Restful 架构方式技术有两种,如果有其他新的知识或不 ...

  7. python实现建造者模式

    python实现建造者模式 前言 无论是在现实世界中还是在软件系统中,都存在一些复杂的对象,它们拥有多个组成部分,如汽车,它包括车轮.方向盘.发送机等各种部件.而对于大多数用户而言,无须知道这些部件的 ...

  8. 程序员称为高手的10条心得(摘自http://www.jizhuomi.com/software/394.html)

    在这个世界上,有数百万的人热衷于软件开发,他们有很多名字,如:软件工程师(Software Engineer),程序员(Programmer),编码人(Coder),开发人员(Developer).经 ...

  9. mysql个人初配置

    记录下在ubuntu 18.04.3 LTS环境中安装mysql和个人初期简单设置. 1:安装myslq:sudo apt install mysql-server. 2:设置root密码.由于我没有 ...

  10. SpringBootMybatis02 mybatis-generator-gui|pageHelper|前后端分离|Filter权限实现

    一.Mybatis-generator-gui 下载地址:https://github.com/LittlePageProgram/mybatis-generator-gui.git 使用方法:填写相 ...