一、新增命令let/const

①:let命令

   1、let命令用来声明变量,它的用法类似于var,但是所声明的变量只在let命令所在的代码块内生效。  

所以在for循环中,就很适合使用let命令。

  

上面代码中,i只在for循环体内有效,在循环体外就会报错。

在下面代码中,如果使用var,最后结果为 10。

上面代码中,变量i是var命令声明的,在全局范围内都有效,所以全局变量只有一个i。每一次循环,变量i的值都会被重新赋值,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是 10。

如果是用let,声明的变量仅在会计作用域内有效,结果也就为6.

上面的代码中,变量i是let声明的,所以i只会在本循环体中有效,因此每一次循环的i都是一个新的变量,也就是说会被重新赋值,所以结果也就为6。

另外,在for循环体中还有一个特别之处,就是设置循环变量的那一部分是一个父作用域,而循环体内是一个单独的子作用域。

  2、变量不会被提升

  在var命令中会发生‘变量提升’的现象,即变量可以在声明之前使用,值为undefined。

  而let命令改变了这一语法行为,在声明之前使用会报错。

  3、暂时性死区

  何为暂时性死区?就是说只要块级作用域内存在let命令,它所声明的变量就‘绑定’这个区域,不再受外部的影响。

上面的代码中,存在全局变量a,但是在块级作用域内let又声明了一个局部变量a,导致后者绑定了这个区域,所以在let声明变量之前,对a的输出会报错。

在 ES6 中明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了一个封闭作用域。凡是在声明之前使用这些变量就会报错。

  4、不允许重复声明

  在var中,我们知道对于一个变量,可以用var去重复声明它。而在let中,不允许在相同的作用域内,重复声明同一个变量。

②:const命令

  1、const声明一个只读的常量,一旦声明,常量的值就不能被改变。

因为const声明的变量不能更改,所以说,const一旦声明变量,就必须立即初始化,不能留到最后再去赋值。

上面代码表示,const只声明不赋值,就会报错。

  2、const的作用域与let命令相同:只在声明所在的块级区域内有效;

  3、const命令声明的常量也是不提升的,同样存在暂时性死区,只能在声明的位置后面使用,且同样不能被重复声明。

当然const实际上保证的并不是变量的值不被改变,而是变量指向的那个内存地址所保存的数据不被改变。而对于其他类型的数据(对象、数组),变量指向的则是内存地址,保存的只是一个指向实际数据的方位,const只能保证这个方位是固定的,至于它指向的数据结构是不是可变的,就不是能控制的了。

上面代码中,常量arr储存的是一个地址,这个地址指向一个数组。不可变的是这个地址,即不能把arr指向另一个地址,但数组本身是可变的,所以依然可以向里面添加值。

二、解构赋值

  在ES6中,允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这个被称之为解构。

以前给变量赋值时,只能直接指定值。

在ES6中允许写成这样

上面代码中表示,可以从数组中提取值,按照对应的位置,对变量赋值。

只要等号两边的模式相同,左边的变量就会被赋予对应的值。

如果解构不成功,变量的值就等于undefined。

  解构赋值允许指定默认值

这种情况下,只有当变量等于undefined时,默认值才会生效。

上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。

  对象的解构赋值

解构也可以用于对象。

在对象的解构中,对象对策属性是没有次序之分的,只要变量与属性同名,就能取到正确的值。

在对象的解构中,我们还可以更改变量名。

上面代码中,foo是匹配的模式,bar才是变量,所以真正被赋值的是变量bar,而不是foo。

在对象的解构中也是可以指定默认值的,同样、条件必须是属性值等于undefined。

ES6基础的更多相关文章

  1. ES6 基础

    转载自:ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来 ...

  2. 新手必看ES6基础

    ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来说明这两 ...

  3. ES6基础语法

    1. 什么是ECMAScript ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association ...

  4. 从零开始学 Web 之 ES6(四)ES6基础语法二

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 从零开始学 Web 之 ES6(五)ES6基础语法三

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 ES6(六)ES6基础语法四

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. ES6 基础学习

    ECMAScript 6 标准入门 一.let和const let命令 let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效:是块级作用域,且let不允许 ...

  8. ES6基础-ES6 class

    作者 | Jeskson 来源 | 达达前端小酒馆 ES - Class 类和面向对象: 面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它 ...

  9. ES6基础-ES6的扩展

    进行对字符串扩展,正则扩展,数值扩展,函数扩展,对象扩展,数组扩展. 开发环境准备: 编辑器(VS Code, Atom,Sublime)或者IDE(Webstorm) 浏览器最新的Chrome 字符 ...

  10. ES6基础-变量的解构赋值

    作者 | Jeskson 来源 | 达达前端小酒馆 解构赋值: 数组的解构赋值,对象的解构赋值,字符串的解构赋值,数值与布尔值的解构赋值,函数参数的解构赋值. 开发环境准备: 编辑器,VS Code, ...

随机推荐

  1. 【STM32H7教程】第9章 STM32H7重要知识点数据类型,变量和堆栈

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第9章   STM32H7重要知识点数据类型,变量和堆栈 ...

  2. Kubernetes Ingress Controller的使用及高可用落地

    Kubernetes Ingress Controller的使用及高可用落地 看懂本文要具备一下知识点: Service实现原理和会应用 知道反向代理原理,了解nginx和apache的vhost概念 ...

  3. HttpServletRequest 接口、HttpServletResponse 接口、请求转发与重定向

    上篇文章我们讲了servlet的基本原理,这章将讲一下剩余的部分. HttpServletRequest 接口 该接口是 ServletRequest 接口的子接口,封装了 HTTP 请求的相关信息, ...

  4. Protocol Buffers(3):阅读一个二进制文件

    目录 Proto文件 序列化 二进制文件解析 反序列化 参考 博客:blog.shinelee.me | 博客园 | CSDN 这篇文章中,我们将定义一个相对复杂的数据结构,直接分析其序列化后的二进制 ...

  5. C#-Xamarin的Android项目开发(一)——创建项目

    创建项目 使用Xamarin开发安卓项目,首先需要安装VS2017以上版本.因为VS2017以上的版本,可以直接创建Xamarin项目. 另外用Xamarin开发安卓项目,还需要使用Intel的CPU ...

  6. 设计模式之桥接模式——Java语言描述

    桥接适用于把抽象化和实现化解耦,使得二者可以独立变化.这种类型的设计模式属于结构性模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦 这种模式设计到一个作为桥接的接口,使得实体类的功能独立 ...

  7. 学习web的第二天

    之前因为技能大赛的原因,导致我这门课没有上.其实上学期是开Dreamweaver网页制作的课程的,所以老师讲的很快.我就利用课后时间去补漏,今天讲了HTML标签:1.标题标签<h1>~&l ...

  8. 怎么让DIV在另一个DIV里靠底部显示?

    可以使用css的position属性的绝对定位. 拓展知识 position 属性指定了元素的定位类型. position 属性的五个值: static:HTML元素的默认值,即没有定位,元素出现在正 ...

  9. elasticsearch常用命令备注

    1.检查集群健康状态 curl 'localhost:9200/_cat/health?v' 2.检查节点健康状态 curl 'localhost:9200/_cat/nodes?v' 3.新增一条索 ...

  10. notepad++ 快速运行PHP代码

    notepad++ 运行PHP代码 1. 按下快捷键 F52. 将输入如下命令 cmd /k D:\xampp\php\php.exe "$(FULL_CURRENT_PATH)" ...