一、新增命令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. 你可能不知道的jvm的类加载机制

    引言:在java代码中,类型的加载.连接与初始化过程都是在程序运行期间完成的. 加载:查找并加载类的二进制数据(class文件加载到内存中) 连接:a 验证:确保被加载类的正确性. b准备:为类的静态 ...

  2. SSH免密登陆原理及实现

    声明:作者原创,转载注明出处. 作者:帅气陈吃苹果 一.SSH简介 SSH(Secure Shell)是一种通信加密协议,加密算法包括:RSA.DSA等. RSA:非对称加密算法,其安全性基于极其困难 ...

  3. shell-输入与输出<echo, read, cat, tee >

    1. echo echo命令可以显示文本行或变量,或者吧字符串输入到文件. 用法:echo [option] string   #[option]可选:-e ==>解析转移字符,(常用的\n & ...

  4. 微信小程序 组件通信相关知识整理

    1.自定义组件间通信与事件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.htm ...

  5. ArcGIS对SLD样式的支持

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.ArcGISWMS服务对SLD的支持 在完成用geoserver的w ...

  6. 数据库优化案例——————某知名零售企业ERP系统

    写在前面 记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也分享自己做的优化案例. 之前分享过OA系统.H ...

  7. php自动加载规范 PSR4 (Thinkphp)

    PSR4是一种自动加载规范,老版本是PSR0,尽管thinkPHP支持PSR4和PSR0的自动加载方式,但是默认也是优先进行PSR4加载,如果失败,再进行PSR0的加载.本篇文章只会讨论PSR4的加载 ...

  8. Vue(day6)

    一.webpack中常用的文件loader & 插件 由于版本存在变动,以下安装和配置都有可能发生变化,请以官方文档为准. 1.html-webpack-plugin插件 html-webpa ...

  9. 【机器学习】--鲁棒性调优之L1正则,L2正则

    一.前述 鲁棒性调优就是让模型有更好的泛化能力和推广力. 二.具体原理 1.背景 第一个更好,因为当把测试集带入到这个模型里去.如果测试集本来是100,带入的时候变成101,则第二个模型结果偏差很大, ...

  10. 【ElasticSearch篇】--ElasticSearch从初识到安装和应用

    一.前述 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口,在企业中全文搜索时,特别常用. 二.常用概念 clu ...